/* ════════════════════════════════════════════════════════════════════
   src/grimshackle.css — universal stat block, light theme.
   Tokens from DESIGN.md (the approved mockup). All three systems share
   these classes; the renderer feeds system-specific data + labels.
   Colors live in CSS vars so a dark theme can be added later cleanly.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --gs-page:#d9d5c8;
  --gs-card:#fdfcf9;
  --gs-card-border:#e6e1d8;
  --gs-card-foot:#f3ece0;
  --gs-card-foot-edge:#e3d9c6;
  --gs-accent:#9a4436;
  --gs-ink:#241f1b;
  --gs-body:#3c3631;
  --gs-muted:#6f665c;
  --gs-muted2:#837a6e;
  --gs-label:#a4988a;
  --gs-faint:#bcb2a3;
  --gs-rule:#ece6dc;
  --gs-strip:#f7f3ec;
  --gs-cell:#fbf8f2;
  --gs-stress:#b88a3a;
  --gs-tag-bg:#efe7df;
  --gs-tag-ink:#7a7065;

  /* ── Brand palette (semantic tokens) ──────────────────────────────
       Party · Sage    #4e6b62  player-side
       Success · Moss  #556631  heal / confirm
       Caution · Ochre #c69230  bloodied / warn
       Canvas · Sand   #d9d5c8  app background */
  --gs-sage:#4e6b62;
  --gs-moss:#556631;
  --gs-ochre:#c69230;
  --gs-dusk:#4c5d72;        /* Arcane / info — the Dice panel's slate-blue */
  --gs-sand:#d9d5c8;

  /* side-panel tokens (light theme; dark theme overrides these only) */
  --gs-panel-bg:#f6f1e7;
  --gs-panel-edge:#d8cdb6;
  --gs-panel-ink:#3a332b;
  --gs-panel-muted:#8a7d68;
  --gs-panel-accent:#caa23a;
  --gs-panel-accent-ink:#8a6a1f;
  --gs-panel-on-accent:#2a2113;   /* readable text laid ON the accent fill; per-panel overrides go light on the darker accents */
  --gs-panel-chip:#fbf7ee;
  --gs-panel-chip-hover:#efe5cf;
  --gs-panel-shadow:rgba(60,48,28,.18);

  /* modal tokens — DARK design (matches the Option B input header #26211c).
     Every modal family reads these, so this block is the single source of truth
     for the unified modal theme. */
  --gs-modal-bg:#26211c;          /* modal box background */
  --gs-modal-bg2:#2f2822;         /* gradient/secondary surface */
  --gs-modal-inset:#312a23;       /* rows, chips, inset surfaces */
  --gs-modal-inset-hover:#3d342b;
  --gs-modal-border:#3a322a;      /* box + row borders */
  --gs-modal-ink:#f3ece1;         /* primary text */
  --gs-modal-ink-solid:#f3ece1;
  --gs-modal-muted:#c3b6a4;       /* secondary text */
  --gs-modal-muted2:#8a8073;      /* tertiary/labels */
  --gs-modal-label:#c3b6a4;
  --gs-modal-accent:#9a4436;      /* the red accent (matches Option B) */
  --gs-modal-accent-ink:#fbf1ec;
  --gs-modal-gold:#e0b257;
  --gs-modal-overlay:rgba(22,16,11,.55);

  --gs-font-display:'Spectral', Georgia, serif;
  --gs-font-mono:'JetBrains Mono', ui-monospace, monospace;
  --gs-font-body:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

.gs-card{
  position:relative;
  width:420px; max-width:100%; min-width:0; box-sizing:border-box;
  background:var(--gs-card);
  border:1px solid var(--gs-card-border);
  border-radius:6px;
  box-shadow:0 1px 2px rgba(40,30,20,.05), 0 12px 34px rgba(40,30,20,.08);
  overflow:hidden;
  font-family:var(--gs-font-body);
  color:var(--gs-body);
}
.gs-card *{ box-sizing:border-box; }

/* thin creature-family accent bar at the very top, in the system color */
.gs-accent-bar{ height:4px; background:var(--sys-bar,var(--gs-accent)); }

/* system-colored header band (dark gradient + colored bottom edge). The gradient
   is dark by design, so header text is always light regardless of light/dark theme. */
.gs-card-header{ background:var(--sys-header-bg, transparent); border-bottom:2px solid var(--sys-edge, var(--gs-rule)); }
.gs-card-header .gs-name{ color:#f0e6d0; }
.gs-card-header .gs-given{ color:#e6c657; }
.gs-card-header .gs-subtitle, .gs-card-header .gs-flavor{ color:#cdbfa0; }
.gs-card-header .gs-meta{ color:var(--sys-label, #b8a888); }
.gs-card-header .gs-meta-rank{ color:#f0d574; }
.gs-card-header .gs-meta-sub{ color:#a8997a; }
/* Motives is the only infoRow that lives in the (dark gradient) header. Without this it
   keeps body colors (dark ink value, dim label) and goes invisible on the DH/PF/converted
   header — see the motives-contrast bug. Light it to match the subtitle/flavor + system label. */
.gs-card-header .gs-info-label{ color:var(--sys-label, #b8a888); }
.gs-card-header .gs-info-val,
.gs-card-header .gs-info-val i{ color:#cdbfa0; }
.gs-card-header .gs-trait{ background:rgba(255,255,255,.08); color:#e0d4ba; border-color:rgba(255,255,255,.14); }

/* dog-ear corner number tag */
.gs-num-tag{ position:absolute; top:0; right:0; width:44px; height:44px; z-index:4; pointer-events:none; border-radius:0 6px 0 0; overflow:hidden; }
.gs-num-tag svg{ width:44px; height:44px; display:block; }

.gs-pad-top{ padding:15px 18px 14px; }
.gs-pad{ padding:12px 18px 16px; }

/* ── metadata ── */
.gs-meta{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--gs-font-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gs-label); }
.gs-meta-rank{ color:var(--gs-accent); font-weight:700; }
.gs-meta-sub{ margin-top:10px; font-family:var(--gs-font-mono); font-size:9px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gs-faint); }

/* ── identity ── */
.gs-name{ font-family:var(--gs-font-display); font-size:31px; font-weight:600;
  letter-spacing:-.01em; line-height:1; margin-top:10px; color:var(--gs-ink); }
.gs-given{ font-family:var(--gs-font-display); font-style:italic; font-size:14px;
  color:var(--gs-accent); margin-top:9px; margin-bottom:-3px; letter-spacing:.01em; }
.gs-subtitle{ font-family:var(--gs-font-display); font-style:italic; font-size:13.5px;
  color:var(--gs-muted); margin-top:7px; }
.gs-flavor{ font-size:12px; line-height:1.5; color:var(--gs-muted2); margin-top:9px; }
.gs-inspired{ font-size:11px; color:var(--gs-faint); margin-top:7px; font-style:italic; }
.gs-inspired-lbl{ font-family:var(--gs-font-mono); font-size:8px; letter-spacing:.08em;
  text-transform:uppercase; font-style:normal; color:var(--gs-label); margin-right:3px; }
.gs-traits{ display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.gs-trait{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; background:var(--gs-tag-bg); color:var(--gs-tag-ink);
  padding:3px 7px; border-radius:3px; }
.gs-trait-hl{ background:var(--gs-accent); color:var(--gs-card); font-weight:600; }

/* ── top-line strip ── */
.gs-top-strip{ display:flex; background:var(--gs-strip);
  border-top:1px solid var(--gs-rule); border-bottom:1px solid var(--gs-rule); }
.gs-top-cell{ padding:9px 6px; text-align:center; border-right:1px solid var(--gs-rule); }
.gs-top-cell:last-child{ border-right:none; }
.gs-top-label{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gs-label); }
.gs-top-val{ font-family:var(--gs-font-display); font-size:21px; font-weight:600;
  margin-top:2px; color:var(--gs-ink); }
.gs-hp-dice{ font-size:11px; color:#9a8f80; }

/* ── pip trackers ── */
.gs-pip-row{ display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--gs-strip); border-bottom:1px solid var(--gs-rule); }
.gs-pip-label{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gs-label); min-width:46px; }
.gs-pips{ display:flex; gap:4px; flex-wrap:wrap; }
.gs-pip{ width:13px; height:13px; border-radius:2px; cursor:pointer; background:transparent;
  transition:background .12s; }
.gs-pip-stress{ border:1.5px solid var(--gs-stress); }
.gs-pip-stress.on{ background:var(--gs-stress); }

/* ── info rows ── */
.gs-info-row{ display:flex; gap:8px; font-size:12px; line-height:1.45; margin:5px 0; }
.gs-info-label{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gs-label); min-width:72px; padding-top:3px; }
.gs-info-val{ flex:1; color:var(--gs-body); }
.gs-info-val b{ font-weight:600; }
/* the "(−10 ft. armor)" note appended to Speed when a Str-requirement penalty applies (v3.006.0) */
.gs-speed-armor{ opacity:.72; font-style:italic; }

/* ── ability grid ── */
.gs-abil-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--gs-rule); border:1px solid var(--gs-rule); border-radius:5px;
  overflow:hidden; margin:11px 0 4px; }
.gs-abil-cell{ background:var(--gs-cell); padding:6px 2px; text-align:center; }
.gs-abil-abbr{ font-family:var(--gs-font-mono); font-size:8px; letter-spacing:.06em; color:var(--gs-label); }
.gs-abil-score{ font-family:var(--gs-font-display); font-size:16px; font-weight:600;
  line-height:1.1; margin-top:1px; color:var(--gs-ink); }
.gs-abil-sub{ font-size:9px; color:#8a8073; margin-top:1px; }
.gs-abil-caption{ font-family:var(--gs-font-mono); font-size:7.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gs-faint); text-align:right; margin-bottom:3px; }

/* Saving-throws row — clickable d20 save rolls under the ability grid */
.gs-saves-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 2px; }
.gs-saves-lbl{ font-family:var(--gs-font-mono,monospace); font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#9a8c6e; }
.gs-saves-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.gs-roll-save{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px;
  background:#f3ead6; border:1px solid #d9c9a6; cursor:pointer; font-size:12.5px; line-height:1;
  transition:background .12s, border-color .12s; }
.gs-roll-save:hover{ background:#ece0c2; border-color:#c9b58c; }
.gs-roll-save .gs-save-ab{ font-family:var(--gs-font-mono,monospace); font-size:9px; font-weight:700;
  letter-spacing:.06em; color:#8a7b5c; }
.gs-roll-save .gs-save-val{ font-weight:700; color:#3f382e; }

/* ── section headers ── */
.gs-sec-head{ display:flex; align-items:center; gap:10px; padding:0 18px;
  margin-top:8px; margin-bottom:5px; }
.gs-sec-label{ font-family:var(--gs-font-mono); font-size:9px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gs-accent); white-space:nowrap; }
.gs-sec-rule{ flex:1; height:1px; background:var(--gs-rule); }
.gs-expand-all{ flex:none; font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.08em;
  padding:2px 7px; border:1px solid var(--gs-card-border); border-radius:5px; background:var(--gs-cell);
  color:var(--gs-muted2); cursor:pointer; transition:all .12s; white-space:nowrap; }
.gs-expand-all:hover{ background:var(--gs-strip); color:var(--gs-ink); border-color:var(--gs-accent); }
.gs-sec-body{ padding:0 18px 4px; }

/* ── feature rows ── */
.gs-feature{ font-size:12.5px; line-height:1.5; margin:6px 0; color:var(--gs-body); }
.gs-feat-name{ font-weight:700; color:var(--gs-ink); }
.gs-atk-qual{ color:var(--gs-muted2); }
.gs-cost-glyph{ font-family:var(--gs-font-mono); color:var(--gs-accent); font-size:12px; margin-right:3px; }
.gs-feat-tag{ display:inline-block; font-family:var(--gs-font-mono); font-size:8px;
  letter-spacing:.08em; text-transform:uppercase; background:var(--gs-tag-bg); color:#8a6f5e;
  padding:2px 6px; border-radius:3px; vertical-align:middle; margin:0 2px; }

.gs-feat-tag-hl{ background:var(--gs-accent); color:var(--gs-card); }

/* attack kind pills (Melee = green, Ranged = blue) + PF attack traits */
.gs-atk-kind{ display:inline-block; font-family:var(--gs-font-mono); font-size:8px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px; vertical-align:middle; margin-right:5px; }
.gs-atk-kind-melee{ background:#e3efe0; color:#3c6e3a; border:1px solid #bcd9b4; }
.gs-atk-kind-ranged{ background:#e1ecf4; color:#2a6a9a; border:1px solid #b4cfe0; }
.gs-atk-traits{ color:var(--gs-muted2); font-style:italic; font-size:11.5px; }

/* page wrapper for the harness */
.gs-page{ background:var(--gs-page); flex:1 0 auto; padding:44px 48px 64px;
  font-family:var(--gs-font-body); }

/* (The Daggerheart damage-threshold display is now the INTERACTIVE tracker in
   src/hp-tracker.js — see the .gs-thresh-track / .gs-thresh-tier rules later in
   this file. The old static .gs-thresh-bar markup was removed.) */

/* ── conditions tracker row ──────────────────────────────────────────
   A strip of dimmed condition icons; click to mark a condition active. */

/* Per-condition token theming (one source of truth = --cond accent, set on each
   chip/tile/navchip; the glyph + disc come from condIconSVG). The disc fill and
   glyph shade are DERIVED here per page theme so a single token reads on both the
   light parchment and the dark console. Light: faint accent wash on cream, darkened
   glyph. Dark: stronger accent wash on near-black, lightened glyph. Ring = accent. */
.cond-svg{
  --ci-ring: var(--cond, #8a7a55);
  --ci-fill: color-mix(in srgb, var(--cond, #8a7a55) 20%, #f7f4ec);
  --ci-glyph: color-mix(in srgb, var(--cond, #8a7a55) 84%, #241c14);
}
body.gs-dark .cond-svg{
  --ci-fill: color-mix(in srgb, var(--cond, #8a7a55) 28%, #221c17);
  --ci-glyph: color-mix(in srgb, var(--cond, #8a7a55) 66%, #ece0ca);
}

.gs-cond-wrap{ padding:10px 16px 13px; border-top:1px solid var(--gs-rule); }
.gs-cond-head{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gs-label); margin-bottom:7px; }
/* hidden canonical state — setCardCondition() + navbar read these toggles */
.gs-cond-state{ display:none; }
/* collapsed chips row + the add button */
.gs-cond-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.gs-cond-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 3px;
  border:1px solid color-mix(in srgb, var(--cond, #8a7a55) 42%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--cond, #8a7a55) 9%, transparent); }
.gs-cond-chip-ic{ width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent; color:inherit; line-height:0; }
.gs-cond-chip-ic svg{ width:16px; height:16px; display:block; }
.gs-cond-chip-nm{ font-family:var(--gs-font-body); font-size:11px; font-weight:600; }
.gs-cond-chip-x{ width:15px; height:15px; flex:none; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:rgba(154,68,54,.15); color:#b5604f; cursor:pointer;
  font-size:11px; line-height:1; padding:0; transition:background .12s; }
.gs-cond-chip-x:hover{ background:rgba(154,68,54,.3); }
.gs-cond-add{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px 0 7px;
  border:1.5px dashed rgba(154,68,54,.5); border-radius:999px; background:transparent; color:#b5604f;
  cursor:pointer; font-family:var(--gs-font-body); font-size:11px; font-weight:600; line-height:0; transition:background .12s, border-color .12s; }
.gs-cond-add span{ line-height:1; }
.gs-cond-add:hover{ background:rgba(154,68,54,.08); border-color:rgba(154,68,54,.72); }

/* ── Conditions grid-picker modal (reuses .gsm-overlay/.gsm-box) ── */
.gs-condm-box{ width:min(392px, calc(100vw - 24px)); max-width:392px; min-width:0;
  padding:0; text-align:left; overflow:hidden; display:flex; flex-direction:column; max-height:80vh; }
.gs-condm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 17px 12px; border-bottom:1px solid var(--gs-modal-border); }
.gs-condm-eyebrow{ font-family:var(--gs-font-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--gs-modal-muted2); }
.gs-condm-title{ font-family:var(--gs-font-display); font-size:19px; font-weight:600; color:var(--gs-modal-gold); margin-top:3px; }
.gs-condm-close{ width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--gs-modal-muted); cursor:pointer; }
.gs-condm-close:hover{ background:rgba(255,255,255,.13); }
.gs-condm-search{ position:relative; display:flex; align-items:center; padding:12px 15px 6px; }
.gs-condm-search > svg{ position:absolute; left:26px; color:var(--gs-modal-muted2); }
.gs-condm-input{ width:100%; height:38px; padding:0 12px 0 33px; border:1.5px solid var(--gs-modal-border); border-radius:9px;
  background:var(--gs-modal-inset); font-family:var(--gs-font-body); font-size:13.5px; color:var(--gs-modal-ink); outline:none; }
.gs-condm-input:focus{ border-color:var(--gs-modal-accent); }
.gs-condm-body{ padding:8px 15px 4px; overflow-y:auto; }
.gs-condm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px; }
.gs-condm-tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px 10px;
  border:1.5px solid var(--gs-modal-border); border-radius:13px; background:rgba(255,255,255,.02); cursor:pointer;
  transition:background .12s, border-color .12s, transform .12s; }
.gs-condm-tile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--cond, #8a7a55) 40%, var(--gs-modal-border)); }
.gs-condm-on{ border-color:color-mix(in srgb, var(--cond, #8a7a55) 60%, transparent);
  background:color-mix(in srgb, var(--cond, #8a7a55) 12%, transparent); }
.gs-condm-check{ position:absolute; top:6px; right:6px; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--cond, #3f7a4e); color:#fbf6ec; line-height:0; box-shadow:0 0 0 2px var(--gs-modal-bg, #1d1814); }
/* the disc IS condIconSVG's token now — the container is just a transparent holder, sized up */
.gs-condm-ic{ width:50px; height:50px; flex:none; display:flex; align-items:center; justify-content:center;
  background:transparent; line-height:0; border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.10); transition:box-shadow .15s; }
body.gs-dark .gs-condm-ic{ box-shadow:0 4px 12px rgba(0,0,0,.32); }
.gs-condm-ic svg{ width:50px; height:50px; display:block; }
/* selected token: fuller accent wash + accent glow (the ring is already the accent) */
.gs-condm-on .gs-condm-ic{ box-shadow:0 0 0 3px color-mix(in srgb, var(--cond, #8a7a55) 18%, transparent), 0 6px 16px rgba(0,0,0,.22); }
.gs-condm-on .cond-svg{ --ci-fill: color-mix(in srgb, var(--cond, #8a7a55) 42%, #f7f4ec); }
body.gs-dark .gs-condm-on .cond-svg{ --ci-fill: color-mix(in srgb, var(--cond, #8a7a55) 52%, #221c17); }
/* unselected tokens read a touch quieter (softer ring) until chosen */
.gs-condm-tile:not(.gs-condm-on) .cond-svg{ --ci-ring: color-mix(in srgb, var(--cond, #8a7a55) 60%, transparent); }
.gs-condm-nm{ font-family:var(--gs-font-body); font-size:11px; font-weight:600; line-height:1.15; text-align:center; color:var(--gs-modal-muted); }
.gs-condm-on .gs-condm-nm{ color:color-mix(in srgb, var(--cond, #8a7a55) 70%, var(--gs-modal-fg, #ece2cf)); }
.gs-condm-empty{ padding:18px; text-align:center; font-size:12.5px; color:var(--gs-modal-muted2); }
.gs-condm-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px 14px; border-top:1px solid var(--gs-modal-border); }
.gs-condm-count{ font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--gs-modal-muted2); }
.gs-condm-actions{ display:flex; gap:8px; }
.gs-condm-btn{ height:32px; padding:0 16px; border-radius:8px; font-family:var(--gs-font-body); font-size:12.5px; font-weight:600; cursor:pointer; }
.gs-condm-clear{ border:1px solid var(--gs-modal-border); background:transparent; color:var(--gs-modal-muted); }
.gs-condm-clear:hover{ background:rgba(255,255,255,.05); }
.gs-condm-done{ border:none; background:#9a4436; color:#fbf1ee; }
.gs-condm-done:hover{ background:#ab5546; }

/* ── "?" expand-detail on long feature descriptions ─────────────────── */
.gs-desc-toggle{ display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:5px; padding:0; vertical-align:middle;
  font-family:var(--gs-font-mono); font-size:10px; font-weight:700; line-height:1;
  color:var(--gs-accent); background:var(--gs-tag-bg); border:1px solid #e0d3c4;
  border-radius:50%; cursor:pointer; transition:background .12s; }
.gs-desc-toggle:hover{ background:#ece0d2; }
.gs-desc-toggle[aria-expanded="true"]{ background:var(--gs-accent); color:var(--gs-card); border-color:var(--gs-accent); }

/* source attribution note on filled-in ability descriptions */
.gs-src-note{ font-size:10px; font-style:italic; color:var(--gs-faint); }

/* ── legendary action pip boxes (in the section header) ─────────────── */
.gs-sec-head-leg{ display:flex; align-items:center; gap:9px; }
.gs-leg-pips{ display:inline-flex; gap:4px; flex:none; }
.gs-leg-pip{ width:13px; height:13px; border:1.5px solid var(--gs-accent);
  border-radius:3px; background:transparent; cursor:pointer; display:inline-block;
  transition:background .12s, transform .1s; }
.gs-leg-pip:hover{ transform:scale(1.12); }
.gs-leg-pip.gs-leg-on{ background:var(--gs-accent); box-shadow:inset 0 0 0 2px var(--gs-card); }

/* ── clickable dice rolls (to-hit / damage) ────────────────────────── */
.gs-roll{ cursor:pointer; color:var(--gs-accent); font-weight:600;
  border-bottom:1px dotted var(--gs-accent); padding:0 1px; border-radius:2px;
  transition:background .12s, color .12s; }
.gs-roll:hover{ background:var(--gs-accent); color:var(--gs-card);
  border-bottom-color:transparent; }
.gs-roll:focus{ outline:2px solid var(--gs-accent); outline-offset:1px; }

/* ── dice roll modal (themed) ───────────────────────────────────────── */
.gs-roll-modal{ position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; background:rgba(36,31,27,.45);
  backdrop-filter:blur(2px); }
.gs-die{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 5px;
  font-family:var(--gs-font-display); font-size:14px; font-weight:600; color:var(--gs-ink);
  background:var(--gs-strip); border:1px solid #ddd0bb; border-radius:5px; }

/* ── weapon card ────────────────────────────────────────────────────── */
.gs-card-weapon{ }
.gs-wpn-meta{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gs-muted); margin-top:7px; }
.gs-wpn-trait{ color:var(--gs-accent); font-weight:600; }
.gs-wpn-mode{ font-size:13px; color:var(--gs-body); margin:5px 0; display:flex;
  align-items:center; gap:7px; flex-wrap:wrap; }
.gs-wpn-range{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gs-muted2); }
.gs-wpn-dtype{ font-size:11px; color:var(--gs-muted2); font-style:italic; }
.gs-wpn-traits{ display:flex; gap:5px; flex-wrap:wrap; margin:9px 0 6px; }
.gs-wpn-feature{ font-size:12px; line-height:1.5; color:var(--gs-muted2); margin-top:6px;
  padding-top:8px; border-top:1px solid var(--gs-rule); }

/* ── loot items (weapon-resolved vs plain) ─────────────────────────── */
.gs-loot-weapon{ border-bottom:1px dotted var(--gs-muted2); }
.gs-loot-weapon .gs-roll{ font-size:.92em; }

/* ── loot: shields & armor ─────────────────────────────────────────── */
.gs-loot-shield, .gs-loot-armor{ border-bottom:1px dotted var(--gs-muted2); }
.gs-loot-stat{ font-family:var(--gs-font-mono); font-size:10px; color:var(--gs-accent); }

/* ── spellcasting: resolved spells (styling consolidated in the spell-counter
   section below — gs-spell-known / gs-spell-lvl live there) ─────────────── */

/* ── Backpack section ───────────────────────────────────────────────── */
.gs-backpack{ display:flex; flex-direction:column; gap:2px; }
.gs-pack-item{ display:flex; align-items:center; gap:6px; padding:1px 0; }
.gs-pack-name{ font-size:12px; line-height:1.45; }
.gs-pack-consumable{ cursor:pointer; font-size:11px; }
.gs-pack-slot{ font-size:10px; color:var(--gs-muted2); font-family:var(--gs-font-mono);
  text-transform:uppercase; letter-spacing:.04em; }

/* ── Spellbook in backpack ──────────────────────────────────────────── */
.gs-pack-spellbook{ cursor:pointer; }
.gs-pack-icon{ font-size:12px; }
.gs-pack-count{ font-size:10px; color:var(--gs-muted2); font-family:var(--gs-font-mono); }
.gs-spellbook-list{ flex-basis:100%; margin-top:4px; padding:6px 8px; font-size:12px;
  background:var(--gs-surface2,rgba(0,0,0,.04)); border-radius:4px; line-height:1.5; }
.gs-pack-spellbook[data-open="1"] .gs-spellbook-list{ display:block; }

/* ── Equipped section ───────────────────────────────────────────────── */
.gs-equipped{ display:flex; flex-direction:column; gap:2px; }
/* fixed equipped slots with watermark placeholders */
.gs-eqs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.gs-eqs-slot{ display:flex; flex-direction:column; gap:1px; padding:6px 9px; border-radius:7px;
  background:var(--gs-cell); border:1px solid var(--gs-card-border); min-height:38px; justify-content:center; }
.gs-eqs-slot.is-empty{ background:repeating-linear-gradient(135deg, transparent, transparent 6px,
  rgba(140,120,90,.05) 6px, rgba(140,120,90,.05) 12px); border-style:dashed; }
.gs-eqs-label{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gs-label); }
.gs-eqs-name{ font-weight:600; font-size:13px; color:var(--gs-ink); }
.gs-eqs-note{ font-size:10px; color:var(--gs-muted2); font-style:italic; }
.gs-eqs-empty{ font-size:12px; color:var(--gs-faint); font-style:italic; }
.gs-equipped-item{ display:flex; align-items:center; gap:6px; }
.gs-equipped-item .gs-pack-name{ font-weight:600; }

/* ── Loot UI: live sections match the stat block; checkbox-toggle equip ── */
.gs-loot-live{ margin-top:2px; }
/* coins line at the top of the loot pile (system-aware amount, gold accent) */
.gs-loot-coins{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:2px 18px 8px; padding:5px 10px; border:1px solid var(--gs-card-border);
  border-radius:6px; background:var(--gs-cell); }
.gs-coins-label{ font-family:var(--gs-font-mono); font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gs-muted); }
.gs-coins-amt{ font-family:var(--gs-font-body); font-size:13.5px; font-weight:700; color:var(--gs-accent); }
/* gem / art objects are lootable backpack items, flagged with a small icon */
.gs-pack-valuable{ font-size:11px; opacity:.9; }
/* sub-label after a section title, e.g. "Armor Class 24" — mono, muted, like the block */
.gs-sec-sub{ font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gs-muted2); white-space:nowrap; }
/* pack rows align with a checkbox column on the left */
.gs-loot-live .gs-pack-item{ display:flex; align-items:center; gap:7px; padding:1px 0; }
.gs-equip-check{ width:13px; height:13px; margin:0; accent-color:var(--gs-accent); cursor:pointer; flex:none; }
.gs-equip-spacer{ width:13px; flex:none; }     /* keeps non-equippable rows aligned */
.gs-pack-dmg{ font-family:var(--gs-font-mono); font-size:10px; color:var(--gs-accent); }
/* armor/shields advertise their defensive value (AC / thresholds / Armor Score) — neutral
   ink so it reads as a stat, distinct from the warm damage accent. */
.gs-pack-stat{ font-family:var(--gs-font-mono); font-size:10px; color:var(--gs-muted); }
/* hands an item occupies (e.g. 2H on bows, crossbows, greatswords) — faint trailing pill. */
.gs-pack-hands{ font-family:var(--gs-font-mono); font-size:9px; color:var(--gs-faint);
  border:1px solid var(--gs-card-border); border-radius:3px; padding:0 3px; letter-spacing:.02em; }
.gs-equipped-item.gs-eq-off .gs-pack-stat, .gs-equipped-item.gs-eq-off .gs-pack-hands{ opacity:.6; }
.gs-pack-use{ font-family:var(--gs-font-mono); font-size:8.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#b5483a; background:transparent;
  border:1px solid #b5483a; border-radius:4px; padding:2px 8px; cursor:pointer; }
/* right-aligned action cluster so USE sits directly beside the give arrow (not floating) */
.gs-pack-actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.gs-pack-actions .gs-pack-use, .gs-pack-actions .gs-give-icon{ margin-left:0; }
.gs-pack-use:hover{ background:#b5483a; color:#fff; }
/* potion effects — active consumable effects (stat potions, etc.), each cancelable */
.gs-potion-row .gs-potion-eff{ font-family:var(--gs-font-mono); font-size:9.5px; font-weight:600;
  color:var(--gs-gold, #c9a44a); letter-spacing:.02em; margin-left:6px; white-space:nowrap; }
.gs-potion-cancel{ font-family:var(--gs-font-mono); font-size:10px; line-height:1; color:var(--gs-faint);
  background:transparent; border:1px solid var(--gs-card-border); border-radius:4px;
  padding:2px 6px; cursor:pointer; }
.gs-potion-cancel:hover{ background:#b5483a; color:#fff; border-color:#b5483a; }
.gs-empty{ font-size:11px; color:var(--gs-muted2); font-style:italic; padding:1px 0; }
.gs-flash{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#b5483a; color:#fff; font-size:12px; font-weight:600; text-align:center;
  padding:7px 14px; border-radius:6px; z-index:8; box-shadow:0 3px 12px rgba(0,0,0,.35);
  animation:gsFlashIn .15s ease; white-space:nowrap; }
@keyframes gsFlashIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.9); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.gs-modal-overlay{ position:fixed; inset:0; background:var(--gs-modal-overlay); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex;
  align-items:center; justify-content:center; z-index:1000; animation:gsModalBgIn .18s ease; }
.gs-modal{ background:var(--gs-modal-bg); border:1px solid var(--gs-modal-border); border-radius:16px; padding:26px 28px 24px; text-align:center;
  color:var(--gs-modal-ink); box-shadow:0 1px 0 rgba(255,240,220,.04) inset, 0 22px 54px rgba(0,0,0,.45); min-width:240px; max-width:min(400px, calc(100vw - 24px)); animation:gsModalIn .22s cubic-bezier(.2,.8,.3,1); }
.gs-scroll{ font-size:46px; }
.gs-consume-title{ font-family:var(--gs-font-display); font-weight:600; font-size:21px; margin-top:8px; color:var(--gs-modal-gold);
  position:relative; padding-bottom:11px; }
.gs-consume-title::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:38px; height:2px; background:linear-gradient(90deg,transparent,var(--gs-stress),transparent); }
.gs-consume-detail{ font-size:13px; color:var(--gs-modal-muted); margin-top:12px; }
.gs-roll-detail{ font-family:var(--gs-font-mono); font-size:12px; color:var(--gs-modal-muted); }
.gs-modal-ok,.gs-modal-cancel{ margin:18px 5px 0; height:40px; padding:0 18px; border-radius:9px; cursor:pointer;
  font-family:var(--gs-font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  transition:filter .15s,background .15s,border-color .15s; }
.gs-modal-ok{ background:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); border:none; }
.gs-modal-ok:hover{ filter:brightness(1.09); }
.gs-modal-cancel{ background:transparent; border:1px solid var(--gs-modal-border); color:var(--gs-modal-muted); }
.gs-modal-cancel:hover{ background:var(--gs-modal-inset); border-color:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }

/* ── Animated polyhedral dice (ported from v1) ──────────────────────── */
.gs-dice-tray{ display:flex; gap:8px; justify-content:center; margin:6px 0 10px; min-height:56px; align-items:center; }
.gs-die-result{ display:inline-block; }
.die-svg{ width:48px; height:48px; display:block; }
@keyframes gsDieTumble{
  0%{ transform:rotate(0) scale(1); } 25%{ transform:rotate(90deg) scale(1.08); }
  50%{ transform:rotate(180deg) scale(.96); } 75%{ transform:rotate(270deg) scale(1.08); }
  100%{ transform:rotate(360deg) scale(1); }
}
@keyframes gsDiceSettlePop{
  0%{ transform:scale(1.18) rotate(-8deg); } 60%{ transform:scale(.96) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}

/* ── Canonical shared dice animation (used by ALL rollers: dice modal,
   spell modal, quick dice panel, loot/consume) ──────────────────────
   While a die spins, its number is hidden (.gsd-spin hides .die-num).
   When it stops, .gsd-pop reveals the number with an enlarge pop. */
.gsd-spin{ animation:gsdSpin var(--gsd-dur,.34s) linear infinite; }
.gsd-spin .die-num{ opacity:0 !important; }      /* number hidden while spinning */
.gsd-pop{ animation:gsdPop .42s cubic-bezier(.34,1.7,.5,1); }
.gsd-pop .die-num{ opacity:1; }
@keyframes gsdSpin{
  0%{ transform:rotate(0) scale(1); } 25%{ transform:rotate(90deg) scale(1.07); }
  50%{ transform:rotate(180deg) scale(.95); } 75%{ transform:rotate(270deg) scale(1.07); }
  100%{ transform:rotate(360deg) scale(1); }
}
@keyframes gsdPop{
  0%{ transform:scale(1.35) rotate(-6deg); } 55%{ transform:scale(.92) rotate(2deg); }
  100%{ transform:scale(1) rotate(0); }
}
.gsd-total-pop{ animation:gsdTotalPop .42s cubic-bezier(.34,1.7,.5,1); }
@keyframes gsdTotalPop{ 0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.2);opacity:1} 100%{transform:scale(1)} }

/* ── Spell counter + spell modal (stat-block styled) ────────────────── */
.gs-spell-known{ cursor:pointer; border-bottom:1px dotted var(--gs-muted2); }
.gs-spell-known:hover{ color:var(--gs-accent); border-bottom-color:var(--gs-accent); }
/* a per-day innate spell that's been used up — struck + dimmed, but still opens for viewing (v3.008.0) */
.gs-spell-known.gs-spell-spent{ opacity:.42; text-decoration:line-through; }
.gs-spell-known.gs-spell-spent:hover{ color:inherit; border-bottom-color:var(--gs-muted2); }
.gs-spell-lvl{ font-family:var(--gs-font-mono); font-size:8px; vertical-align:super;
  color:var(--gs-muted2); margin-left:1px; }
.gs-spell-dc{ font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gs-muted2); margin-bottom:4px; }
.gs-spell-counter{ font-size:10px; color:var(--gs-accent); letter-spacing:1px; margin-right:3px; }
.gs-spell-counter .gs-pip-off{ color:var(--gs-muted2); }
.gs-spell-counter .gs-counter-lbl{ font-family:var(--gs-font-mono); font-size:7.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gs-muted2); margin-left:3px; }
.gs-atwill{ font-family:var(--gs-font-mono); font-size:8px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gs-muted2); }
/* spell modal — light parchment box, gold dice + total */
.gsm-overlay{ position:fixed; inset:0; z-index:4000; display:flex; align-items:center;
  justify-content:center; background:var(--gs-modal-overlay); backdrop-filter:blur(3px); animation:gsmFade .12s ease; }
@keyframes gsmFade{ from{opacity:0} to{opacity:1} }
.gsm-box{ background:var(--gs-modal-bg); border:1px solid var(--gs-modal-border);
  border-radius:16px; padding:24px 28px 22px; text-align:center;
  box-shadow:0 1px 0 rgba(255,240,220,.04) inset, 0 22px 54px rgba(0,0,0,.45);
  animation:gsmPop .2s cubic-bezier(.2,.8,.3,1); min-width:300px; max-width:380px;
  max-height:86vh; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--gs-stress) transparent; }
/* themed scrollbar for tall modals (spell details, long conditions) — matches the modal's
   gold-on-dark palette instead of the browser's default chrome bar. */
.gsm-box::-webkit-scrollbar{ width:10px; }
.gsm-box::-webkit-scrollbar-track{ background:transparent; margin:16px 0; }
.gsm-box::-webkit-scrollbar-thumb{ background:var(--gs-stress); border-radius:5px;
  border:2px solid transparent; background-clip:padding-box; }
.gsm-box::-webkit-scrollbar-thumb:hover{ background:var(--gs-modal-gold);
  border:2px solid transparent; background-clip:padding-box; }
@keyframes gsmPop{ 0%{transform:scale(.96);opacity:0} 100%{transform:scale(1);opacity:1} }
.gsm-title{ font-family:var(--gs-font-display); font-size:25px;
  font-weight:600; color:var(--gs-modal-gold); letter-spacing:.01em;
  position:relative; padding-bottom:11px; margin-bottom:14px; }
.gsm-title::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:38px; height:2px; background:linear-gradient(90deg,transparent,var(--gs-stress),transparent); }
.gsm-detail{ text-align:left; margin-bottom:10px; }
.gsm-row{ display:flex; align-items:baseline; gap:14px; font-size:16px; padding:9px 0;
  color:var(--gs-modal-ink); border-top:1px solid var(--gs-modal-border); }
.gsm-rk{ font-family:var(--gs-font-mono); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gs-modal-muted2); min-width:74px; flex:none; }
.gsm-rv{ flex:1; color:var(--gs-modal-ink); font-size:16px; }
.gsm-desc{ text-align:left; font-size:16px; line-height:1.6; color:var(--gs-modal-muted); margin:0;
  padding:14px 0 4px; border-top:1px solid var(--gs-modal-border); max-height:240px; overflow-y:auto; }
.gsm-flavor{ text-align:left; font-size:15.5px; line-height:1.55; font-style:italic; color:var(--gs-modal-muted); opacity:.9; margin:3px 0 2px; }
.gsm-rv-gold{ color:var(--gs-modal-gold); font-weight:600; }
.gsm-traits{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; text-align:left; }
.gsm-trait{ font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  background:var(--gs-modal-inset); color:#caa37e; border:1px solid var(--gs-modal-border); padding:4px 9px; border-radius:6px; }
.gsm-counter{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gs-modal-accent); text-align:center; margin:10px 0 6px; }
.gsm-substep{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gs-modal-label); margin:10px 0 4px; line-height:1.7; }
/* dice stage */
.gsm-stage{ min-height:0; }
.gsm-dice{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  min-height:56px; margin:6px 0 4px; }
.gsm-die{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
  filter:drop-shadow(0 2px 4px rgba(60,48,28,.25)); }
.gsm-die .die-svg{ width:64px; height:64px; display:block; }
.gsm-die.tumbling{ animation:gsmTumble .32s linear infinite; }
@keyframes gsmTumble{ 0%{transform:rotate(0) scale(1)} 25%{transform:rotate(90deg) scale(1.08)}
  50%{transform:rotate(180deg) scale(.96)} 75%{transform:rotate(270deg) scale(1.08)} 100%{transform:rotate(360deg) scale(1)} }
.gsm-die.settled{ animation:gsmSettle .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes gsmSettle{ 0%{transform:rotate(340deg) scale(1.25)} 60%{transform:rotate(0) scale(.92)} 100%{transform:rotate(0) scale(1)} }
.gsm-mod{ font-size:30px; color:var(--gs-modal-muted); margin-left:7px; font-family:var(--gs-font-display);
  font-weight:600; align-self:center; }
.gsm-total{ font-family:var(--gs-font-display); font-size:50px; font-weight:700; color:var(--gs-modal-ink);
  line-height:1; margin:6px 0 8px; text-shadow:0 2px 0 rgba(0,0,0,.25); transition:opacity .2s; }
.gsm-total.pop{ animation:gsmTotalPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes gsmTotalPop{ 0%{transform:scale(.5)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
/* actions */
.gsm-actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.gsm-btn{ font-family:var(--gs-font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  height:40px; padding:0 18px; border-radius:9px; cursor:pointer; border:1px solid var(--gs-modal-border);
  background:transparent; color:var(--gs-modal-muted); transition:background .15s,border-color .15s,filter .15s; }
.gsm-btn:hover{ background:var(--gs-modal-inset); border-color:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }
.gsm-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.gsm-cast,.gsm-hit,.gs-give-btn{ background:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); border-color:transparent; font-weight:600; }
.gsm-cast:hover,.gsm-hit:hover,.gs-give-btn:hover{ filter:brightness(1.09); background:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); }
.gsm-miss,.gsm-close{ background:transparent; }

/* ── Spellbook modal (grimoire view) ────────────────────────────────── */
.gsb-box{ max-width:440px; width:440px; max-height:80vh; display:flex; flex-direction:column; }
.gsb-count{ font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gs-modal-label); margin-bottom:12px; }
.gsb-scroll{ overflow-y:auto; text-align:left; flex:1; padding-right:6px; }
.gsb-group{ margin-bottom:14px; }
.gsb-group-label{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gs-modal-accent); border-bottom:1px solid var(--gs-modal-border); padding-bottom:3px; margin-bottom:6px; }
.gsb-spell{ padding:6px 8px; border-radius:7px; cursor:pointer; transition:background .12s; margin-bottom:2px; }
.gsb-spell:hover{ background:rgba(202,162,58,.12); }
.gsb-spell-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.gsb-spell-name{ font-family:var(--gs-font-display); font-size:17px;
  font-weight:600; color:var(--gs-modal-ink-solid); }
.gsb-meta{ font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gs-modal-label); }
.gsb-desc{ font-size:15px; line-height:1.5; color:var(--gs-modal-muted); margin-top:3px; }

/* clickable magic items in backpack */
.gs-pack-clickable{ cursor:pointer; border-bottom:1px dotted var(--gs-muted2); }
.gs-pack-clickable:hover{ color:var(--gs-accent); border-bottom-color:var(--gs-accent); }

/* ── Equipped hands/armor counter ───────────────────────────────────── */
.gs-eq-counter{ display:inline-flex; gap:6px; font-family:var(--gs-font-mono); font-size:8px;
  letter-spacing:.06em; text-transform:uppercase; margin-left:8px; }
.gs-eq-count{ color:var(--gs-muted2); }
.gs-eq-count.gs-eq-on{ color:var(--gs-accent); }
.gs-eq-count.gs-eq-full{ color:#b5483a; font-weight:600; }

/* unequipped-but-carried item in the Equipped section (dimmed) */
.gs-equipped-item.gs-eq-off .gs-pack-name{ color:var(--gs-muted2); }
.gs-equipped-item.gs-eq-off .gs-pack-slot{ opacity:.6; }

/* ── Dice-roll modal (reuses .gsm-overlay/.gsm-box; v1 animated dice) ── */
.gsm-roll-box{ min-width:280px; }
.gsm-roll-tray{ cursor:pointer; padding:4px 0 2px; }
.gsm-roll-hint{ font-family:var(--gs-font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gs-modal-muted2); margin:2px 0 4px; }
/* advantage / disadvantage on a d20 to-hit: the dropped die stays visible but struck through,
   and a three-way mode picker lets the player switch (or it opens pre-set by creature state). */
.gsm-die-dropped{ opacity:.32; filter:grayscale(.6); position:relative; }
.gsm-die-dropped::after{ content:''; position:absolute; left:14%; right:14%; top:50%; height:3px;
  background:var(--gs-modal-muted,#9a8b6e); border-radius:2px; transform:rotate(-12deg); }
.gsm-adv-reason{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gs-modal-muted2); margin:-2px 0 6px; }
.gsm-adv-row{ display:flex; gap:6px; justify-content:center; margin:8px 0 2px; }
.gsm-adv-btn{ flex:1; max-width:120px; height:30px; border:1px solid var(--gs-modal-border); border-radius:8px;
  background:transparent; color:var(--gs-modal-muted); font-family:var(--gs-font-body); font-size:11.5px; font-weight:600;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.gsm-adv-btn:hover{ background:rgba(255,255,255,.05); }
.gsm-adv-btn.is-active{ color:var(--gs-modal-ink); border-color:var(--gs-modal-muted); background:rgba(255,255,255,.07); }
.gsm-adv-adv.is-active{ color:#dff0d8; border-color:#5f8f4a; background:color-mix(in srgb,#5f8f4a 22%, transparent); }
.gsm-adv-dis.is-active{ color:#f4dcd8; border-color:#ab3f38; background:color-mix(in srgb,#ab3f38 22%, transparent); }

/* ════════════════════════════════════════════════════════════════════
   HP TRACKERS (per-system; injected by src/hp-tracker.js)
   ════════════════════════════════════════════════════════════════════ */
.gs-hp-host{ margin:2px 0 2px; }

/* ── D&D: thick bar + ± buttons (ported from v1, bar thicker) ── */
.gs-hp-bar-wrap{ height:16px; background:var(--gs-strip); border:1px solid var(--gs-card-border);
  border-radius:8px; overflow:hidden; margin-bottom:9px; }
.gs-hp-bar{ height:100%; width:100%; border-radius:8px; background:#556631;
  transition:width .3s ease, background-color .3s ease; }
.gs-hp-controls{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; }
.gs-hp-group{ display:flex; gap:3px; }
.gs-hp-btn{ padding:4px 7px; border:1px solid var(--gs-card-border); border-radius:5px;
  background:var(--gs-cell); color:var(--gs-muted); font-family:var(--gs-font-body);
  font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.gs-hp-btn:hover{ filter:brightness(.97); }
.gs-hp-sub{ color:#b0503e; border-color:#d8b0a4; }
.gs-hp-sub:hover{ background:#f7e9e4; }
.gs-hp-add{ color:#3e8a52; border-color:#a8cdb4; }
.gs-hp-add:hover{ background:#e7f2ea; }
.gs-hp-readout{ display:flex; align-items:baseline; gap:3px; font-size:16px; font-weight:700;
  color:var(--gs-ink); min-width:72px; justify-content:center; }
.gs-hp-input{ width:46px; text-align:center; background:var(--gs-card); border:1px solid var(--gs-card-border);
  border-radius:5px; color:var(--gs-ink); font-family:var(--gs-font-body); font-size:16px; font-weight:700;
  padding:2px 4px; -moz-appearance:textfield; appearance:textfield; }
.gs-hp-input::-webkit-outer-spin-button, .gs-hp-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.gs-hp-input:focus{ outline:none; border-color:var(--gs-accent); }
.gs-hp-input.gs-hp-over{ color:#556631; border-color:#a8cdb4; font-weight:800; }
.gs-hp-sep{ color:var(--gs-faint); }
.gs-hp-max{ color:var(--gs-muted); font-size:15px; }

/* ── DH: damage-threshold track (chevron tiers + number badges) ── */
.gs-thresh-track{ display:flex; align-items:stretch; gap:0; margin:4px auto 8px; max-width:380px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.gs-thresh-tier{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; padding:8px 18px 8px 22px; border:none; cursor:pointer;
  transition:filter .14s, transform .1s; text-align:center; }
.gs-thresh-tier.minor{ background:linear-gradient(180deg,#efe6d2,#e6dcc4); clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%); border-radius:7px 0 0 7px; padding-left:16px; }
.gs-thresh-tier.major{ background:linear-gradient(180deg,#f0e0bc,#e6d2a8); clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%); }
.gs-thresh-tier.severe{ background:linear-gradient(180deg,#f0d8c0,#e8c8aa); clip-path:polygon(0 0,100% 0,100% 100%,0 100%,13px 50%); border-radius:0 7px 7px 0; padding-right:16px; }
.gs-thresh-tier:hover{ filter:brightness(1.06); }
.gs-thresh-tier:active{ transform:scale(.98); }
.gs-thresh-flash{ filter:brightness(1.25) saturate(1.2); }
.gs-thresh-lbl{ font-family:var(--gs-font-display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; line-height:1.1; }
.gs-thresh-tier.minor .gs-thresh-lbl{ color:#8a7a52; }
.gs-thresh-tier.major .gs-thresh-lbl{ color:#a07818; }
.gs-thresh-tier.severe .gs-thresh-lbl{ color:#b05828; }
.gs-thresh-hp{ font-size:9px; color:#8a7858; letter-spacing:.02em; }
.gs-thresh-num{ position:relative; z-index:3; align-self:center; display:grid; place-items:center;
  width:30px; height:30px; margin:0 -17.5px 0 -4.5px;
  background:linear-gradient(180deg,#3a2e1a,#2a2012); border:1.5px solid #8a6a30; border-radius:7px;
  font-family:var(--gs-font-display); font-size:16px; font-weight:700; color:#f5d77a;
  box-shadow:0 1px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }
.gs-thresh-num>span{ display:block; line-height:1; }
/* DH HP pips under the track */
.gs-hp-pips{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:2px 0 4px; }
.gs-hp-pip{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--gs-card-border);
  background:var(--gs-cell); cursor:pointer; transition:all .12s; }
.gs-hp-pip.on{ background:#556631; border-color:#3f4e1d; }
.gs-hp-pip.on.gs-hp-mid{ background:#c69230; border-color:#9a7325; }
.gs-hp-pip.on.gs-hp-low{ background:#a8432f; border-color:#853424; }
.gs-hp-pip.on.gs-hp-over{ background:#6a8040; border-color:#4e6128; box-shadow:0 0 0 1.5px rgba(106,128,64,.45); }
.gs-hp-pip:hover{ filter:brightness(.95); }
.gs-hp-pipnote{ text-align:center; font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gs-muted); }
.gs-pf-ladder{ display:flex; flex-wrap:wrap; gap:2px; align-items:center; justify-content:center; margin-bottom:8px; }
.gs-pf-seg{ width:7px; height:14px; border-radius:2px; background:var(--gs-strip);
  border:1px solid var(--gs-card-border); cursor:pointer; transition:filter .1s; }
.gs-pf-seg.on{ border-color:transparent; }
.gs-pf-seg.gs-pf-high{ background:#3e8a52; }
.gs-pf-seg.gs-pf-mid{ background:#c69a2a; }
.gs-pf-seg.gs-pf-low{ background:#b0503e; }
.gs-pf-seg:hover{ filter:brightness(1.1); }
.gs-pf-readout{ display:flex; align-items:baseline; gap:4px; font-size:15px; font-weight:700; color:var(--gs-ink); }
.gs-pf-input{ width:44px; font-size:15px; }

/* PF controls row (precise ±1/5/10, like D&D, plus the unique ladder above) */
.gs-pf-controls{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:nowrap; margin-top:8px; }

/* ════════════════════════════════════════════════════════════════════
   SIDE PANELS — dice roller / bestiary / history (right-edge sliders)
   Light-theme styling via --gs-panel-* tokens; a dark theme overrides
   only those tokens (plus a couple of body.gs-dark rules at the end).
   ════════════════════════════════════════════════════════════════════ */
.gs-panel{
  position:fixed; top:0; right:-340px; width:340px; height:100vh; z-index:1400;
  background:var(--gs-panel-bg); border-left:1px solid var(--gs-panel-edge);
  box-shadow:none;
  transition:right .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.gs-panel.open{ right:0; box-shadow:-8px 0 28px var(--gs-panel-shadow); }
.gs-panel-dice{ width:300px; right:-300px; }
.gs-panel-inner{ display:flex; flex-direction:column; height:100%; overflow:hidden; padding:18px 16px 24px; }
.gs-panel-title{
  font-family:var(--gs-font-display); font-size:18px; font-weight:600; color:var(--gs-panel-ink);
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;
}
.gs-panel-title-actions{ display:flex; align-items:center; gap:8px; }
.gs-panel-hint{ font-size:12px; color:var(--gs-panel-muted); font-style:italic; margin-bottom:14px; }
.gs-panel-close{
  background:transparent; border:none; color:var(--gs-panel-muted); font-size:16px; line-height:1;
  cursor:pointer; padding:0 2px; transition:color .15s;
}
.gs-panel-close:hover{ color:var(--gs-panel-ink); }

/* Tabs — vertical strips on the right edge that slide with their panel */
.gs-tab{
  position:fixed; right:0; z-index:1401; cursor:pointer;
  background:var(--gs-panel-bg); border:1px solid var(--gs-panel-edge); border-right:none;
  border-radius:8px 0 0 8px; color:var(--gs-panel-accent-ink);
  box-shadow:-2px 2px 10px var(--gs-panel-shadow);
  transition:right .28s cubic-bezier(.4,0,.2,1), background .15s, color .15s, border-color .15s;
  font-family:var(--gs-font-display);
}
.gs-tab:hover{ background:var(--tab-accent); border-color:var(--tab-accent); }
.gs-tab:hover .gs-tab-icon, .gs-tab:hover .gs-tab-label{ color:var(--tab-ink); }
.gs-tab-label{ writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.06em; font-size:13px; }
.gs-tab-icon{ font-size:20px; line-height:1; }
.gs-tab-icon svg{ display:block; }
.gs-tab-settings{ top:120px; width:40px; height:48px; display:flex; align-items:center; justify-content:center; }
.gs-tab-dice{ top:182px; width:40px; height:48px; display:flex; align-items:center; justify-content:center; }
.gs-tab-history{ top:244px; width:40px; height:48px; display:flex; align-items:center; justify-content:center; }
/* Per-tab brand colour — each tab carries its own accent (icon + label) and fills
   with that accent while its panel is open, and its panel inherits the same accent
   (see the .gs-panel-* block below) so tab and drawer read as one colour. Palette:
   sage (settings) / slate (dice, "arcane/info") / moss (bestiary) / house oxblood
   (history). --tab-ink is the readable text once the tab is filled — light on every
   one of these mid-dark accents. */
  .gs-tab-settings{ --tab-accent:var(--gs-sage);   --tab-ink:#f4efe6; }
  .gs-tab-dice    { --tab-accent:var(--gs-dusk);   --tab-ink:#eef2f7; }
.gs-tab-history { --tab-accent:var(--gs-accent); --tab-ink:#f9efe9; }
  /* Panel accent flows from the tab — each side panel adopts its tab's brand colour for
     accented controls (slider thumbs, active chips, primary buttons, value text). The
     accent-ink is a darker shade for accent-coloured text on the parchment; on-accent is
     a light text for the few places that sit text on a filled accent (so it never blends). */
  .gs-panel-settings{ --gs-panel-accent:var(--gs-sage); --gs-panel-accent-ink:#3c544c; --gs-panel-on-accent:#f1f4f1; --gs-panel-accent-soft:rgba(78,107,98,.32); }
  .gs-panel-dice    { --gs-panel-accent:var(--gs-dusk); --gs-panel-accent-ink:#3a4859; --gs-panel-on-accent:#eef2f7; --gs-panel-accent-soft:rgba(76,93,114,.32); }
  .gs-panel-history { --gs-panel-accent:var(--gs-accent); --gs-panel-accent-ink:#7a3528; --gs-panel-on-accent:#f9efe9; --gs-panel-accent-soft:rgba(154,68,54,.32); }
.gs-tab .gs-tab-icon, .gs-tab .gs-tab-label{ color:var(--tab-accent, var(--gs-panel-accent-ink)); }
body.gs-panel-settings-open .gs-tab-settings,
body.gs-panel-dice-open     .gs-tab-dice,
body.gs-panel-history-open  .gs-tab-history{ background:var(--tab-accent); border-color:var(--tab-accent); }
body.gs-panel-settings-open .gs-tab-settings .gs-tab-icon,
body.gs-panel-dice-open     .gs-tab-dice     .gs-tab-icon,
body.gs-panel-history-open  .gs-tab-history  .gs-tab-icon{ color:var(--tab-ink); }
/* When a panel is open, push every tab to sit on that panel's edge so the
   tabs travel out with the panel and stay attached. */
body.gs-panel-history-open .gs-tab,
body.gs-panel-settings-open .gs-tab{ right:340px; }
body.gs-panel-dice-open .gs-tab{ right:300px; }
/* The tab whose panel is open is "in use" — drop its shadow so it reads as part of the panel;
   the other (idle) tabs keep their lift. (Shadow only over the tabs NOT in use.) */
body.gs-panel-settings-open .gs-tab-settings,
body.gs-panel-dice-open     .gs-tab-dice,
body.gs-panel-history-open  .gs-tab-history{ box-shadow:none; }
/* the settings panel content can exceed viewport height — let it scroll */
.gs-settings-inner{ overflow-y:auto; }

/* ── Dice roller ── */
/* Recolour the dice to the panel's blue-slate (matching the Dice tab) — only here; card and
   modal dice inherit nothing and keep the gold fallback baked into dieSVG(). */
.gs-panel-dice{ --gsd-body:#222d3d; --gsd-edge:#6b83a6; --gsd-num:#e6edf7; }
.gs-dicepanel-tray{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.gs-dice-die{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px;
  background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:10px;
  cursor:pointer; transition:all .14s;
}
.gs-dice-die:hover{ background:var(--gs-panel-chip-hover); border-color:var(--gs-panel-accent);
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(76,93,114,.22); }
.gs-dice-die:active{ transform:translateY(0); }
.gs-dice-die svg{ width:68px; height:68px; }
.gs-dice-label{ font-family:var(--gs-font-mono); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--gs-panel-muted); }
.gs-dice-queue-label{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gs-panel-muted); margin-bottom:8px; }
.gs-dice-queue{ display:flex; flex-wrap:wrap; gap:6px; min-height:40px; margin-bottom:14px; }
.gs-dice-empty{ font-size:12px; font-style:italic; color:var(--gs-panel-muted); }
.gs-dice-qdie{ position:relative; background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge);
  border-radius:6px; padding:4px; cursor:pointer; }
.gs-dice-qdie svg{ width:26px; height:26px; }
.gs-dice-qx{ position:absolute; top:-5px; right:-5px; background:var(--gs-accent); color:#fff;
  font-size:9px; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gs-dice-actions{ display:flex; gap:8px; margin-bottom:14px; }
.gs-dice-actions .gei-btn{ flex:1; }
/* the Roll/Clear buttons live in a light parchment panel, so override the dark
   modal button look with the panel palette + gold primary. */
.gs-panel-dice .gei-btn{ background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); color:var(--gs-panel-muted); }
.gs-panel-dice .gei-btn:hover{ background:var(--gs-panel-chip-hover); border-color:var(--gs-panel-accent); color:var(--gs-panel-accent-ink); }
.gs-panel-dice .gei-btn-primary{ background:var(--gs-panel-accent); border-color:var(--gs-panel-accent); color:var(--gs-panel-on-accent); }
.gs-panel-dice .gei-btn-primary:hover{ filter:brightness(1.06); background:var(--gs-panel-accent); color:var(--gs-panel-on-accent); }
.gs-panel-dice .gei-btn-ghost{ background:transparent; border-color:transparent; }
.gs-dice-result{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.gs-dice-result-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.gs-dice-result-die svg{ width:84px; height:84px; }
.gs-dice-total{ font-family:var(--gs-font-display); font-size:22px; color:var(--gs-panel-accent-ink);
  transition:opacity .2s; }
.gs-total-pop{ animation:gsTotalPop .3s ease; }
@keyframes gsTotalPop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }

/* ── History ── */
.gs-hist-clear{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; padding:5px 11px; cursor:pointer; transition:all .14s;
  background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:7px; color:var(--gs-panel-muted); }
.gs-hist-clear:hover{ background:var(--gs-panel-chip-hover); border-color:var(--gs-panel-accent); color:var(--gs-panel-accent-ink); }
.gs-hist-list{ flex:1; overflow-y:auto; padding-right:4px; }
.gs-hist-empty{ font-size:12px; font-style:italic; color:var(--gs-panel-muted); padding:8px; }
.gs-hist-entry{ display:flex; gap:9px; padding:8px 4px; border-bottom:1px solid var(--gs-panel-edge); }
.gs-hist-icon{ font-size:15px; line-height:1.3; flex-shrink:0; }
.gs-hist-body{ flex:1; min-width:0; }
.gs-hist-line{ font-size:13px; color:var(--gs-panel-ink); line-height:1.4; }
.gs-hist-who{ font-weight:600; color:var(--gs-panel-accent-ink); }
.gs-hist-extra{ font-family:var(--gs-font-mono); font-size:11px; color:var(--gs-panel-muted); }
.gs-hist-time{ font-family:var(--gs-font-mono); font-size:10px; color:var(--gs-panel-muted); margin-top:2px; }

/* ════════════════════════════════════════════════════════════════════
   PER-CARD ACTIONS · DEAD/UNCONSCIOUS STATE · LOOT TRANSFER
   ════════════════════════════════════════════════════════════════════ */
/* action bar at card bottom (Reset · Duplicate · Delete) */
/* Per-card action footer (Reset · Duplicate · Delete). v1 style: a padded bar
   with its own background + a top separator, set off from the card body rather
   than buttons sitting flush at the very edge. Uses our parchment palette. */
.gs-card-actions{ display:flex; gap:7px; padding:11px 14px 13px; margin-top:auto;
  background:var(--gs-card-foot,#f3ece0); border-top:1px solid var(--gs-card-foot-edge,#e0d5c0);
  border-radius:0 0 6px 6px; }
.gs-cardact{ flex:1; padding:8px 6px; font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.04em;
  border:1px solid transparent; border-radius:7px; cursor:pointer; transition:all .12s;
  position:relative; z-index:6; font-weight:600; }
/* filled, tinted backgrounds (v1 arrangement, light-theme colors) */
/* Quiet, warm action buttons that sit in the parchment footer. Brand: one primary per
   surface, everything else quiet — so these are soft tan ghosts (not the old cool pastels),
   differentiated by accent text (moss = restore, neutral = duplicate, oxblood = destructive)
   and a single warm hover. Destructive borrows the brand's clay/oxblood, not a jarring red. */
.gs-cardact-reset{ background:#ece4d4; border-color:#d7c9b1; color:#5f6a44; }
.gs-cardact-reset:hover{ background:#dcd8cb; border-color:#c3b69d; }
.gs-cardact-dup{ background:#ece4d4; border-color:#d7c9b1; color:#6b5b41; }
.gs-cardact-dup:hover{ background:#dcd8cb; border-color:#c3b69d; }
.gs-cardact-del{ background:#eadcd4; border-color:#d6bdb1; color:#9a4436; }
.gs-cardact-del:hover{ background:#9a4436; border-color:#9a4436; color:#fff; }
/* dark theme: the footer floor + its three ghost buttons were hard-coded light, so they
   stayed pale on a darkened card. Darken the footer and re-tint the buttons to match. */
body.gs-dark .gs-card-actions{ background:#1f1a12; border-top-color:#332c1e; }
body.gs-dark .gs-cardact-reset{ background:#2a2417; border-color:#3a3120; color:#9db06a; }
body.gs-dark .gs-cardact-reset:hover{ background:#332b1b; border-color:#4a3d24; }
body.gs-dark .gs-cardact-dup{ background:#2a2417; border-color:#3a3120; color:#c9ba95; }
body.gs-dark .gs-cardact-dup:hover{ background:#332b1b; border-color:#4a3d24; }
body.gs-dark .gs-cardact-del{ background:#2e211c; border-color:#4a3228; color:#e0917f; }
body.gs-dark .gs-cardact-del:hover{ background:#9a4436; border-color:#9a4436; color:#fff; }

/* unconscious button beside HP controls */
.gs-unconscious-btn{ font-size:13px; }
.gs-unconscious-btn.is-on{ background:#caa23a; border-color:#b8902c; }
/* the slot that holds the unconscious button, left of the −10 (D&D/PF) or the
   HP pips (DH). Empty slot collapses to nothing. */
.gs-unconscious-slot{ display:inline-flex; align-items:center; }
.gs-unconscious-slot:empty{ display:none; }
/* DH HP row: the unconscious (😴) button takes its own space at the FAR LEFT (it
   collapses to nothing when absent), and the −1 / pips / +1 centre within the room
   that remains — so the −1 button can never slide underneath the 😴, and the pips
   wrap onto a second line when a high-HP creature has more pips than fit on one. */
.gs-dh-hp-row{ display:flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; }
.gs-dh-hp-row .gs-unconscious-slot{ flex:none; }
.gs-dh-hp-row .gs-unconscious-btn{ font-size:15px; padding:5px 8px; }
.gs-dh-hp-mid{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
.gs-dh-hp-mid .gs-hp-btn{ flex:none; }                                        /* −1 / +1 never shrink or move */
.gs-dh-hp-mid .gs-hp-pips{ flex:0 1 auto; min-width:0; margin:0; padding:0; }  /* pips shrink + wrap when tight */
/* HP pips + PF segments are now a display-only readout */
.gs-hp-pip, .gs-pf-seg{ cursor:default; }

/* dead / unconscious card state */
.gs-card.gs-dead, .gs-card.gs-unconscious{ position:relative; }
.gs-card.gs-dead .gs-card-header{ filter:grayscale(.6) brightness(.85); }
.gs-card.gs-dead .gs-name, .gs-card.gs-unconscious .gs-name{ text-decoration:line-through; opacity:.8; }
.gs-card.gs-dead .gs-given, .gs-card.gs-unconscious .gs-given{ text-decoration:line-through; opacity:.75; }
.gs-state-badge{ margin-left:8px; font-size:18px; vertical-align:middle; }
/* the dim overlay covers the card body; equipped/loot float above it */
.gs-state-overlay{ position:absolute; inset:0; z-index:6; border-radius:inherit; display:flex;
  overflow-y:auto; padding:12px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.gs-state-overlay.gs-state-dead{ background:rgba(30,22,16,.62); }
.gs-state-overlay.gs-state-unconscious{ background:rgba(40,40,70,.50); }
.gs-state-center{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:6px; margin:auto; max-width:100%; }
.gs-state-big{ font-size:46px; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.gs-state-word{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#fbf1ec; font-weight:700; }
.gs-wake-btn{ font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.06em;
  padding:9px 16px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.18); color:#fbf1ec; font-weight:600; transition:background .12s, transform .1s; }
.gs-wake-btn:hover{ background:rgba(255,255,255,.3); transform:translateY(-1px); }

/* inline "Lootable Items" panel on the downed overlay — a modal-dark surface so the
   gs-downed rows read clearly over the translucent overlay */
.gs-loot-panel{ width:100%; max-width:320px; text-align:left; margin-top:2px;
  background:var(--gs-modal-bg2); border:1px solid var(--gs-modal-border); border-radius:12px; padding:11px 13px; }
.gs-loot-panel-head{ font-family:var(--gs-font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gs-modal-muted); margin-bottom:8px; }

/* downed-creature loot rows (shown inline on the overlay) — no scroll, show all */
.gs-downed-list{ display:flex; flex-direction:column; gap:5px; }
.gs-downed-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--gs-modal-border);
  border-radius:7px; background:var(--gs-modal-bg); }
.gs-downed-where{ font-family:var(--gs-font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gs-modal-muted); min-width:58px; }
.gs-downed-name{ flex:1; font-family:var(--gs-font-body); font-size:14px; color:var(--gs-modal-ink-solid); }
.gs-downed-empty{ font-size:13px; font-style:italic; color:var(--gs-modal-muted); margin-bottom:14px; text-align:center; }
.gs-downed-row.is-fixed{ opacity:.6; }
.gs-downed-fixed{ font-size:14px; color:var(--gs-modal-muted); flex:none; padding:3px 7px; }

/* give icon on a living creature's loot rows (light card) */
.gs-give-icon{ margin-left:auto; flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--gs-card-border); border-radius:7px; background:var(--gs-cell); color:var(--gs-accent);
  cursor:pointer; opacity:.85; transition:background .12s,border-color .12s,opacity .12s; }
.gs-give-icon:hover{ background:var(--gs-strip); border-color:var(--gs-accent); opacity:1; }
.gs-card.gs-dead .gs-give-icon, .gs-card.gs-unconscious .gs-give-icon{ display:none; }
.gs-arrow-ico{ display:block; }

/* steal/take icon — bordered arrow box in the (dark) downed modal */
.gs-steal-btn{ flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--gs-modal-border); border-radius:8px; background:var(--gs-modal-inset);
  color:var(--gs-modal-gold); cursor:pointer; transition:background .12s,border-color .12s; }
.gs-steal-btn:hover{ background:var(--gs-modal-inset-hover); border-color:var(--gs-stress); }

/* Revive action + modal */
.gs-revive-btn{ font-family:var(--gs-font-mono); font-size:8.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#4e8b3f; background:transparent; border:1px solid #4e8b3f;
  border-radius:4px; padding:2px 8px; cursor:pointer; margin-left:6px; vertical-align:middle;
  transition:background .12s, color .12s; animation:gs-revive-attn 1.2s ease-out 0s 3; }
.gs-revive-btn:hover{ background:#4e8b3f; color:#fff; }
/* one-time green glow ripple so the action catches the eye when an ally goes down */
@keyframes gs-revive-attn{ 0%{ box-shadow:0 0 0 0 rgba(78,139,63,.55); }
  70%{ box-shadow:0 0 0 7px rgba(78,139,63,0); } 100%{ box-shadow:0 0 0 0 rgba(78,139,63,0); } }
.gs-revive-modal{ min-width:300px; max-width:380px; }
.gs-revive-head, .gs-xfer-head, .gs-confirm-title{ font-family:var(--gs-font-display); font-size:20px; font-weight:600;
  color:var(--gs-modal-gold); text-align:center; position:relative; padding-bottom:11px; margin-bottom:16px; }
.gs-revive-head::after, .gs-xfer-head::after, .gs-confirm-title::after{ content:''; position:absolute; left:50%; bottom:0;
  transform:translateX(-50%); width:38px; height:2px; background:linear-gradient(90deg,transparent,var(--gs-stress),transparent); }
.gs-revive-list{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; margin-bottom:14px; }
.gs-revive-yes{ background:#6a9a4a; border-color:#5a8a3a; color:#fff; }
.gs-revive-yes:hover{ background:#5a8a3a; }

/* give button in the item modal */
.gs-give-btn{ background:var(--gs-modal-accent)!important; color:var(--gs-modal-accent-ink)!important;
  border-color:var(--gs-modal-accent)!important; }

/* transfer / steal recipient picker */
.gs-xfer-modal{ min-width:300px; max-width:380px; }
.gs-xfer-list{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; margin-bottom:14px; }
.gs-xfer-target{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--gs-modal-border);
  border-radius:7px; background:var(--gs-modal-bg); cursor:pointer; font-family:var(--gs-font-body); font-size:14px;
  color:var(--gs-modal-ink-solid); transition:background .12s; text-align:left; }
.gs-xfer-target:hover{ background:var(--gs-panel-chip-hover); border-color:var(--gs-modal-accent); }
.gs-xfer-target.is-down{ background:rgba(60,48,34,.12); color:var(--gs-modal-muted); }
.gs-xfer-target.is-down:hover{ background:rgba(60,48,34,.2); }
.gs-xfer-name{ flex:1; }
.gs-xfer-tag{ font-size:14px; }
.gs-xfer-empty{ font-size:13px; font-style:italic; color:var(--gs-modal-muted); margin-bottom:14px; }

/* transfer narration toast */
.gs-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gs-modal-bg2); color:var(--gs-modal-ink-solid); border:1px solid var(--gs-modal-border);
  border-radius:10px; padding:12px 20px; font-family:var(--gs-font-body); font-size:14px; max-width:420px;
  box-shadow:0 8px 28px var(--gs-panel-shadow); z-index:6000; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; text-align:center; }
.gs-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

body.gs-dark .gs-state-overlay.gs-state-dead{ background:rgba(0,0,0,.68); }

/* delete confirmation modal */
.gs-confirm-modal{ min-width:300px; max-width:380px; text-align:center; }
.gs-confirm-msg{ font-size:13.5px; color:var(--gs-modal-muted); line-height:1.5; margin-bottom:18px; }
.gs-confirm-del{ background:var(--gs-modal-accent); border-color:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); }
.gs-confirm-del:hover{ filter:brightness(1.09); }

/* ── Site footer — thin dark band matching the Tavernwright/Shoppekeep footers: brand + version +
   links on the left, concise attribution on the right. App-only; z-index:1 keeps it above the fixed
   #gsBgLayer background, flex:0 0 auto pins it to the bottom of the flex-column body (sticky footer). */
.site-footer{ flex:0 0 auto; background:#161310; color:#8f836c; position:relative; z-index:1; }
.site-footer .sf-inner{ max-width:1180px; margin:0 auto; padding:8px 18px; display:flex; flex-wrap:wrap;
  gap:6px 14px; align-items:center; justify-content:space-between; }
.site-footer .sf-brand{ display:flex; align-items:center; gap:9px; }
.site-footer .sf-badge{ width:22px; height:22px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(150deg,#a4502c,#7d3a20); border-radius:6px; }
/* Name over the version — beta drops to a small line beneath the wordmark. */
.site-footer .sf-title{ display:flex; flex-direction:column; line-height:1.15; }
/* Wordmark matches the top bar exactly: "Grimshackle" in the display serif, "Battlesmith"
   in spaced uppercase mono — the same fonts and colours as .gs-brand in app-shell.css. */
.site-footer .sf-name{ display:flex; align-items:baseline; gap:7px; }
.site-footer .sf-name b{ font:700 17px var(--gs-font-display); color:#f1e7d4; }
.site-footer .sf-name .sf-app{ font:600 9px var(--gs-font-mono); letter-spacing:.2em; text-transform:uppercase; color:#b2a482; }
.site-footer .sf-ver{ font:600 9px var(--gs-font-mono); letter-spacing:.08em; color:#9a7b43; margin-top:2px; }
.site-footer .sf-links{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.site-footer .sf-link{ font:600 12px var(--gs-font-body); color:#8f836c; text-decoration:none; }
.site-footer .sf-link:hover{ color:#cdbfa6; }

/* ── random left-anchored background image (see src/backgrounds.js) ───────
   A fixed, full-viewport layer above the page's base color but below content.
   The IMAGE and its curved mask are set DIRECTLY on #gsBgLayer by JS (so the
   image URL resolves relative to the page, not this stylesheet). A ::before
   underlay paints the solid page-color floor so the faded area reads as the
   page color and body text stays readable. */
#gsBgLayer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--gs-bg-floor,#ece7dd);   /* solid page-color floor (fade target) */
}
#gsBgLayer::after{
  content:""; position:absolute; inset:0;
  background-image:var(--gs-bg-image);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:auto 100%;   /* as tall as the viewport; full image, no top/bottom crop */
  -webkit-mask-image:var(--gs-bg-mask);
          mask-image:var(--gs-bg-mask);
}
/* base page color lives on body so there's always a backdrop even before the
   image layer paints; the layer sits above it, content sits above the layer */
body{ background:var(--gs-page,#ece7dd); }
.gs-page{ background:transparent; position:relative; z-index:1; }

/* ── temporary stat adjustment (hover overlay) ─────────────────────────────
   Up arrow above a source number, down arrow below; a reset chip to the right
   appears only once a stat is adjusted. Numbers turn green above their base,
   red below — applied to the adjusted stat AND every value it cascades to.
   Deltas live in per-card state (see assets/stat-adjust.js). */
:root{ --gs-buff:#5f8a3f; --gs-debuff:#c0392b; --gs-adj-arrow:#b8860b; }
body.gs-dark{ --gs-buff:#7fb05a; --gs-debuff:#e06a5c; --gs-adj-arrow:#d8b24a; }
.gs-adj{ position:relative; display:inline-block; cursor:pointer; transform-origin:center center; transition:transform .16s ease; }
/* hover affordance: the number grows and STAYS larger while hovered, settling back
   when you move off — transform only, so nothing reflows (no big-then-small bounce) */
.gs-adj:hover{ transform:scale(1.2); }
.gs-adj.gs-adj-open:hover{ transform:none; }
/* green above base, red below — on source + derived numbers and the popover value */
.gs-adj-up{ color:var(--gs-buff) !important; }
.gs-adj-down{ color:var(--gs-debuff) !important; }
/* the adjuster popover: zooms up from the number (overlay, so the grid never reflows) */
.gs-adj-pop{ position:fixed; z-index:6000; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:11px 14px; background:var(--gs-cell); border:1px solid var(--gs-card-border); border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transform-origin:center center; opacity:0; transform:scale(.26);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.08), opacity .15s ease-out; }
.gs-adj-pop.gs-adj-pop-show{ opacity:1; transform:scale(1); }
.gs-adj-pop[hidden]{ display:none; }
.gs-adj-pop-label{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gs-label); }
.gs-adj-pop-row{ display:flex; align-items:center; gap:16px; }
.gs-adj-pop-btn{ width:46px; height:46px; flex:none; border-radius:50%; border:1px solid var(--gs-card-border);
  background:var(--gs-page); color:var(--gs-accent); font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .1s, background .1s, border-color .1s, color .1s; }
.gs-adj-pop-btn:hover{ background:var(--gs-accent); color:#fff; border-color:var(--gs-accent); transform:translateY(-1px); }
.gs-adj-pop-btn:active{ transform:translateY(0); }
.gs-adj-pop-val{ min-width:54px; text-align:center; font-family:var(--gs-font-display); font-size:30px; font-weight:700; color:var(--gs-ink); }
.gs-adj-pop-reset{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:0; color:var(--gs-label); cursor:pointer; padding:2px 6px; }
.gs-adj-pop-reset:hover{ color:var(--gs-accent); }
/* one-time "tap a stat to adjust" tip — small callout that points at the stats, shown once per device */
.gs-adj-tip{ position:fixed; z-index:6100; max-width:230px; padding:9px 14px; text-align:center;
  background:var(--gs-accent); color:#fff; border-radius:11px; box-shadow:0 10px 28px rgba(0,0,0,.45);
  font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.05em; cursor:pointer;
  opacity:0; transform:translateY(5px) scale(.96); transition:opacity .22s ease, transform .22s ease; }
.gs-adj-tip.gs-adj-tip-show{ opacity:1; transform:translateY(0) scale(1); }
.gs-adj-tip::after{ content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--gs-accent); }
.gs-adj-tip.gs-adj-tip-below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--gs-accent); }