/* Character Gallery (gallery.js) — the Library's browsing view. Closer to the
   front door's spacious treatment than the Workshop: dark green panels, gold
   hairlines, Georgia for names and prose, system type for small labels. */

.gallery { color: var(--on-wood); }
.g-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 64px; }
.g-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: #d4b57b; font: 11px/1.6 system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
}
.g-eyebrow svg { width: 14px; height: 14px; }
.gallery h1 { margin: 6px 0 10px; font: 400 clamp(32px, 4vw, 50px)/1.05 var(--serif); letter-spacing: -.02em; }
.gallery h1:focus { outline: none; }
.g-intro { margin: 0; max-width: 620px; color: #b4c1b5; font: 16px/1.6 var(--serif); }
.g-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.g-tally { margin: 0; color: var(--on-wood-soft); font: 12px system-ui, sans-serif; letter-spacing: .06em; }

/* ── Filters ────────────────────────────────────────────────────────────── */
.g-filters {
  display: grid; gap: 10px; margin: 24px 0 26px; padding: 16px 18px;
  border: 1px solid var(--gold-line); background: rgba(16,40,36,.75);
}
.g-search { display: flex; flex-direction: column; gap: 5px; max-width: 460px; }
.g-search span { font: 11px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #c6d0c1; }
.g-search input {
  padding: 10px 12px; border: 1px solid rgba(155,167,142,.45); border-radius: 0;
  background: #091c18; color: #f2ead7; font: 15px var(--narrow);
}
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; min-height: 30px;
  border: 1px solid rgba(193,164,109,.32); background: transparent; color: #d9d2bf;
  font: 600 13px var(--narrow);
}
.g-chip svg { width: 14px; height: 14px; color: var(--brass-hi); }
.g-chip .pips i { box-shadow: inset 0 0 0 1px rgba(220,186,125,.55); }
.g-chip .pips i.on { background: var(--brass-hi); }
.g-chip:hover { border-color: var(--brass-hi); color: var(--brass-pale); }
.g-chip[aria-pressed="true"] { background: var(--brass-hi); border-color: var(--brass-hi); color: #142820; }
.g-chip[aria-pressed="true"] svg { color: #142820; }
.g-chip[aria-pressed="true"] .pips i { box-shadow: inset 0 0 0 1px #3a3524; }
.g-chip[aria-pressed="true"] .pips i.on { background: #142820; }

/* ── Index cards ────────────────────────────────────────────────────────── */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.g-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid rgba(193,164,109,.26); background: #102824;
  transition: border-color .15s, transform .15s, background .15s;
}
.g-card:hover { border-color: var(--brass-hi); background: #17332c; transform: translateY(-2px); }
.g-card:focus-visible { outline: 3px solid #f2c67a; outline-offset: 3px; }
.g-art { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1e3c34, #0b1d1a 75%); }
.g-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.g-art-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: #8fa196; font: 11px system-ui, sans-serif; letter-spacing: .08em; }
.g-art-none .medal { box-shadow: 0 0 0 1px rgba(193,164,109,.35); }
.g-card-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 13px; }
.g-loc { display: inline-flex; align-items: center; gap: 5px; color: #c9ab72; font: 10px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.g-loc svg { width: 12px; height: 12px; }
.g-name { font: 400 19px/1.15 var(--serif); color: #f3ecdc; }
.g-ab { font: 600 13px var(--narrow); color: #b8c3b5; }
.g-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 12px var(--narrow); color: var(--on-wood-soft); }
.g-meta .pips i { box-shadow: inset 0 0 0 1px rgba(220,186,125,.5); }
.g-meta .pips i.on { background: var(--brass-hi); }
.g-flag {
  align-self: flex-start; margin-top: 6px; padding: 2px 8px;
  border: 1px solid #a85a5f; color: var(--oxblood-lit); background: rgba(120,58,62,.25);
  font: 700 10.5px system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.g-card.unplayable .g-art img { filter: grayscale(.55) brightness(.8); }
.g-empty { color: var(--on-wood-soft); font: 15px var(--serif); }

/* ── One character ──────────────────────────────────────────────────────── */
.g-crumbs { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 22px; font: 13px system-ui, sans-serif; }
.g-crumbs a { color: #dcba7d; }
.g-back { text-decoration: none; }
.g-back:hover, .g-step a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-step { display: flex; gap: 18px; margin-left: auto; }
.g-step a { color: #b4c1b5; text-decoration: none; }
.g-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px;
  border: 1px solid rgba(186,161,109,.5); background: #18322c; color: #f5ead3; text-decoration: none;
  font: 13px/1.4 system-ui, sans-serif; letter-spacing: .03em; cursor: pointer;
}
.g-crumbs a.g-button { color: #f5ead3; }
.g-button:hover { background: #2c473b; border-color: #e2bc7d; }
.g-button.primary { background: #dcba7d; border-color: #dcba7d; color: #142820; }
.g-button.primary:hover { background: #f0d49e; }

.g-sheet { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: 44px; align-items: start; }
.g-portrait { position: sticky; top: 20px; margin: 0; }
.g-portrait img { display: block; width: 100%; height: auto; border: 1px solid rgba(193,164,109,.4); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.g-portrait .g-art-none.large { aspect-ratio: 2 / 3; border: 1px dashed rgba(193,164,109,.35); background: radial-gradient(circle at 50% 38%, #1e3c34, #0b1d1a 75%); }
.g-portrait figcaption { margin-top: 9px; color: #9daea3; font: 11px system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* Card-style figures replace numeric profile stats (Greg, 2026-10-22). */
.g-profile-stat-strip { display:grid;grid-template-columns:repeat(var(--stat-count),minmax(0,1fr));gap:10px;margin:0 0 22px;padding:16px 0 20px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line); }
.g-profile-stat { display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;color:#eadfc4; }
.g-profile-stat .ic-dsvg { width:68px;height:68px;background:#302d29;padding:5px;border-radius:3px; }
.g-profile-stat strong { font:600 13px system-ui; }
.g-profile-stat span { font:600 16px Georgia; }
.g-profile-stat small { font:12px/1.35 Georgia;min-height:32px;overflow-wrap:anywhere; }
.g-profile-stat .ic-dcentre { fill:#eadfc4; }
.g-profile-stat .ic-dnone .ic-dcentre { opacity:.45; }
.g-profile-stat .ic-d-orange { fill:#e08a3a; }
.g-profile-stat .ic-d-blue { fill:#5a8fc8; }
.g-profile-stat .ic-d-green { fill:#5aa85a; }
.g-profile-stat .ic-d-red { fill:#d0655a; }
.g-profile-stat .ic-dglobal { fill-opacity:.3;stroke:#5a8fc8; }
.g-info { container-type:inline-size; }
@container (max-width:520px) {
  .g-profile-stat-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-profile-stat-strip.has-many { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.g-info { min-width: 0; max-width: 720px; }
.g-status { display: inline-block; margin: 0 0 18px; padding: 3px 10px; font: 700 11px system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.g-status.on { color: var(--verdigris-lit); border: 1px solid var(--verdigris); background: rgba(79,113,104,.2); }
.g-status.off { color: var(--oxblood-lit); border: 1px solid #a85a5f; background: rgba(120,58,62,.25); }
.g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 20px; border-top: 1px solid var(--gold-line); }
.g-stats div { padding: 9px 0 8px; border-bottom: 1px solid var(--gold-line); }
.g-stats dt { color: #9daea3; font: 10.5px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.g-stats dd { margin: 2px 0 0; font: 400 16px/1.2 var(--serif); color: #f3ecdc; font-variant-numeric: tabular-nums; }
.g-stats dd .pips i { box-shadow: inset 0 0 0 1px rgba(220,186,125,.5); }
.g-stats dd .pips i.on { background: var(--brass-hi); }

.g-use-wrap { margin-bottom: 26px; }
.g-use { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid rgba(220,186,125,.5); background: rgba(220,186,125,.07); }
.g-use span { color: #c9d1c4; font: 13px/1.5 system-ui, sans-serif; }
.g-use-note { margin: 0; padding: 12px 14px; border-left: 2px solid var(--gold-line); color: #b4c1b5; font: 13.5px/1.55 system-ui, sans-serif; }
.g-use-note b { color: var(--oxblood-lit); }

.g-block { padding: 20px 0 6px; border-top: 1px solid var(--gold-line); }
.g-block h2 { margin: 0 0 10px; color: #d4b57b; font: 11px/1.6 system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.g-block h3 { margin: 0 0 6px; font: 400 21px/1.25 var(--serif); color: #f3ecdc; }
.g-block p { margin: 0 0 12px; color: #dcd6c6; font: 16px/1.62 var(--serif); }
.g-block blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--brass-hi); color: #f0d9aa; font: italic 19px/1.5 var(--serif); }
.g-block .g-source, .g-muted { color: #94a59a; font: 12.5px/1.6 system-ui, sans-serif; }
.g-rel { margin: 0; display: grid; gap: 14px; }
.g-rel dt { color: #9daea3; font: 10.5px system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.g-rel dd { margin: 0; font: 16px/1.55 var(--serif); color: #dcd6c6; }
.g-rel dd small { display: block; color: #94a59a; font: 12px system-ui, sans-serif; margin-top: 2px; }
.g-rel ul { margin: 0; padding-left: 18px; }

@media (max-width: 860px) {
  .g-sheet { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .g-portrait { position: static; max-width: 420px; }
  .g-step { margin-left: 0; }
}
@media (max-width: 560px) {
  .g-shell { width: calc(100% - 32px); padding-top: 20px; }
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .g-name { font-size: 17px; }
  .g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-filters { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .g-card { transition: none; } .g-card:hover { transform: none; } }