/* Grimshackle — modals & overlays: encounter modal, shared dark modal buttons,
   dataset-loading modal, entry ("choose a system") screen, random-encounter modal. */
  /* encounter modal */
  .gei-modal-overlay{ position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
    background:var(--gs-modal-overlay); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:gsModalBgIn .18s ease; }
  .gei-modal-overlay[hidden]{ display:none; }
  .gei-modal{ background:var(--gs-modal-bg); border:1px solid var(--gs-modal-border); border-radius:16px; padding:26px 26px; min-width:320px;
    color:var(--gs-modal-ink); box-shadow:0 28px 80px rgba(0,0,0,.55); animation:gsModalIn .22s cubic-bezier(.2,.8,.3,1); }
  .gei-modal-title{ font-family:var(--gs-font-display); font-size:20px; font-weight:600; color:var(--gs-modal-ink); margin-bottom:16px; }
  .gei-modal-body{ font-family:var(--gs-font-body); font-size:14px; line-height:1.5; color:var(--gs-modal-ink); opacity:.85; margin:-6px 0 4px; }
  .gei-modal-actions{ display:flex; gap:10px; margin-top:18px; }
  .gei-modal-actions .gei-btn{ flex:1; }
  /* modal action buttons (dark, unified) — base .gei-btn used by encounter +
     dice modals. The Option B input bar uses .geib-btn (separate). */
  .gei-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 16px;
    font-family:var(--gs-font-mono); font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    border:1px solid var(--gs-modal-border); border-radius:9px; background:var(--gs-modal-inset);
    color:var(--gs-modal-muted); cursor:pointer; transition:all .14s; }
  .gei-btn:hover{ background:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }
  .gei-btn-primary{ background:var(--gs-modal-accent); border-color:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); }
  .gei-btn-primary:hover{ filter:brightness(1.08); background:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); }
  .gei-btn-ghost{ background:transparent; border-color:transparent; }
  .gei-btn-ghost:hover{ background:var(--gs-modal-inset); }
  @keyframes gsModalBgIn{ from{opacity:0} to{opacity:1} }
  @keyframes gsModalIn{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }

  /* ── Dataset loading modal (reuses the dark modal look; shown while a system's
     data lazy-loads). z-index sits above the encounter modal so it covers it. ── */
  .gs-load-overlay{ position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center;
    background:var(--gs-modal-overlay); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:gsModalBgIn .18s ease; }
  .gs-load-overlay[hidden]{ display:none; }
  .gs-load-card{ display:flex; flex-direction:column; align-items:center; gap:14px; background:var(--gs-modal-bg);
    border:1px solid var(--gs-modal-border); border-radius:16px; padding:30px 40px; min-width:260px;
    box-shadow:0 28px 80px rgba(0,0,0,.55); animation:gsModalIn .22s cubic-bezier(.2,.8,.3,1); }
  .gs-load-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--gs-modal-inset);
    border-top-color:var(--gs-modal-accent); animation:gsLoadSpin .8s linear infinite; }
  .gs-load-title{ font-family:var(--gs-font-display); font-size:17px; font-weight:600; color:var(--gs-modal-ink); text-align:center; }
  .gs-load-sub{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gs-modal-muted2); margin-top:-4px; }
  @keyframes gsLoadSpin{ to{ transform:rotate(360deg) } }

  /* ── Entry screen ("choose your system") — shown on first load, before any
     system data is fetched. Backdrop is a placeholder gradient; to use art later,
     swap the .gs-entry-overlay background for url('assets/...') center/cover. The
     scrim keeps the text legible over either. ── */
  .gs-entry-overlay{ position:fixed; inset:0; z-index:5500; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(120% 90% at 50% 16%, #2c2118 0%, #18120d 55%, #0d0a07 100%);
    animation:gsModalBgIn .3s ease; }
  .gs-entry-overlay[hidden]{ display:none; }
  .gs-entry-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.62)); }
  .gs-entry-inner{ position:relative; text-align:center; padding:40px 24px; max-width:760px; }
  .gs-entry-crest{ display:block; margin:0 auto; width:auto; height:auto;
    max-width:min(500px,82vw); max-height:46vh; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); }
  .gs-entry-tagline{ font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color:#cdbb92; margin:16px 0 36px; }
  .gs-entry-systems{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:520px; margin:0 auto; }
  .gs-entry-sys{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:24px 26px;
    background:rgba(32,26,19,.66); border:1px solid rgba(202,162,58,.32); border-radius:14px; cursor:pointer;
    color:#f3e8cb; transition:transform .16s, background .16s, border-color .16s; }
  .gs-entry-sys:hover{ background:rgba(202,162,58,.16); border-color:#caa23a; transform:translateY(-3px); }
  .gs-entry-sys-name{ font-family:var(--gs-font-display); font-size:19px; font-weight:600; }
  .gs-entry-sys-sub{ font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#b9a36e; }
  .gs-entry-err{ margin-top:22px; min-height:16px; font-family:var(--gs-font-mono); font-size:11px; color:#e8a08f; }
  /* No error text → contribute no height, so the setup system panel isn't padded out by an empty status line. */
  .gs-entry-err:empty{ display:none; margin-top:0; min-height:0; }

  /* ── Random Encounter modal (dark, unified) ── */
  .enc-modal{ min-width:360px; max-width:430px; }
  .enc-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .enc-close{ background:var(--gs-modal-inset); border:none; width:30px; height:30px; border-radius:8px; font-size:16px;
    color:var(--gs-modal-muted); cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
  .enc-close:hover{ background:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }
  .enc-field{ margin-bottom:16px; }
  .enc-field-label{ display:block; font-family:var(--gs-font-mono); font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gs-modal-muted2); margin-bottom:8px; }
  .enc-select{ width:100%; font-family:var(--gs-font-body); font-size:14px; padding:10px 12px;
    border:1px solid var(--gs-modal-border); border-radius:8px; background:var(--gs-modal-inset); color:var(--gs-modal-ink); }
  .enc-field-row{ display:flex; gap:18px; }
  .enc-field-row .enc-field{ flex:1; }
  /* chip grids: sized to fit their full range so they never scroll. Players is 1-8
     (4 rows of 2); levels run to 25 in PF (5 rows of 5) — both fit without overflow. */
  .enc-chip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:5px; }
  .enc-chip-grid-level{ grid-template-columns:repeat(5,1fr); }
  .enc-chip{ min-width:0; display:flex; align-items:center; justify-content:center; padding:7px 4px;
    border:1px solid var(--gs-modal-border); border-radius:6px;
    background:var(--gs-modal-inset); color:var(--gs-modal-muted); font-family:var(--gs-font-mono); font-size:13px; cursor:pointer;
    transition:all .12s; }
  .enc-chip:hover{ background:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }
  .enc-chip.is-on{ background:var(--gs-modal-accent); border-color:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); font-weight:700; }
  .enc-diff-row{ display:flex; gap:8px; }
  .enc-diff-btn{ flex:1; padding:10px; border:1px solid var(--gs-modal-border); border-radius:8px; background:var(--gs-modal-inset);
    color:var(--gs-modal-muted); font-family:var(--gs-font-mono); font-size:12px; letter-spacing:.05em; cursor:pointer;
    transition:all .12s; }
  .enc-diff-btn:hover{ background:var(--gs-modal-inset-hover); color:var(--gs-modal-ink); }
  .enc-diff-btn.is-on{ background:var(--gs-modal-accent); border-color:var(--gs-modal-accent); color:var(--gs-modal-accent-ink); font-weight:700; }