/* Grimshackle — app chrome & theming: top menu bar, Display Settings panel,
   DH Official/Converted toggle, dark theme, text-size scaling. */

  /* ═══ Setup ↔ Battle mode ══════════════════════════════════════════ */
  body[data-mode="battle"] #gsSetup,
  body[data-mode="battle"] #gsBuilderHost{ display:none; }   /* Flow T5 re-shows the host as the Summon overlay */
  /* Setup page (hero + system chooser + builder), over the rotating #gsBgLayer */
  .gs-setup{ max-width:1240px; margin:0 auto; padding:20px 20px 2px; position:relative; z-index:1; }
  .gs-setup-hero{ text-align:center; padding:8px 0 2px; }
  .gs-setup-emblem{ display:block; margin:0 auto; max-width:min(320px,54vw); height:auto; filter:drop-shadow(0 8px 22px rgba(0,0,0,.3)); }
  .gs-setup-tag{ font-family:var(--gs-font-display); font-style:italic; font-size:1.2rem; color:#f3ead9; margin:.5rem 0 0; text-shadow:0 1px 5px rgba(18,12,6,.6); }
  /* No cream slab — the chooser floats bare on the hero art. Buttons are dark glass so they read
     on the rotating background; the active system fills solid rust. */
  .gs-setup-syspanel{ background:none; border:none; padding:0; margin:8px auto 14px; max-width:760px; text-align:center; box-shadow:none; }
  .gs-setup-syslabel{ display:block; font:600 .7rem/1 var(--gs-font-mono); letter-spacing:.16em; text-transform:uppercase; color:#f0e6d4; opacity:.82; margin-bottom:9px; text-shadow:0 1px 4px rgba(12,8,4,.6); }
  .gs-setup-systems{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
  .gs-sysbtn{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:9px 18px; border-radius:10px; border:1px solid rgba(228,210,180,.30); background:rgba(26,20,14,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); cursor:pointer; font-family:var(--gs-font-body); color:#f2e9d8; box-shadow:0 3px 12px rgba(10,6,3,.28); transition:background .12s,border-color .12s,color .12s,box-shadow .12s; }
  .gs-sysbtn:hover{ border-color:#caa24b; background:rgba(40,30,20,.64); }
  .gs-sysbtn b{ font-size:.94rem; font-weight:600; }
  .gs-sysbtn span{ font-size:.7rem; color:#d9cab1; opacity:.72; }
  .gs-sysbtn.is-on{ background:#7a3b23; border-color:#a0552f; color:#fff; box-shadow:0 5px 16px rgba(10,6,3,.42); }
  .gs-sysbtn.is-on span{ color:#f4d9c6; opacity:.9; }
  .gs-builder-host{ max-width:1240px; margin:0 auto; padding:0 20px 60px; position:relative; z-index:1; }
  /* Summon More Foes: float the builder over the dimmed Warboard (battle mode). */
  /* Darken the board BEHIND the summon overlay by filtering the frame itself (not a full-screen
     scrim — a scrim sits in a different stacking context and would paint over the overlay boxes). */
  body[data-mode="battle"].gs-summon-open #bbFrame,
  body[data-mode="battle"].gs-summon-open #cards{ filter:brightness(.4) saturate(.82); transition:filter .16s ease; }
  body[data-mode="battle"].gs-summon-open #gsBuilderHost{ display:block; position:fixed; z-index:41; left:50%; top:50%; transform:translate(-50%,-50%); max-height:84vh; width:min(1240px,96vw); overflow:auto; margin:0; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; }

  /* Main header contents differ by mode. Battle: brand · view toggle · Smith a New Battle · ☰.
     Setup: only the ☰ tools, tucked top-right (the emblem is the branding). */
  .gs-topbar-btn{ align-self:center; font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:7px 13px; border-radius:8px; border:1px solid #4a3a22; background:#2a2013; color:#e9dcc0; cursor:pointer; white-space:nowrap; }
  .gs-topbar-btn:hover{ background:#3a2c18; color:#f4e8cf; }
  .gs-topbar #bbViewTog{ align-self:center; }
  body[data-mode="setup"] .gs-topbar{ position:absolute; top:0; right:0; left:auto; width:auto; background:transparent; border-bottom:0; height:auto; padding:6px 8px; z-index:1001; }
  body[data-mode="setup"] .gs-topbar .gs-brand,
  body[data-mode="setup"] .gs-topbar #bbViewTog,
  body[data-mode="setup"] .gs-topbar #gsSmithNew,
  body[data-mode="setup"] .gs-topbar .gs-topbar-spacer{ display:none; }

  /* ── Thin top menu bar ──────────────────────────────────────────── */
  .gs-topbar{ position:sticky; top:0; z-index:1000; display:flex; align-items:stretch; gap:2px;
    background:#1a140c; border-bottom:1px solid #3a2c18; padding:0 8px; height:50px; }
  .gs-nav-item{ display:flex; align-items:center; padding:0 18px; font-family:var(--gs-font-mono);
    font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#c9b896; text-decoration:none;
    background:transparent; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s, border-color .15s, background .15s; }
  .gs-nav-item:hover{ color:#f0e3c4; background:rgba(202,162,58,.08); }
  .gs-nav-item.is-active{ color:#e9c75a; border-bottom-color:#caa23a; }
  /* The single current-system label (not a button — switch via ⊞ Systems) */
  .gs-nav-current{ cursor:default; }
  .gs-nav-current:hover{ background:transparent; color:#e9c75a; }
  .gs-topbar-spacer{ flex:1; }
  /* Left-side brand — matches the Tavernwright header: "Grimshackle" + app name */
  .gs-brand{ align-self:center; display:flex; align-items:center; gap:7px; padding-left:8px; }
  .gs-brand .gs-brand-mark{ display:block; width:20px; height:20px; flex:0 0 auto; }
  .gs-brand b{ font:700 17px var(--gs-font-display); color:#f1e7d4; }
  .gs-brand span{ font:600 9px var(--gs-font-mono); letter-spacing:.2em; text-transform:uppercase; color:#b2a482; }
  /* Top-nav hamburger + its Settings/History dropdown.
     On desktop the wrapper is transparent (display:contents) so Home / Systems /
     the system label flow into the bar exactly as before; the hamburger (far right)
     drops a small Settings + History menu. app-mobile.css collapses the whole
     wrapper into one dropdown below 600px (nav links · divider · the same tools). */
  .gs-nav-menu{ display:contents; }
  .gs-nav-sep{ display:none; }                          /* divider only shows in the mobile dropdown */
  .gs-nav-burger{ display:flex; align-items:center; justify-content:center; align-self:center; width:38px; height:38px;
    margin-left:6px; background:none; border:none; color:#cdbfa6; cursor:pointer; border-radius:8px; transition:color .15s, background .15s; }
  .gs-nav-burger:hover{ background:rgba(202,162,58,.1); color:#f0e3c4; }
  .gs-nav-burger[aria-expanded="true"]{ background:rgba(202,162,58,.14); color:#f0e3c4; }
  /* Settings / History dropdown, anchored under the hamburger (the sticky bar is the
     positioning context). Hidden until the burger toggles .open on the menu wrapper. */
  .gs-nav-tools{ display:none; position:absolute; top:calc(100% + 4px); right:8px; flex-direction:column; align-items:stretch;
    min-width:186px; background:#1c1710; border:1px solid #3a3120; border-radius:11px; padding:6px; gap:2px;
    box-shadow:0 14px 30px rgba(0,0,0,.5); z-index:1200; }
  .gs-nav-menu.open .gs-nav-tools{ display:flex; animation:gsNavIn .14s ease both; }
  .gs-nav-tools .gs-nav-item{ justify-content:flex-start; padding:11px 13px; border-radius:8px; border-bottom:none; font-size:11px; }
  .gs-nav-tools .gs-nav-item:hover{ background:rgba(202,162,58,.12); color:#f0e3c4; }
  @keyframes gsNavIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  /* ── Display Settings panel (right-side, parchment like the other panels) ── */
  .gs-drawer-group{ margin-bottom:22px; }
  .gs-drawer-label{ font-family:var(--gs-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gs-panel-muted); margin-bottom:10px; }
  .gs-drawer-select{ width:100%; font-family:var(--gs-font-body); font-size:14px; padding:11px 13px;
    background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:8px; color:var(--gs-panel-ink); }
  .gs-range-val{ float:right; font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.04em;
    color:var(--gs-panel-accent); text-transform:none; }
  .gs-drawer-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:2px 0;
    background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:6px; cursor:pointer; outline:none; }
  .gs-drawer-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
    background:var(--gs-panel-accent); border:2px solid var(--gs-panel-bg); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:transform .12s; }
  .gs-drawer-range::-webkit-slider-thumb:hover{ transform:scale(1.12); }
  .gs-drawer-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--gs-panel-accent-soft, rgba(198,146,48,.35)); }
  .gs-drawer-range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--gs-panel-accent);
    border:2px solid var(--gs-panel-bg); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); }
  .gs-drawer-range::-moz-range-track{ height:6px; background:var(--gs-panel-chip); border-radius:6px; }
  /* ── Loot Rate Knobs accordion (Settings) — collapsed power-user dials under Loot Abundance ── */
  .gs-knobs-group{ border-top:1px solid var(--gs-panel-edge); padding-top:18px; }
  .gs-knobs-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
    background:transparent; border:none; padding:0; cursor:pointer; }
  .gs-knobs-toggle .gs-drawer-label{ margin:0; cursor:pointer; transition:color .15s; }
  .gs-knobs-toggle:hover .gs-drawer-label{ color:var(--gs-panel-ink); }
  .gs-knobs-caret{ font-size:11px; color:var(--gs-panel-accent); transition:transform .18s; }
  .gs-knobs-toggle.is-open .gs-knobs-caret{ transform:rotate(90deg); }
  .gs-knobs-list{ display:flex; flex-direction:column; gap:13px; margin:12px 0 14px; }
  .gs-knob-row{ display:flex; flex-direction:column; gap:5px; }
  .gs-knob-head{ display:flex; align-items:baseline; justify-content:space-between; }
  .gs-knob-name{ font-family:var(--gs-font-body); font-size:13px; color:var(--gs-panel-ink); }
  .gs-knob-sub{ font-family:var(--gs-font-body); font-size:11px; line-height:1.35; color:var(--gs-panel-muted); margin:-1px 0 1px; }
  .gs-knob-val{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.04em; color:var(--gs-panel-accent); }
  .gs-knob-range{ height:5px; margin:0; }
  .gs-knobs-reset{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    background:transparent; border:1px solid var(--gs-panel-edge); border-radius:7px; color:var(--gs-panel-muted);
    padding:7px 12px; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
  .gs-knobs-reset:hover{ color:var(--gs-panel-ink); border-color:var(--gs-panel-accent); background:var(--gs-panel-chip-hover); }
  .gs-size-row{ display:flex; gap:8px; }
  .gs-size-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 4px 9px;
    background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:8px; color:var(--gs-panel-muted); cursor:pointer;
    font-family:var(--gs-font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; transition:all .15s; }
  .gs-size-btn .gs-size-a{ font-family:var(--gs-font-display); color:var(--gs-panel-ink); line-height:1; }
  .gs-size-btn:hover{ border-color:var(--gs-panel-accent); background:var(--gs-panel-chip-hover); }
  .gs-size-btn.is-on{ background:var(--gs-panel-accent); border-color:var(--gs-panel-accent); color:var(--gs-panel-on-accent); }
  .gs-size-btn.is-on .gs-size-a{ color:#2a2113; }
  .gs-setting-toggle{ display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; }
  .gs-setting-text{ display:flex; flex-direction:column; gap:3px; }
  .gs-setting-name{ font-family:var(--gs-font-body); font-size:14px; font-weight:600; color:var(--gs-panel-ink); }
  .gs-setting-icon{ color:var(--gs-panel-accent); }
  .gs-setting-sub{ font-family:var(--gs-font-body); font-size:11.5px; color:var(--gs-panel-muted); }
  .gs-switch{ position:relative; flex:none; }
  .gs-switch input{ position:absolute; opacity:0; width:0; height:0; }
  .gs-switch-track{ display:block; width:44px; height:24px; background:var(--gs-panel-edge); border-radius:14px; transition:background .18s; position:relative; }
  .gs-switch-track::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; transition:transform .18s, background .18s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .gs-switch input:checked + .gs-switch-track{ background:var(--gs-panel-accent); }
  .gs-switch input:checked + .gs-switch-track::after{ transform:translateX(20px); background:#fff; }
  .gs-theme-row{ display:flex; gap:8px; }
  .gs-theme-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px;
    background:var(--gs-panel-chip); border:1px solid var(--gs-panel-edge); border-radius:8px; color:var(--gs-panel-muted); cursor:pointer;
    font-family:var(--gs-font-mono); font-size:11px; letter-spacing:.06em; transition:all .15s; }
  .gs-theme-btn:hover{ border-color:var(--gs-panel-accent); background:var(--gs-panel-chip-hover); }
  .gs-theme-btn.is-on{ background:var(--gs-panel-accent); border-color:var(--gs-panel-accent); color:var(--gs-panel-on-accent); }

  /* ── DH Official / Converted toggle (in the header) ─────────────── */
  .gs-head-titlewrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
  .gs-dh-toggle{ display:inline-flex; border:1px solid #cdbfa2; border-radius:8px; overflow:hidden; }
  .gs-dh-toggle[hidden]{ display:none; }
  .gs-dh-opt{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
    padding:8px 14px; background:#f6efe0; color:#7a6438; border:none; cursor:pointer; transition:background .15s; }
  .gs-dh-opt + .gs-dh-opt{ border-left:1px solid #cdbfa2; }
  .gs-dh-opt:hover{ background:#ece0c8; }
  .gs-dh-opt.is-on{ background:#caa23a; color:#2a2113; font-weight:600; }

  /* ── Dark theme — v1 palette, applied by overriding the CSS variables so every
        card element inherits it. The system-colored headers sit on top unchanged. ── */
  body.gs-dark{ background:#14110b; }
  body.gs-dark .gs-head-title{ color:#f0e6d0; }
  body.gs-dark .gs-head-sub{ color:#8a7e6a; }
  body.gs-dark .gs-page{ color:#e8dcc2; }
  body.gs-dark{
    --gs-page:#14110b;
    --gs-card:#242019;
    --gs-card-border:#3a3428;
    --gs-ink:#f0e6d0;
    --gs-body:#cabfa8;
    --gs-muted:#8a7e6a;
    --gs-muted2:#7a6e5e;
    --gs-label:#8d8171;
    --gs-faint:#6a6052;
    --gs-rule:#3a3428;
    --gs-strip:#2a261d;
    --gs-cell:#2a261d;
    --gs-tag-bg:#332d22;
    --gs-tag-ink:#b6a988;
    /* side-panel + modal tokens — provisional dark values (light theme is the
       one being finalized now; these keep the structure clean so the dark pass
       later is just token tuning, no structural CSS changes). */
    --gs-panel-bg:#1c1810;
    --gs-panel-edge:#3f3525;
    --gs-panel-ink:#ecdfc4;
    --gs-panel-muted:#8a7d68;
    --gs-panel-accent:#caa23a;
    --gs-panel-accent-ink:#e8c860;
    --gs-panel-chip:#262015;
    --gs-panel-chip-hover:#332a1a;
    --gs-panel-shadow:rgba(0,0,0,.5);
    --gs-modal-bg:#262015;
    --gs-modal-bg2:#1a150d;
    --gs-modal-border:#4a3a1e;
    --gs-modal-ink:#d8c8a8;
    --gs-modal-ink-solid:#ecdfc4;
    --gs-modal-muted:#b6a988;
    --gs-modal-label:#b09860;
    --gs-modal-accent:#caa23a;
    --gs-modal-accent-ink:#1a140c;
    --gs-modal-gold:#f5d060;
    --gs-modal-overlay:rgba(0,0,0,.55);
  }
  /* input + buttons in dark */
  body.gs-dark #geiInput{ background:#1a160e; border-color:#4a3f2a; color:#ecdfc4; }
  body.gs-dark .gei-ac{ background:#241a0f; border-color:#4a3f2a; }
  body.gs-dark .gei-ac-item{ color:#e0d4ba; }
  body.gs-dark .gei-ac-item:hover, body.gs-dark .gei-ac-item.gei-sel{ background:#33260f; }
  body.gs-dark .gs-dh-opt{ background:#241a0f; color:#c9b896; }
  body.gs-dark .gs-dh-opt.is-on{ background:#caa23a; color:#2a2113; }
  /* (gei-modal + gei-btn are now dark for all themes — no override needed) */

  /* ── Text-size scaling: zoom the WHOLE app so every element scales
        proportionally (menu, input, headers, cards — AND the fixed-position
        overlays: modals, side panels, sticky roster — which live outside
        .gs-page and so need the zoom applied directly). ── */
  body[data-size="small"]  .gs-page,
  body[data-size="small"]  .gs-topbar,
  body[data-size="small"]  .gei-modal-overlay,
  body[data-size="small"]  .gsm-overlay,
  body[data-size="small"]  .gs-panel{ zoom:0.90; }
  body[data-size="medium"] .gs-page,
  body[data-size="medium"] .gs-topbar,
  body[data-size="medium"] .gei-modal-overlay,
  body[data-size="medium"] .gsm-overlay,
  body[data-size="medium"] .gs-panel{ zoom:1; }
  body[data-size="large"]  .gs-page,
  body[data-size="large"]  .gs-topbar,
  body[data-size="large"]  .gei-modal-overlay,
  body[data-size="large"]  .gsm-overlay,
  body[data-size="large"]  .gs-panel{ zoom:1.12; }
  body[data-size="xlarge"] .gs-page,
  body[data-size="xlarge"] .gs-topbar,
  body[data-size="xlarge"] .gei-modal-overlay,
  body[data-size="xlarge"] .gsm-overlay,
  body[data-size="xlarge"] .gs-panel{ zoom:1.26; }

  /* ── Mobile layout (≤600px) ─────────────────────────────────────────
     Keep everything inside the viewport — no horizontal scroll, which was the
     "doesn't add up on mobile" bug. Same palette / type / components per the brand;
     the chrome just compacts. The stat card itself stays responsive via its own
     max-width:100% (see .gs-card), so only the app shell needs handling here. */
  @media (max-width:600px){
    /* Top bar: drop the two centring spacers and let the system switcher scroll
       sideways within the bar instead of pushing the whole page wider. */
    .gs-topbar{ overflow-x:auto; overflow-y:hidden; padding:0 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .gs-topbar::-webkit-scrollbar{ display:none; }
    .gs-topbar-spacer{ display:none; }
    .gs-nav-item{ flex:0 0 auto; padding:0 12px; white-space:nowrap; }
    /* Tighter page gutters + card spacing. */
    .gs-page{ padding:0 12px; }
    .gs-grid{ gap:18px; }
    /* Entry screen: stack the system cards one-per-row, ease the hero. */
    .gs-entry-inner{ padding:32px 16px; }
    .gs-entry-tagline{ letter-spacing:.1em; margin:14px 0 26px; }
    .gs-entry-systems{ grid-template-columns:1fr; max-width:340px; }
    .gs-entry-sys{ min-width:0; width:100%; }
    /* Roster input at 16px so mobile browsers don't zoom in on focus (brand rule). */
    .geib-ta, #geiInput{ font-size:16px; }
  }