/* Siralim Ultimate Companion — mobile-first, palette in :root.
   House conventions: overlay-driven, statically-sized panels, scroll never
   resets, sprite-dominant tiles, data-driven trait colours. */

:root {
  /* ── SU identity: deep indigo menus, brass/gold ornate borders, parchment ── */
  --bg:        #150e26;
  --bg2:       #1a1230;
  --surface:   #221844;
  --surface2:  #2c2056;
  --surface3:  #372a68;
  --border:    #c9a24b;   /* brass/gold */
  --border-dim:#6d5a2e;
  --text:      #efe6d0;   /* parchment */
  --text-dim:  #b3a488;
  --text-mute: #7d7358;
  --accent:    #c9a24b;
  --accent2:   #9a7bd6;   /* arcane violet */
  --good:      #5bd674;
  --bad:       #e06b6b;
  --cap:       #ffd24a;

  /* class accents (also used as trait-association colours) */
  --cls-Nature:  #588F17;
  --cls-Chaos:   #8F0202;
  --cls-Sorcery: #8747CD;
  --cls-Death:   #3E3E69;
  --cls-Life:    #F2A908;

  --radius: 10px;
  --gap: 10px;
  --tile: 108px;
  --shadow: 0 6px 20px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }

/* a broken/missing sprite must be UNMISSABLE — no silent blanks (fail loudly) */
img.sprite-missing {
  visibility: visible !important;
  min-width: 16px; min-height: 16px;
  outline: 2px solid #ff2d2d;
  background: repeating-linear-gradient(45deg, #ff2d2d33, #ff2d2d33 3px, transparent 3px, transparent 6px);
}
html, body { margin: 0; padding: 0; overscroll-behavior: none; height: 100%; }   /* no rubber-band bounce / pull-to-refresh */
body {
  background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), var(--bg)) fixed;
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  /* fixed-height shell: the app scrolls INSIDE #app, the page itself never scrolls, so the
     mobile URL bar has no page-scroll to react to and stays put (no expand/contract jitter) */
  height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
  -webkit-text-size-adjust: 100%;
}
img { image-rendering: pixelated; }    /* crisp pixel-art sprites */
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }

/* slim themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-dim) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 6px; }

/* ── top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40; flex-shrink: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 12px;
  background: linear-gradient(#241a48, #1c1338);
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* title (left, left-aligned) and nav buttons (right) share one vertically-centred row; the title is
   free to wrap onto multiple lines (buttons stay to its right) instead of being clipped or bumped down */
.topbar-title { flex: 1 1 auto; min-width: 0; }
.topbar-title h1 { font-size: clamp(14px, 2.6vw, 18px); letter-spacing: .3px; color: var(--text);
  text-align: left; line-height: 1.15; }
/* each phrase is its own non-breaking unit, so the title stays on one line when it fits and otherwise
   breaks ONLY between them → "Siralim Ultimate" / "Companion" (never mid-phrase) */
.topbar-title h1 span { display: inline-block; white-space: nowrap; }
.topbar-title h1 .tt-sub { color: var(--accent); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.tb-btn {
  background: var(--surface2); color: var(--text); border: 1px solid var(--border-dim);
  border-radius: 8px; padding: 5px 10px; font-size: 13px;
}
@media (hover: hover) { .tb-btn:hover { border-color: var(--border); background: var(--surface3); } }
.tb-danger { border-color: #6b2f2f; }
.tb-danger.armed { background: var(--bad); color: #1a1230; border-color: var(--bad); }
/* header Menu dropdown */
.menu-wrap { position: relative; }
.menu-btn .chev { font-size: 10px; opacity: .8; margin-left: 2px; }
.menu-dropdown {
  /* actions sit on the right of the bar, so anchor the dropdown's right edge to the button
     and open leftward — anchoring left:0 would spill it off the right side of the viewport */
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 168px;
  max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; padding: 5px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
}
.menu-dropdown.hidden { display: none; }
.menu-item {
  text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  background: transparent; border: 0; color: var(--text);
}
@media (hover: hover) { .menu-item:hover { background: var(--surface3); } }
.menu-item.danger { color: var(--bad); }
.menu-item.armed { background: var(--bad); color: #1a1230; }
.menu-sep { height: 1px; background: var(--border-dim); margin: 4px 6px; }

/* ── party (build-first home) ───────────────────────────────────────────── */
.planning-main { padding: 14px; max-width: 1500px; margin: 0 auto; width: 100%;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
.section-label {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-mute); margin: 4px 2px 8px;
}
.apx-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-mute); margin: 10px 0 8px; padding: 4px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--border-dim);
  font-family: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .apx-sec-head:hover { color: var(--text); } }
/* Appendix browse: expandable CATEGORY rows styled as bars that pop (accent rail + chevron), not the
   flat uppercase section-label look — matches the old opt-row bars the user preferred */
.apx-sec-head.apx-cat { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-dim); border-left: 3px solid var(--accent2);
  border-radius: 7px; padding: 9px 12px; margin: 0 0 6px; }
@media (hover: hover) { .apx-sec-head.apx-cat:hover { border-color: var(--accent2); background: var(--surface2); } }
.apx-sec-head.apx-cat .apx-sec-caret { color: var(--accent2); opacity: 1; }
.apx-sec-head .apx-sec-caret { flex: 0 0 auto; font-size: 11px; opacity: .6; }
.apx-sec-head .apx-sec-n { margin-left: auto; font-weight: 800; color: var(--cap); }
/* Appendix browse: sub-category value rows with a result-count, nested under a category header */
.apx-vals { margin: 0 0 8px 12px; }
.opt-row .apx-val-n { margin-left: auto; font-weight: 800; color: var(--cap); font-size: 12px; }
/* bookmark-scope chips in the Appendix filter bar */
.apx-bkbar { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.facet.bk { background: rgba(201,162,75,.12); }
.facet.bk.on { color: var(--text); border-color: var(--cap); background: rgba(201,162,75,.22); }
.facet .facet-n { font-weight: 800; opacity: .8; }
.party-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) { .party-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .party-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.player-row { margin-bottom: 16px; }

/* ── slot card ──────────────────────────────────────────────────────────── */
.slot {
  position: relative;
  background: linear-gradient(var(--surface), var(--bg2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; min-height: 190px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s, box-shadow .12s;
}
.slot.slot-player { background: linear-gradient(#241a48, var(--bg2)); }
/* Pariah-locked party slots: empty ones can't be filled; filled ones are dimmed + flagged "Ignored" */
.slot.locked { border-style: dashed; }
.slot.locked.filled { opacity: .5; }
.slot.locked .slot-empty-icon { opacity: .5; }
.slot-ignored { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--bad); background: rgba(0,0,0,.5); border: 1px solid var(--bad); border-radius: 4px; padding: 1px 6px; }

/* class + race emblem badges, top-left of the tile */
.tile-badges {
  position: absolute; top: 5px; left: 6px; z-index: 2;
  display: flex; gap: 3px; pointer-events: none;
}
.tile-badge {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
.tile-badge img { width: 100%; height: 100%; object-fit: contain; }
/* artifact + relic badges: clickable (open the equip flow); grid tiles stack them under the ✕ */
.tile-badge.gear { pointer-events: auto; cursor: pointer; border-radius: 4px; }
@media (hover: hover) { .tile-badge.gear:hover { background: rgba(154,123,214,.22); } }
.tile-badge.gear img { image-rendering: pixelated; }
/* grid tiles: class over race stacked top-left, artifact over relic stacked top-right under the ✕ */
/* both stacks start at the same height (below the ✕ row) so the two sides mirror each other */
.slot .tile-badges { flex-direction: column; top: 26px; }
.tile-badges.gear-badges { left: auto; right: 5px; }

.slot-sprite-wrap {
  width: 100%; aspect-ratio: 1;             /* uniform frame for mixed-size rips */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(154,123,214,.12), transparent 70%);
  border-radius: 8px; cursor: pointer; overflow: hidden;
}
.slot-sprite-wrap img { width: 78%; height: 78%; object-fit: contain; }  /* sprite dominates */
.slot-empty-icon {
  width: 46%; height: 46%; opacity: .35;
  display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--accent2);
}
/* fallback face when the extract has no battle sprite: class-tinted monogram */
.crit-face {
  width: 72%; height: 72%; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 6vw, 34px); font-weight: 800; color: var(--text);
  background: color-mix(in srgb, var(--face-cls, var(--surface3)) 34%, var(--bg2));
  border: 1px solid var(--face-cls, var(--border-dim));
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pt-sprite .crit-face { width: 82%; height: 82%; }
.slot-name {
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-sub { font-size: 11px; color: var(--text-dim); text-align: center; }
.slot-sub .cls-chip { font-weight: 700; }

.slot-actions { display: flex; gap: 4px; margin-top: auto; }
.slot-mini {
  flex: 1; font-size: 11px; padding: 5px 4px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border-dim); color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-mini.on { color: var(--text); border-color: var(--border); }
@media (hover: hover) { .slot-mini:hover { border-color: var(--border); color: var(--text); } }
.slot-mini.armed { border-color: var(--cap); color: var(--cap); box-shadow: inset 0 0 0 1px var(--cap); }        /* tap again to confirm */
.slot-mini.danger.armed { background: var(--bad); color: #1a1230; border-color: var(--bad); box-shadow: none; }
.slot-remove {
  position: absolute; top: 4px; right: 5px; z-index: 3;
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; padding: 0;
  background: transparent; border: 0; color: var(--text-mute);
  font-size: 12px; display: none; align-items: center; justify-content: center;
  opacity: .4; transition: opacity .12s, color .12s;
}
.slot.filled .slot-remove { display: flex; }         /* visible on touch, not hover-only */
@media (hover: hover) { .slot-remove:hover { opacity: 1; color: var(--bad); } }
.slot-remove.armed { opacity: 1; background: var(--bad); color: #1a1230; }

/* mini stat readout under the party */
.party-summary { margin-top: 16px; }

/* ── party layout toggle (Grid / Roster) — lives at the bottom of the header Menu ── */
.menu-section-label {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-mute); padding: 2px 10px 6px;
}
.menu-layout-seg { margin: 0 6px 4px; align-self: stretch; }
.menu-layout-seg .seg-btn { flex: 1 1 0; text-align: center; }

/* ── party ROSTER (at-a-glance): sprites stacked in a column, traits to the right,
      every row sharing one bordered container ───────────────────────────────── */
.party-roster {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--bg2));
  overflow: hidden;
}
.roster-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 12px; position: relative;
}
.roster-row + .roster-row { border-top: 1px solid var(--border-dim); }
@media (hover: hover) { .roster-row.filled:hover { background: rgba(154,123,214,.05); } }
.roster-row.locked { opacity: .55; }

.roster-identity {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* class over race stacked LEFT of the sprite; artifact over relic stacked RIGHT (sprite stays centred) */
.roster-sprite-row { position: relative; }
.roster-identity .roster-badges { position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 4px; flex-direction: column; gap: 4px; }
.roster-identity .roster-badges.left { left: auto; right: 100%; margin-left: 0; margin-right: 4px; }
.roster-row.filled .slot-remove { display: flex; top: -4px; right: -2px; }
.roster-sprite {
  width: 92px; height: 92px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(154,123,214,.12), transparent 70%);
  border-radius: 8px; cursor: pointer; overflow: hidden;
}
.roster-sprite img { width: 82%; height: 82%; object-fit: contain; }
.roster-sprite .slot-empty-icon { font-size: 30px; }
/* empty row: one centred square add target (same circular glow as the grid tile), not stranded in the left column */
.roster-row.empty { grid-template-columns: 1fr; justify-items: center; }
.roster-sprite.roster-add { width: 112px; height: 112px;
  background: radial-gradient(circle closest-side, rgba(154,123,214,.18), transparent); }
.roster-sprite.roster-add .slot-empty-icon { font-size: 38px; }
@media (hover: hover) { .roster-sprite.roster-add:hover .slot-empty-icon { opacity: .6; } }
/* fresh party (no creature yet): the roster stretches to fill the screen below the top tiles, rows
   share the height evenly and the add box scales with its row. Reverts once a creature is picked. */
.planning-main:has(> .party-roster.all-empty) { display: flex; flex-direction: column; }
.party-roster.all-empty { flex: 1 0 auto; }
.party-roster.all-empty .roster-row { flex: 1 1 0; min-height: 72px; grid-template-rows: 1fr; align-items: center; }
.party-roster.all-empty .roster-sprite.roster-add { height: 100%; max-height: 112px; width: auto; aspect-ratio: 1; }
.roster-head { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.roster-name {
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 3 columns → Hea/Att/Def on row 1, Int/Spe/Total together on row 2 */
.roster-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 3px 10px;
  justify-content: center; margin: 2px 0; font-variant-numeric: tabular-nums;
}
.roster-stats .rstat { font-size: 11px; color: var(--text); }
.roster-stats .rstat i { color: var(--text-mute); font-style: normal; margin-right: 3px; }
.roster-stats .rstat.total { color: var(--cap); font-weight: 700; }
.roster-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; width: 100%; }
.roster-actions .slot-mini { flex: 1 1 auto; min-width: 44px; }

.roster-traits { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.roster-traits.empty { align-items: flex-start; justify-content: center; }
.roster-empty { color: var(--text-mute); font-size: 13px; }

/* phones: stack the identity block above its traits, all centered in the row, with the
   name · class · race header lifted ABOVE the sprite / icons / stats (via flex order). */
@media (max-width: 560px) {
  .roster-row { grid-template-columns: 1fr; gap: 10px; }
  .roster-identity { align-items: center; }              /* column by default; center horizontally */
  .roster-identity .slot-remove { position: absolute; top: 6px; right: 6px; }
  /* header — name · class · race all on one centered line (there's room) */
  .roster-head { order: 1; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 0; }
  .roster-head .roster-name { max-width: none; }
  .roster-head .roster-clsrace::before { content: "·"; margin: 0 7px; color: var(--text-mute); }
  .roster-identity > .slot-sub { order: 2; }             /* standalone note (e.g. "Ignored (Pariah)") */
  .roster-sprite-row { order: 3; }
  .roster-sprite { width: 72px; height: 72px; }
  .roster-row.empty { padding: 8px; }                   /* six empty rows fit a phone screen without scrolling */
  .roster-sprite.roster-add { width: 56px; height: 56px; }
  .roster-sprite.roster-add .slot-empty-icon { font-size: 26px; }
  .party-roster.all-empty .roster-row { min-height: 60px; }
  .roster-stats { order: 5; }
  .roster-actions { order: 6; }
}

/* ── overlay system ─────────────────────────────────────────────────────── */
#overlay-root        { position: fixed; inset: 0; z-index: 100; overscroll-behavior: none; }
#detail-overlay-root { position: fixed; inset: 0; z-index: 200; overscroll-behavior: none; }
#overlay-root.hidden, #detail-overlay-root.hidden { display: none; }
.ovl-backdrop {
  position: absolute; inset: 0; background: rgba(8,5,16,.72);
  display: flex; align-items: center; justify-content: center; padding: 3vh 2vw;
}

.overlay-panel {
  width: 92vw; max-width: 1380px;
  height: 86vh; max-height: 86vh;         /* FIXED — never collapses to hug a filtered grid */
  background: var(--bg2); border: 2px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.overlay-panel.detail { width: 94vw; max-width: 1600px; height: 90vh; max-height: 90vh; }

.overlay-header, .overlay-footer { flex-shrink: 0; }   /* pinned */
/* chrome (header/footer/search/close) is kept slim so the content rows below can grow */
.overlay-header {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-bottom: 1px solid var(--border-dim);
  background: linear-gradient(#241a48, #1c1338);
}
.overlay-header h2 { font-size: clamp(14px, 2vw, 17px); flex: 1; }
.overlay-header .ovl-close, .riddle-pop-head .ovl-close {
  background: var(--surface2); border: 1px solid var(--border-dim); color: var(--text);
  border-radius: 8px; width: 30px; height: 30px; font-size: 16px; flex: 0 0 auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
@media (hover: hover) { .overlay-header .ovl-close:hover, .riddle-pop-head .ovl-close:hover { border-color: var(--accent2); color: var(--text); } }
.ovl-search {
  flex: 1; min-width: 120px; max-width: 340px;
  background: var(--bg); border: 1px solid var(--border-dim); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px;
}
.overlay-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 14px; border-top: 1px solid var(--border-dim); background: #1c1338;
}
.overlay-footer .foot-info { font-size: 12px; color: var(--text-dim); }
.btn-confirm {
  background: var(--accent2); color: #150e26; font-weight: 700; border: none;
  border-radius: 9px; padding: 8px 18px; font-size: 14px;
}
.btn-confirm:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-dim); border-radius: 9px; padding: 8px 14px; font-size: 14px;
}
.btn-ghost:disabled { opacity: .4; cursor: default; }

/* "Press back again to exit" toast (installed PWA back-button guard) */
.exit-toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(14px);
  background: rgba(20,14,38,.96); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 18px; font-size: 13px; white-space: nowrap;
  z-index: 9999; opacity: 0; pointer-events: none;
  box-shadow: var(--shadow); transition: opacity .18s ease, transform .18s ease;
}
.exit-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn-ghost.on { color: var(--cap); border-color: var(--cap); background: rgba(201,162,75,.16); }   /* active toggle (e.g. Appendix bookmark filter) */
.btn-ghost.danger { color: var(--bad); border-color: #6b2f2f; }
.btn-ghost.danger:disabled { color: var(--text-mute); border-color: var(--border-dim); }
.btn-ghost.armed { background: var(--bad); color: #1a1230; border-color: var(--bad); }   /* tap again to confirm */

/* min-height:0 is load-bearing: a flex child defaults to min-height:auto (content
   height), which stops a descendant's overflow-y from ever scrolling. */
.overlay-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }   /* holds the scroll regions */

/* three independently-scrolling regions inside the fixed body.
   info panels match the Specialization overlay width (340px) for a consistent, roomier readout */
.ovl-left, .ovl-right { width: 390px; flex-shrink: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.ovl-left  { border-right: 1px solid var(--border-dim); }
/* info panel: ~15% wider than before. Fixed width on desktop (no resize there); on phones it's a
   bottom sheet whose HEIGHT is user-resizable via a discreet top-left grip — see the ≤600px block. */
.ovl-right { width: 390px; border-left: 1px solid var(--border-dim); position: relative; }
/* "i" button in the creature selector info panel → opens the full-screen creature detail. Mobile-only:
   on desktop the side info panel is already fully visible, so the button is hidden (shown ≤600px below). */
.cd-info-btn { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  align-items: center; justify-content: center; font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
  background: var(--surface2); color: var(--accent2); border: 1px solid var(--border-dim); }
@media (hover: hover) { .cd-info-btn:hover { background: var(--surface3); border-color: var(--accent2); } }
/* remove-bookmark star on a creature info panel — only rendered for bookmarked creatures, so always shown */
.cd-bk-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer;
  background: var(--surface2); color: var(--accent); border: 1px solid var(--border-dim); }
@media (hover: hover) { .cd-bk-btn:hover { background: var(--surface3); border-color: var(--accent); } }
.ovl-center { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ovl-filterbar { flex-shrink: 0; padding: 6px 10px; border-bottom: 1px solid var(--border-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ovl-center-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }

/* hover styles sit in @media (hover: hover) — on touch a scroll gesture must not paint rows grey (#27) */
/* selection grid of sprite tiles */
.pick-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pick-tile {
  position: relative; min-width: 0;   /* fixed icon size: a long name wraps/clamps instead of widening its grid column */
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 9px;
  padding: 6px; display: flex; flex-direction: column; gap: 4px; align-items: center;
  cursor: pointer; transition: border-color .1s;
}
@media (hover: hover) { .pick-tile:hover { border-color: var(--border); } }
.pick-tile .pt-sprite { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
/* absolute + object-fit so a portrait sprite (e.g. Torun 40×60) can never stretch the grid row */
.pick-tile .pt-sprite img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10%; object-fit: contain; }
/* fixed 2-line name box so every tile is the same height regardless of name length */
.pick-tile .pt-name {
  font-size: 11px; text-align: center; line-height: 1.1; height: 2.2em; width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.pick-tile .pt-total { font-size: 10px; color: var(--text-dim); }
.crea-sortbar { margin-top: -4px; align-items: center; }   /* keep left-aligned, vertically centre the label + segments */
/* selection reads through busy icons: inset ring + tint, not just a border */
.pick-tile.disabled { opacity: .32; cursor: not-allowed; filter: grayscale(.6); }
.relic-grid .pick-tile.disabled { filter: grayscale(1); }
/* artifact whose Nether Stone is already socketed in another equipped artifact: low-alpha RED tint
   (counterpart of the grey .disabled tint) — still selectable */
.prop-row.nether-clash { opacity: .55; border-color: var(--bad); background: rgba(224,107,107,.12); }
.prop-row.nether-clash.locked { opacity: .4; cursor: not-allowed; }
.prop-row.chosen.locked { opacity: .4; cursor: not-allowed; }
.clash-note { color: var(--bad); text-align: left; padding: 6px 0; }
.artpage-body { padding-top: 10px; }
.prop-row.art-empty-slot { border-style: dashed; background: transparent; color: var(--accent2); cursor: pointer; }
.prop-row.art-empty-slot .prop-ico { justify-content: center; font-size: 16px; }
.prop-row.art-empty-slot .prop-name { color: var(--accent2); font-weight: 500; }
@media (hover: hover) { .prop-row.art-empty-slot:hover { border-color: var(--accent2); background: rgba(154,123,214,.10); } }
.prop-row.art-empty-slot.locked { opacity: .45; cursor: default; color: var(--text-mute); }
.prop-row.art-empty-slot.locked .prop-name { color: var(--text-mute); }
@media (hover: hover) { .prop-row.art-empty-slot.locked:hover { border-color: var(--border-dim); background: transparent; } }
.pick-tile.selected { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); }
.pick-tile.selected .pt-sprite { background: rgba(154,123,214,.2); border-radius: 8px; filter: brightness(1.12); }
/* Equipment library grids (artifacts / spell gems / nether stones): equip-state fill (purple = this
   creature, gold = another) plus a neutral outline for the user's click-selection so the two never look the
   same. Scoped to .equip-grid so the creature picker / relic / Builds tiles keep their own looks. */
.equip-grid .pick-tile.selected { border-color: var(--border); box-shadow: none; outline: 2px solid #efeaf7; outline-offset: 2px; }
.equip-grid .pick-tile.selected .pt-sprite { background: none; filter: none; }
.equip-grid .pick-tile.nether-clash, .pick-tile.nether-clash { opacity: .5; border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.equip-grid .pick-tile.nether-clash .pt-sprite, .pick-tile.nether-clash .pt-sprite { background: rgba(224,107,107,.30); border-radius: 8px; }
.pick-tile.disabled.nether-clash { filter: none; opacity: .4; }   /* blocked by a stone clash: red, not grey */
.equip-grid .pick-tile.eq-here { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); }
.equip-grid .pick-tile.eq-here .pt-sprite { background: rgba(154,123,214,.22); border-radius: 8px; filter: brightness(1.12); }
.equip-grid .pick-tile.eq-other { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.equip-grid .pick-tile.eq-other .pt-sprite { background: rgba(201,162,75,.20); border-radius: 8px; }
.pick-tile .pt-cls { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--pt-cls, transparent); }
/* class emblem icon in place of the color dot — readable regardless of accent luminance */
.pick-tile .pt-clsico { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; z-index: 2; pointer-events: none; }
.pick-tile .pt-raceico { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; z-index: 2; pointer-events: none; }
.pick-tile .pt-clsico img, .pick-tile .pt-raceico img { width: 100%; height: 100%; object-fit: contain; }
.crea-loadmore { display: flex; justify-content: center; margin: 12px 0 4px; }
.crea-loadmore .btn-ghost { padding: 8px 18px; }

/* filter chips */
.chip {
  font-size: 12px; padding: 5px 11px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border-dim); color: var(--text-dim);
}
.chip.on { color: var(--text); border-color: var(--border); background: var(--surface3); }
.chip[data-cls] { --c: var(--border-dim); }
.chip.on[data-cls] { box-shadow: inset 0 0 0 2px var(--c); border-color: var(--c); color: var(--text); }

/* ── trait banner (data-driven colour) ──────────────────────────────────── */
.trait-banner {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--aff-color, var(--surface2)); color: var(--aff-text, #fff);
  border-radius: 20px; padding: 3px 11px 3px 9px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid rgba(0,0,0,.25);
}
.trait-banner-icon { display: inline-flex; width: 14px; height: 14px; }
.trait-banner-icon img { width: 100%; height: 100%; }
.trait-banner-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* when a chip carries availability labels it spans full width and right-aligns them INSIDE the pill */
.trait-banner.has-avail { display: flex; width: 100%; justify-content: space-between; }
.trait-banner.has-avail .trait-banner-label { flex: 1; min-width: 0; }
.trait-banner .avail-tags { flex: 0 0 auto; }
.trait-banner .avail-tag { color: var(--aff-text); opacity: .82; }   /* readable on the coloured pill, de-emphasised */
/* light chip bg (e.g. Life gold): the faded thin label washes out → force solid black */
.trait-banner.on-light .avail-tag { color: #000; opacity: 1; }
/* low-key availability labels (RD / Favor / Rep) — plain muted unbolded text */
.avail-tags { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.avail-tag { font-size: 11px; font-weight: 400; color: var(--text-mute); white-space: nowrap; }
.perk-line-head .avail-tags, .overlay-header .avail-tags { align-self: center; }
/* creature picker "Show Traits" list — innate-trait containers, whole row selects */
.crea-trait-list { display: flex; flex-direction: column; gap: 8px; }
.crea-trait-row { cursor: pointer; transition: border-color .1s; }
.crea-trait-row.selected { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); background: rgba(154,123,214,.12); }
.crea-trait-row.disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
.crea-foot { display: flex; align-items: center; gap: 8px; }
.crea-view-seg { margin-right: auto; }
.ctr-head { margin-bottom: 8px; }
.ctr-id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border-dim); }
.ctr-name { font-size: 15px; }
.ctr-tags { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin-left: auto; }
.ctr-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.ctr-ico { display: inline-flex; width: 18px; height: 18px; }
.ctr-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ctr-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ctr-stat-k { color: var(--text-mute); }
.crea-trait-row.nofuse { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-dim); border-radius: 9px; color: var(--text-mute); }
.crea-trait-row.nofuse.selected { color: var(--text); }

/* trait containers — one base box; ghost keeps geometry */
.primary-traits {
  border: 1px solid var(--accent2); border-radius: 9px; padding: 8px;
  background: rgba(154,123,214,.08); display: flex; flex-direction: column; gap: 6px;
}
.primary-traits.trait-ghost { border-color: transparent; background: transparent; }
.primary-traits + .primary-traits.trait-ghost { padding-top: 0; }
/* selectable "clean container" cards for the artifact / nether Add-Trait|Spell pickers */
.pick-card { border: 1px solid var(--border-dim); border-radius: 9px; padding: 8px; margin-bottom: 8px;
  background: var(--surface); cursor: pointer; transition: border-color .1s;
  display: flex; flex-direction: column; gap: 6px; }
@media (hover: hover) { .pick-card:hover { border-color: var(--accent2); } }
.pick-card.chosen { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); background: rgba(154,123,214,.08); }
.pick-card .primary-traits { margin: 0; border: 0; background: none; padding: 0; }
.pick-card .art-spellcard-head { display: flex; align-items: center; gap: 8px; }
.pick-card .art-spellcard-head b { flex: 1; min-width: 0; }
/* link out to the trait's material / taxonomy (its own action so it beats the card's add-on-click) */
.pick-card-src { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; color: var(--text-mute); font: inherit; font-size: 12px; cursor: pointer; }
@media (hover: hover) { .pick-card-src:hover { color: var(--text); } }
.pick-card-src.plain { flex: 0 0 auto; color: var(--accent2); font-size: 11px; }
.pick-card-src .prop-ico.sm { width: 18px; height: 18px; }
.trait-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
/* translated parameter words (stats/conditions/actions) — bold + brightened so they pop in dimmed copy */
.param { font-weight: 700; color: var(--text); }
.perk-desc .param, .card-effect .param { color: var(--accent); }

/* ── stat table (grid, fixed Base…Total semantics) ──────────────────────── */
.stat-grid { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.stat-header, .stat-row {
  display: grid; grid-template-columns: 1fr 60px 60px 68px; align-items: center;
  padding: 4px 8px; border-radius: 6px;
}
.stat-grid.with-relic .stat-header,
.stat-grid.with-relic .stat-row { grid-template-columns: 1fr 56px 56px 56px 68px; }
/* creature-detail breakdown: Stat | Base | Pers | Scroll | Bonus | Total */
.stat-grid.detailed .stat-header,
.stat-grid.detailed .stat-row { grid-template-columns: 1fr 44px 48px 54px 54px 58px; }
.stat-grid.detailed .stat-header { letter-spacing: 0; font-size: 10px; }   /* fit "Scroll"/"Bonus" without overlap */
.stat-grid.detailed .stat-header > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-val.scroll { color: #9be6a0; }        /* scroll channel tint (green) */
.stat-val.muted  { color: var(--text-mute); }
/* single-value stat panel (creature selector info): name flexes, one right-aligned value column */
.stat-grid.single .stat-row { grid-template-columns: 1fr auto; }
/* discrete per-stat magnitude (value / roster max) — name | thin track | value.
   FIXED name + value columns (not auto) so every row's track shares the same left start and
   the same length — each .stat-row is its own grid, so auto columns would shift per label width. */
.stat-grid.single.mag .stat-row { grid-template-columns: 96px 1fr auto; gap: 10px; }
.stat-grid.single.mag .stat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-mag { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.stat-mag > i { display: block; height: 100%; background: var(--accent); opacity: .45; border-radius: 2px; }
/* fusion delta segment: green = fusing this partner raised the stat, red = lowered it */
.stat-mag .delta { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.stat-mag .delta.up { background: var(--good); opacity: .9; }
.stat-mag .delta.down { background: var(--bad); opacity: .9; }
/* over-cap wrap: the bar fills solid (accent) then the excess restarts from the left in blue,
   so a stat pushed past the roster max by personality/scrolls reads as "full + wrapped". */
.stat-mag.over > i { opacity: .75; }
.stat-mag .wrap { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; background: #4aa3ff; opacity: .95; }
.stat-delta { font-size: 10px; font-weight: 800; margin-left: 3px; }
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--bad); }
.stat-header { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-mute); }
.stat-row { background: var(--surface); }
.stat-row .stat-name { text-align: left; font-weight: 600; font-size: 13px; }
.stat-val { text-align: right; font-size: 13px; }
.stat-val.base   { color: var(--text-dim); }
.stat-val.art    { color: #9fd0ff; }        /* artifact channel tint (cool) */
.stat-val.relic  { color: #f0c987; }        /* relic channel tint (warm/gold) */
.stat-val.total  { color: var(--text); font-weight: 700; }
.stat-val.pos { color: var(--good); }
.stat-val.neg { color: var(--bad); }
.stat-row.capped .stat-val.total { color: var(--cap); }
/* highlight stratification: 2 channels = brightest, 1 = mid, secondary-only = faint */
.stat-row.hl-low  { background: rgba(201,162,75,.06); }
.stat-row.hl-med  { background: rgba(201,162,75,.13); }
.stat-row.hl-high { background: rgba(201,162,75,.24); }

/* ── artifact / relic builder ───────────────────────────────────────────── */
.build-section { margin-bottom: 14px; }
.build-section h3 { font-size: 13px; color: var(--accent); margin-bottom: 8px; letter-spacing: .4px; }
.prop-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px;
}
.prop-row.chosen { border-color: var(--accent2); }
.prop-row .prop-name { flex: 1; font-size: 14px; }
.prop-row .prop-stat { font-size: 12px; color: var(--text-dim); }
/* rich two-line prop row (spells / material items) — name over a bolded plain-text effect, like perks */
.prop-row.rich { align-items: flex-start; }
.prop-row.rich .prop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prop-row.rich .prop-name { flex: none; }
.prop-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
.prop-sub .param { color: var(--accent); }
.prop-sub.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* inline meta chip on a spell picker row (charges · potency) */
.prop-metatag { margin-left: 8px; font-size: 10px; font-weight: 700; color: var(--text-mute);
  font-variant-numeric: tabular-nums; }
/* Appendix provenance chips (which layer tagged this result): token=exact markup, llm=classified, etc. */
.apx-src { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 4px; margin-left: 4px; color: var(--text-mute); background: rgba(255,255,255,.06); }
.apx-src.s-token { color: #7fd08a; background: rgba(91,214,116,.14); }
.apx-src.s-code { color: #5bd6c4; background: rgba(91,214,196,.16); }
.apx-src.s-implied { color: #8fd0b8; background: rgba(143,208,184,.14); }
.apx-src.s-keyword { color: #9fd0ff; background: rgba(159,208,255,.14); }
.apx-src.s-llm { color: var(--accent2); background: rgba(154,123,214,.16); }
.apx-src.s-correction, .apx-src.s-field, .apx-src.s-phrase { color: var(--accent); background: rgba(201,162,75,.14); }
/* spell stat readout (spell-gem info panel): key/value rows */
.spell-stats { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 4px; }
.spell-stats .ss-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px;
  padding: 3px 8px; background: var(--surface); border-radius: 6px; }
.spell-stats .ss-k { color: var(--text-mute); text-transform: uppercase; letter-spacing: .4px; font-size: 10px; align-self: center; }
.spell-stats .ss-v { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.prop-row .prop-val { font-size: 13px; font-weight: 700; color: #9fd0ff; }
.slot-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px;
  background: var(--surface2); border: 1px dashed var(--border-dim); color: var(--text-dim);
  font-size: 12px; margin: 0 5px 5px 0;
}
.slot-chip.filled { border-style: solid; border-color: var(--border); color: var(--text); }
.rank-picker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rank-picker input[type=range] { flex: 1; accent-color: var(--accent2); }
.rank-badge { min-width: 44px; text-align: center; font-weight: 700; color: var(--accent); }

/* ── Synergy Matrix — carriers × effect-tags grid (complement to Tag Synergy) ── */
.xref-wrap { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
.xref-table { border-collapse: separate; border-spacing: 0; font-size: 11px; }
.xref-table th, .xref-table td { border: 1px solid var(--border-dim); padding: 8px 9px; text-align: center; }
/* first column (member names) right-aligned — needs to beat the `.xref-table th` center above */
.xref-table th.xref-rowhead, .xref-table th.xref-corner { text-align: right; }
.xref-corner  { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface3); text-align: right; font-size: 10px; color: var(--text-mute); }
.xref-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface2); vertical-align: bottom; }
.xref-rowhead { position: sticky; left: 0; z-index: 1; background: var(--surface2); text-align: right; white-space: nowrap; }
.xref-rowhead b { font-weight: 600; }
.xref-rowhead .xr-cat { display: block; font-size: 9px; color: var(--text-mute); font-weight: 400; }
.xref-colhead { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.xref-colhead .xc-name { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 130px; overflow: hidden; text-overflow: ellipsis; }
.xref-colhead .xc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); flex: 0 0 auto; }
.xref-colhead .xc-dot.k-spec { background: var(--accent); }
.xref-colhead .xc-dot.k-anoint { background: var(--accent2); }
.xref-colhead .xc-dot.k-crea { background: #9fd0ff; }
/* column marker coloured by share status: green shared-with-spec, yellow shared, red solo */
.xref-colhead .xc-dot.xc-spec  { background: var(--good); }
.xref-colhead .xc-dot.xc-other { background: var(--accent); }
.xref-colhead .xc-dot.xc-none  { background: var(--bad); }
.xref-rowhead .xr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--text-mute); vertical-align: middle; }
.xref-rowhead .xr-dot.k-spec { background: var(--accent); }
.xref-rowhead .xr-dot.k-anoint { background: var(--accent2); }
.xref-rowhead .xr-dot.k-crea { background: #9fd0ff; }
.xref-rowhead .xr-exp { display: inline-block; width: 12px; margin-right: 2px; color: var(--text-mute); cursor: pointer; user-select: none; }
@media (hover: hover) { .xref-rowhead .xr-exp:hover { color: var(--text); } }
.xref-rowhead .xr-exp-sp { display: inline-block; width: 12px; margin-right: 2px; }
.xref-subrow .xref-subhead { font-weight: 400; color: var(--text-dim); font-size: 10px; padding-right: 14px; }
.xref-subrow td { background: rgba(255,255,255,.02); color: var(--text-mute); }
.xref-shared td, .xref-shared th { position: sticky; bottom: 0; z-index: 1; background: var(--surface3); font-weight: 700; }
.xref-shared th { z-index: 3; }
/* cell/total colour by share status */
.xc-spec { color: var(--good); } .xc-other { color: var(--accent); } .xc-none { color: var(--bad); }
.xc-latent { color: var(--text-mute); }
/* colour legend in the filter bar */
.xref-legend { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.xref-legend .lg { margin-left: 8px; font-size: 12px; line-height: 1; }
.xref-legend .lg:first-child { margin-left: 0; }
/* Matrix/List view toggle */
.seg { display: inline-flex; border: 1px solid var(--border-dim); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.seg-btn { background: var(--surface); color: var(--text-dim); border: none; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-dim); }
.seg-btn.on { background: var(--accent); color: var(--surface3); font-weight: 700; }
.sort-dir { font-size: .85em; margin-left: 2px; }

/* ── mobile reflow ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ovl-left { width: 300px; }   /* narrower on tablets so the grid keeps its room */
  .ovl-right { width: 300px; }
}
@media (max-width: 600px) {
  /* header: compact the nav buttons so the left-aligned title keeps enough room to wrap to ~2 lines
     (Siralim Ultimate / Companion) with the buttons beside it, rather than 3–4 skinny lines */
  .topbar { padding: 5px 8px; gap: 8px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .tb-btn { padding: 5px 7px; font-size: 12px; }
  .overlay-panel, .overlay-panel.detail {
    /* dvh = full current viewport incl. behind the system nav bar (viewport-fit=cover),
       so the panel reaches the physical bottom edge in a standalone/installed PWA.
       The flex column keeps the header pinned at the top regardless, so growing the
       body when the URL bar hides doesn't jitter the header. Gold bottom border
       removed — it read as a "bar" floating above the Android nav buttons. */
    width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border-width: 0;
  }
  .ovl-backdrop { padding: 0; align-items: flex-start; }   /* pin the panel to the top */
  .overlay-body { flex-direction: column; }
  /* exactly two scroll regions on phones: grid on top (flexes to fill, scrolls),
     one info scroller below (capped so it can't eat the grid) */
  .ovl-left, .ovl-right {
    width: auto; flex: 0 1 auto; min-height: 0; max-height: 35vh;   /* roomier info panel — covers more of the screen */
    border: none; border-top: 1px solid var(--border-dim);
    -webkit-overflow-scrolling: touch;
  }
  /* Builds preview: raise the shared 35vh cap so the full-width 2×3 party (bigger sprites)
     fits without scrolling. Tiles stay full width — the taller cap is what makes room. */
  .ovl-right.build-info { max-height: 55vh; }
  .ovl-center-scroll { -webkit-overflow-scrolling: touch; }
  .cd-info-btn { display: flex; }   /* full-screen detail shortcut — the side panel is a cramped strip here */
  .cd-bk-btn { right: 44px; }       /* sit beside the "i" once it appears on phones */
  .crea-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }   /* 4 creatures per row on phones */
  /* saved lists (artifacts / spell gems / nether stones) — at least 4 per row on phones */
  .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* tighter overlay chrome so the grid isn't squeezed */
  .overlay-header { padding: 8px 12px; }
  /* extend the footer's background through the nav-bar inset so it sits flush with
     the screen bottom, while the buttons stay above the Android nav buttons */
  .overlay-footer { padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px)); }
  .party-summary .stat-header, .party-summary .stat-row { grid-template-columns: 1fr 52px 52px 60px; }
  /* compact the 6-column breakdown on phones so it doesn't overflow */
  .stat-grid.detailed .stat-header, .stat-grid.detailed .stat-row { grid-template-columns: 1fr 32px 36px 42px 42px 46px; padding: 4px 5px; gap: 2px; }
  .stat-grid.detailed .stat-header { font-size: 9px; }
  .stat-grid.detailed .stat-name { font-size: 11.5px; }
  .stat-grid.detailed .stat-val { font-size: 11.5px; }
}

/* ══ v2 components (spec/perks/facets/cards/nether/artifact-library) ══════════ */

/* home spec tile — small */
/* home-top mirrors the party grid so spec/anoint tiles match creature-card width */
.home-top { margin-bottom: 14px; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .home-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .home-top { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.anoint-grp { margin-top: 12px; display: flex; gap: 8px; align-items: baseline; }
.anoint-grp:first-child { margin-top: 0; }
.anoint-badge { flex: 0 0 auto; align-self: center; font-size: 9px; font-weight: 800; text-transform: uppercase;
  color: var(--text-mute); background: rgba(255,255,255,.06); border: 1px solid var(--border-dim); border-radius: 4px; padding: 1px 4px; }
.anoint-badge.asc { color: var(--accent); background: rgba(201,162,75,.16); }
.perk-line.anoint-incur { opacity: .62; }
/* spec/anoint tiles are vertical cards mirroring the creature slot card */
.spec-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; text-align: center;
  background: linear-gradient(#241a48, var(--bg2)); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
}
.spec-tile-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.spec-tile-icon img { width: 100%; height: 100%; object-fit: contain; }
.spec-tile-plus { font-size: 24px; color: var(--accent2); }
/* empty-tile placeholder = the game's 16px menu glyph at a crisp 2× */
.spec-tile-icon img.tile-empty-ico { width: 32px; height: 32px; image-rendering: pixelated; opacity: .85; }
/* the hand glyph's art fills only 9×11 of its 16px canvas (the character fills 12×14) — draw it at 2.5× so both read the same size */
.spec-tile-icon img.tile-empty-ico.anoint-ph { width: 40px; height: 40px; }
/* equipped anointment perk icons shown in the Anointments tile */
.anoint-tile .spec-tile-icon { width: 100%; height: auto; min-height: 44px; }
/* fixed 5-wide grid: 5 equipped = one row on every width; Royal's 20 = a 4×5 block. Icons are 2× the 16px perk art
   (32px, same as the empty-tile glyph) and shrink a little on narrow phones rather than wrap. */
/* 5 per row at exactly the old grid-cell size (min(32px, a fifth of the row)); each row — a short last row too — is centred */
.anoint-tile-icons { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; width: 100%; }
.anoint-mini { flex: 0 0 min(32px, calc((100% - 8px) / 5)); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.anoint-mini img { width: 100%; height: 100%; object-fit: contain; }
.spec-tile-label { font-weight: 600; font-size: 13px; line-height: 1.15; }
.spec-tile-sub { font-size: 11px; color: var(--text-dim); }
.spec-tile .slot-remove { display: flex; top: 6px; right: 6px; }
.anoint-tile.filled { padding-top: 24px; }   /* the ✕ gets its own band above the icon rows (no overlap with the 5th icon) */

/* spec selector — bigger info panel, sprite above name */
.spec-right { width: 340px; }
.spec-info { text-align: center; }
.spec-info-sprite { width: 118px; height: 118px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; }
.spec-info-sprite img { width: 100%; height: 100%; object-fit: contain; }
.spec-info-name { font-size: 22px; margin-bottom: 8px; }
.spec-info .perk-picker, .spec-info .spec-edit-bar { text-align: left; }
.spec-play { text-align: left; }
.spec-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
/* Relic picker: fixed 3-wide grid per stat section (3×2 for a full 6-relic stat) */
.relic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.relic-grid + .section-label { margin-top: 4px; }
/* False God grouping — each group headed by the combined 6-part battle portrait */
.fgod-group { margin-bottom: 8px; }
.fgod-head {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; width: 100%;
  padding: 6px 10px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(154,123,214,.16), transparent);
  border: 1px solid var(--border-dim); border-left: 3px solid var(--accent2);
  color: inherit; font-family: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .fgod-head:hover { border-color: var(--border); background: linear-gradient(90deg, rgba(154,123,214,.26), transparent); } }
.fgod-caret { flex: 0 0 auto; font-size: 12px; color: var(--accent2); width: 12px; }
.fgod-count { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 800; color: var(--cap);
  background: rgba(255,255,255,.06); border: 1px solid var(--border-dim); border-radius: 10px; padding: 1px 8px; }
.fgod-portrait { flex-shrink: 0; height: 56px; display: flex; align-items: center; }
.fgod-portrait img { height: 56px; width: auto; object-fit: contain; }
.fgod-name { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .2px; }
/* Appendix combined trait row — two icons (creature + trait item), no trait icon */
/* reserve the two-icon width (26 + 3 gap + 26) so single/zero-icon rows keep the title aligned */
.apx-icons { flex: 0 0 55px; display: flex; gap: 3px; align-items: center; }
.apx-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.apx-ico img { width: 100%; height: 100%; object-fit: contain; }
/* appendix result rows: a left icon column of large boxes (object icon over owner icon), centred */
.apx-iconcol { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.apx-crea { flex: 0 0 auto; align-self: center; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px; overflow: hidden; }
.apx-crea img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.apx-crea .crit-face { width: 100%; height: 100%; }
.apx-crea.apx-clickable { cursor: pointer; }
@media (hover: hover) { .apx-crea.apx-clickable:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } }
.apx-crea.apx-boss { border-color: var(--accent2); }
/* boss owner with no extracted sprite (Nether/Special) → a name chip in the sprite slot */
.apx-boss-name { flex: 0 0 auto; align-self: center; max-width: 90px; padding: 4px 7px; border-radius: 8px;
  background: rgba(154,123,214,.12); border: 1px solid var(--accent2); color: var(--accent2);
  font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.anoint-spec-tag.apx-boss-cat { color: var(--accent2); border-color: var(--accent2); }
/* relic ranks + card tiers: one legible labelled line each, not a run-on block */
.apx-ranklist, .apx-tierlist { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.apx-rank, .apx-tier { display: flex; gap: 8px; align-items: baseline; }
.apx-rank-n, .apx-tier-n { flex: 0 0 auto; min-width: 62px; font-weight: 800; font-size: 11px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .3px; text-align: center; }
.apx-tier-n { color: var(--cap); }
.apx-rank-d, .apx-tier-d { flex: 1; color: var(--text-dim); }
.cd-preview { padding: 4px 2px; }
.fg-part-name { margin-bottom: 4px; }
.fg-part-name b { font-size: 14px; }
/* perk spec emblem square (mirrors the trait row's creature square) */
.apx-crea.apx-spec { padding: 3px; background: var(--surface2); }
.apx-crea.apx-spec img { padding: 2px; }
/* exclusivity badge stacked below a minion's status glyph (glossary) — matches the status-icon box */
.apx-crea.apx-excl img { image-rendering: pixelated; }
/* "Exclusive to X" note on the minion taxonomy detail page */
.excl-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 6px 10px;
  background: rgba(154,123,214,.10); border: 1px solid var(--accent); border-radius: 8px;
  color: var(--text); font-size: 12.5px; }
.excl-note img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.excl-note b { color: var(--accent); }
/* taxonomy detail — Source facts (material / item source / owner) */
.apx-fact { color: var(--text); font-size: 13px; padding: 2px 2px 8px; }
.apx-none { color: var(--text-mute); font-style: italic; }
.apx-owner { display: inline-flex; align-items: center; gap: 8px; }
.apx-owner-ico { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 6px; overflow: hidden; }
.apx-owner-ico img, .apx-owner-ico .crit-face { width: 100%; height: 100%; object-fit: contain; }
button.apx-owner { background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); }
@media (hover: hover) { button.apx-owner:hover .apx-owner-ico { border-color: var(--accent); } }
/* source-spec tag on each anointment row (rows are grouped by False God, not spec) */
.anoint-spec-tag {
  font-size: 10px; color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border-dim); border-radius: 6px; padding: 1px 6px;
}
/* standardized perk row: fixed icon · body (head line + desc) — uniform regardless of name/cost length */
.perk-list { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.perk-line { font-size: 13.5px; line-height: 1.4; padding: 10px 12px; border-radius: 8px; background: var(--surface); display: flex; gap: 10px; align-items: flex-start; }
.perk-line.off { opacity: .5; }
.perk-line.equipped { background: rgba(154,123,214,.12); box-shadow: inset 0 0 0 1px var(--accent2); }
.perk-line .anoint-eq { flex: 0 0 auto; align-self: center; white-space: nowrap; min-width: 74px; }
.perk-line .anoint-eq:disabled { opacity: .35; cursor: not-allowed; }
.perk-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-self: stretch; }
.perk-line-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 8px; }   /* chips drop under the title instead of colliding */
.perk-line-head > b { min-width: 0; margin-right: auto; }
.perk-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }
/* Appendix bookmark star — toggles a trait/spell into the selector filter set. Hollow=off, gold=on. */
.apx-bk { flex: 0 0 auto; align-self: center; background: none; border: none; cursor: pointer; padding: 0 2px; line-height: 1; font-size: 15px; color: var(--text-mute); }
@media (hover: hover) { .apx-bk:hover { color: var(--accent); } }
.apx-bk.on { color: var(--accent); }

/* Macro Proposal — predicted battle-AI brain shown on the creature detail page */
.macro-proposal { margin-top: 6px; }
.macro-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.macro-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.macro-role { font-size: 11px; font-weight: 700; color: var(--accent2); background: rgba(154,123,214,.16);
  border: 1px solid var(--border-dim); border-radius: 999px; padding: 2px 9px; }
.btn-ghost.macro-copy { padding: 3px 12px; font-size: 12px; }
.macro-lines { display: flex; flex-direction: column; gap: 4px; }
.macro-line { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border-dim);
  border-left: 3px solid var(--accent2); border-radius: 7px; background: rgba(0,0,0,.15); }
.macro-line.chain { margin-left: 16px; border-left-color: var(--accent); border-left-style: dashed; }
.macro-ln { flex: 0 0 auto; min-width: 18px; text-align: right; font-weight: 800; color: var(--text-mute);
  font-variant-numeric: tabular-nums; }
.macro-line-body { flex: 1; min-width: 0; }
.macro-en { font-weight: 600; }
.macro-en b { color: var(--accent); }
.macro-why { color: var(--text-dim); font-size: 12px; margin-top: 1px; }
.macro-foot { color: var(--text-mute); font-size: 12px; margin-top: 8px; line-height: 1.4; }
.macro-foot b { color: var(--accent); }
.macro-count { font-size: 11px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* Macros overlay — party creature selector */
.macro-creabar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.macro-crea { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--border-dim);
  border-radius: 999px; background: rgba(0,0,0,.2); color: var(--text); cursor: pointer; }
.macro-crea.on { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); background: rgba(154,123,214,.14); }
.macro-crea-face { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.macro-crea-face img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.macro-crea-name { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Any trait/spell/etc. display can open its taxonomy detail; hint clickability */
.apx-clickable { cursor: pointer; }
@media (hover: hover) { .perk-line.apx-clickable:hover, .prop-row.apx-clickable:hover { background: rgba(154,123,214,.08); border-radius: 7px; } }
@media (hover: hover) { .art-slot.apx-clickable:hover, .art-pv-top.apx-clickable:hover { outline: 1px solid var(--accent2); outline-offset: -1px; border-radius: 7px; } }
.etax-hint { font-size: 10px; font-weight: 700; color: var(--accent2); opacity: .8; white-space: nowrap; }

/* Artifact info panel: Bonuses | Sockets view toggle + spell-gem containers */
.art-view-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border-dim); }
.av-tab { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--text-mute); }
.av-tab.on { color: var(--accent); }
@media (hover: hover) { .av-tab:hover { color: var(--text); } }
.av-pipe { color: var(--border-dim); }
.art-spellcards { display: flex; flex-direction: column; gap: 8px; }
/* spell-gem container(s) shown beneath a relic rank row that casts a named spell */
.relic-cast-spells { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px 44px; }
.art-spellcard { border: 1px solid var(--accent2); border-radius: 9px;
  padding: 8px; background: rgba(154,123,214,.08); }
.art-spellcard-head { display: flex; align-items: center; gap: 8px; }
.art-spellcard-head b { flex: 1; min-width: 0; }
.art-trigger { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent2);
  background: rgba(154,123,214,.16); border: 1px solid var(--border-dim); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
/* Entity taxonomy detail — tags grouped by category */
.etax-group { margin-bottom: 10px; }
.etax-cat { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; }
.etax-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.etax-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text);
  background: rgba(0,0,0,.22); border: 1px solid var(--border-dim); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
@media (hover: hover) { .etax-tag:hover { border-color: var(--accent2); background: rgba(154,123,214,.14); } }
.etax-tag .apx-src { font-size: 9px; }
.etax-tag .etax-mult { font-size: 11px; font-weight: 700; color: var(--accent); }
.etax-legend { color: var(--text-mute); font-size: 11px; margin-top: 12px; line-height: 1.5; }
.etax-legend b { color: var(--text-dim); }
.perk-rankbadge { flex: 0 0 auto; box-sizing: border-box; text-align: center; font-size: 10px; font-weight: 800; color: var(--accent2); background: rgba(201,162,75,.14); border: 1px solid var(--border-dim); border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.perk-line.off .perk-rankbadge { color: var(--text-mute); background: none; }
.perk-desc { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
/* effect clarification — code-grounded "what it actually does" text (taxonomy detail page only) */
.fx-clarify { margin-top: 4px; padding: 3px 7px; border-left: 2px solid var(--accent2); font-size: 11px; line-height: 1.35;
  color: var(--text-dim); background: var(--surface); border-radius: 0 4px 4px 0; }
/* Ascension perks (perk.ascension) get a subtle gold left edge in both the spec list and the picker */
.perk-line.asc { box-shadow: inset 3px 0 0 var(--accent); }
.perk-row.asc { box-shadow: inset 3px 0 0 var(--accent); }

/* ── Threats advisor (realm properties + runes to avoid) ── */
.thr-intro { color: var(--text-dim); font-size: 12px; margin: 2px 2px 10px; }
.thr-themebar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.thr-theme { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: var(--surface2);
  border: 1px solid var(--border-dim); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.thr-theme.det { color: var(--text); }
.thr-theme.on { color: #1a1230; background: var(--accent); border-color: var(--accent); font-weight: 700; }
.thr-w { font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,.28);
  color: var(--text-dim); font-variant-numeric: tabular-nums; }
.thr-theme.on .thr-w { background: rgba(0,0,0,.22); color: #1a1230; }
.thr-chip { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  color: var(--bad); background: rgba(224,107,107,.15); border: 1px solid rgba(224,107,107,.35); }
.thr-chip.cls { color: var(--accent); background: rgba(201,162,75,.15); border-color: rgba(201,162,75,.35); }
.thr-genhead { margin: 14px 0 2px; width: 100%; text-align: left; font-size: 13px; font-weight: 700;
  color: var(--text-dim); background: none; border: none; display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.thr-genhead.open { color: var(--text); }

/* perk picker overlay — same fixed-icon + head-line structure */
.perk-picker { display: flex; flex-direction: column; gap: 6px; }
.perk-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px; }
.perk-row.on { border-color: var(--good); }
.perk-row.off .perk-row-head > b, .perk-row.off .perk-desc { opacity: .55; }
.perk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.perk-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.perk-meta { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: 11px; white-space: nowrap; }
.perk-stepper { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.perk-step { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--border-dim); background: var(--panel); color: var(--text); font-weight: 800; cursor: pointer; line-height: 1; }
.perk-step.wide { font-size: 11px; font-weight: 700; }
@media (hover: hover) { .perk-step:hover:not(:disabled) { border-color: var(--accent2); color: var(--accent2); } }
.perk-step:disabled { opacity: .32; cursor: default; }
.perk-rank-val { min-width: 46px; text-align: center; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.perk-rank-max { color: var(--text-mute); font-weight: 600; }

/* creature faceted filters */
.facet { font-size: 13px; padding: 6px 11px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border-dim); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.facet.on { color: var(--text); border-color: var(--accent2); background: var(--surface3); }
.facet.add { border-style: dashed; color: var(--accent2); }
.facet.tag { background: rgba(154,123,214,.14); color: var(--text); }
.facet-x { opacity: .7; font-size: 11px; padding: 0 2px; }
@media (hover: hover) { .facet-x:hover { color: var(--bad); } }
.facet-panel { max-width: 640px; }
.opt-list { display: flex; flex-direction: column; gap: 3px; }
.opt-row { text-align: left; width: 100%; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border-dim); border-radius: 7px; color: var(--text); font-size: 14px; display: flex; align-items: center; gap: 9px; }
@media (hover: hover) { .opt-row:hover { border-color: var(--border); } }
.opt-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.opt-ico { width: 22px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.opt-ico img { width: 100%; height: 100%; object-fit: contain; }
.opt-chev { margin-left: auto; opacity: .45; font-size: 16px; }
.opt-row.on { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); }
.opt-row .anoint-spec-tag { margin-left: auto; }
/* God Shops + Realms reference overlays */
.gs-price { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-cur { color: var(--text-mute); font-weight: 600; font-size: 11px; }
.gs-cur-line { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px 0; }
.gs-price { display: inline-flex; align-items: center; gap: 3px; }
.gs-cur-ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.gs-cur-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.realm-crits { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.realm-crit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px 3px 4px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 999px; }
.realm-crit .rc-ico { width: 22px; height: 22px; object-fit: contain; }
/* roaming-race chip (race icon + name) */
.realm-race { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px 3px 4px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 999px; }
.realm-race img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
/* category tag on a realm creature chip: Roaming / Encounter / God Shop */
.realm-cat { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; border-radius: 999px; padding: 1px 6px; }
.realm-cat.cat-roaming { color: var(--good); background: rgba(0,0,0,.28); }
.realm-cat.cat-encounter { color: var(--accent2); background: rgba(154,123,214,.16); }
.realm-cat.cat-godshop { color: var(--accent); background: rgba(201,162,75,.16); }
/* Realms — stepped list rows + detail header */
.realm-list { display: flex; flex-direction: column; gap: 6px; }
.realm-row { text-align: left; width: 100%; padding: 6px 12px 6px 6px; background: var(--surface);
  border: 1px solid var(--border-dim); border-radius: 8px; color: var(--text); font-size: 14px;
  display: flex; align-items: center; gap: 9px; cursor: pointer; }
@media (hover: hover) { .realm-row:hover { border-color: var(--accent2); } }
.realm-icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.realm-icon img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.realm-row-name { font-weight: 600; }
.realm-row .anoint-spec-tag { margin-left: auto; }
.realm-row .opt-chev { margin-left: 6px; opacity: .45; font-size: 16px; }
.realm-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.realm-icon-lg { flex: 0 0 auto; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2); border: 1px solid var(--border-dim); border-radius: 10px; }
.realm-icon-lg img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.realm-icon-lg.swap { cursor: pointer; transition: border-color .1s, background .1s; }
@media (hover: hover) { .realm-icon-lg.swap:hover { border-color: var(--accent2); background: rgba(154,123,214,.12); } }
/* Riddle Dwarf — fast trivia lookup */
.riddle-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.riddle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 7px; }
.riddle-q { font-weight: 600; min-width: 0; }
.riddle-a { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.riddle-a img { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; }
/* Glossary — buff/debuff/minion reference rows */
.gloss-row { border: 1px solid var(--border-dim); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: var(--surface); }
.gloss-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.gloss-head b { flex: 1; min-width: 0; }
.gloss-icon { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.riddle-hint { color: var(--text-dim); padding: 12px; line-height: 1.5; }
.riddle-hint b { color: var(--accent); }
.riddle-hint ul { margin: 8px 0 0; padding-left: 18px; }
/* compact popover anchored top-right (non-obtrusive; transparent backdrop just captures click-outside) */
.riddle-backdrop { background: transparent; align-items: flex-start; justify-content: flex-end; padding: 0; }
.riddle-pop { width: 380px; max-width: calc(100vw - 20px); height: auto; max-height: 80vh; margin: 56px 10px 0 0;
  display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--accent2);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden; }
.riddle-pop-head { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border-dim); }
.riddle-pop-title { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.riddle-pop-head .ovl-search { flex: 1; min-width: 0; }
.riddle-pop-body { overflow-y: auto; padding: 10px; }
.tb-btn.tb-riddle { width: 32px; height: 32px; padding: 0; overflow: hidden; flex: 0 0 auto; }
.tb-btn.tb-riddle img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
/* realm objects — interactable world objects: icon · name ×count · rank-0 base interaction */
.realm-objlist { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px; }
.realm-objrow { display: grid; grid-template-columns: 26px minmax(96px, 1fr) 1.3fr; gap: 8px; align-items: center;
  background: var(--surface); border-radius: 7px; padding: 5px 9px; font-size: 13px; }
.realm-objrow-name { color: var(--text); font-weight: 600; }
.realm-objrow-base { color: var(--text-dim); font-size: 12px; }
.realm-obj-ct { color: var(--text-mute); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.realm-obj-ico { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.realm-obj-ico img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }

/* favor-rank slider + common-bonuses toggle (realm detail & compare) */
.fav-slider { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.fav-slider-lbl { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.fav-slider-lbl b { color: var(--accent); font-variant-numeric: tabular-nums; }
.fav-range { flex: 1; accent-color: var(--accent); height: 20px; cursor: pointer; }
.fav-common { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin: 0 0 8px; cursor: pointer; }
.fav-common input { accent-color: var(--accent); }
/* Compare rank-source control (same-rank slider vs per-realm "My ranks") + Customize button */
.fav-rankmode { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.fav-editbtn { font-size: 12px; white-space: nowrap; }
.rcmp-rk { font-size: 10px; font-weight: 800; color: var(--accent); background: rgba(201,162,75,.16); border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; }
/* Customize favor ranks editor */
.frank-list { display: flex; flex-direction: column; gap: 4px; }
.frank-row { display: grid; grid-template-columns: 34px 1fr 68px; gap: 10px; align-items: center;
  background: var(--surface); border-radius: 7px; padding: 5px 10px; }
.frank-row .realm-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.frank-row .realm-icon img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.frank-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-size: 13px; }
.frank-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.frank-input { width: 100%; background: var(--bg2); border: 1px solid var(--border-dim); border-radius: 6px;
  color: var(--text); font-size: 14px; text-align: center; padding: 6px 4px; font-variant-numeric: tabular-nums; }
.frank-input:focus { border-color: var(--accent); outline: none; }
/* realm outcome profile (detail) — one static row per Favor_MTX column: name · magnitude bar · value */
.rcat-list { display: flex; flex-direction: column; gap: 4px; }
.rcat-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1fr 46px; gap: 10px; align-items: center;
  background: var(--surface); border-radius: 7px; padding: 7px 10px; }
.rcat-row.rcat-empty { opacity: .38; }
.rcat-row.rcat-generic { grid-template-columns: 1fr auto; }
.rcat-name { font-size: 13px; color: var(--text); font-weight: 600; }
.rcat-mag { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.rcat-mag > i { display: block; height: 100%; background: var(--accent); opacity: .6; border-radius: 3px; transition: width .12s ease; }
.rcat-val { text-align: right; font-size: 12px; font-weight: 700; color: var(--accent2); font-variant-numeric: tabular-nums; min-width: 34px; }
.rcat-val.rcat-val-wide { min-width: 52px; color: var(--text); }
/* LIST view — the favor reward track as a rank→effect ladder */
.fav-tiers { display: flex; flex-direction: column; gap: 3px; }
.fav-tier { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline;
  background: var(--surface); border-radius: 6px; padding: 5px 10px; font-size: 12.5px; }
.fav-tier-rk { text-align: right; font-weight: 800; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.fav-tier-eff { color: var(--text-dim); min-width: 0; }
.fav-tier-uniq { background: rgba(201,162,75,.10); border-left: 2px solid var(--accent); }
.fav-tier-uniq .fav-tier-rk { color: var(--accent); }
.fav-tier-uniq .fav-tier-eff { color: var(--text); }
.fav-tier-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  color: var(--accent); background: rgba(201,162,75,.16); border-radius: 4px; padding: 1px 5px; }

/* cross-realm compare — accordion per category; expand to a ranked bar list of realms */
.rcmp-list { display: flex; flex-direction: column; gap: 6px; }
.rcmp-grp .apx-sec-head.apx-cat { margin: 0; }   /* header hugs its own bars; rcmp-list gap separates groups */
.rcmp-cat { font-weight: 700; font-size: 13.5px; }
.rcmp-meta { margin-left: auto; color: var(--text-mute); font-size: 11px; text-align: right; white-space: nowrap; }
.rcmp-bars { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 4px; }
/* compare controls: padded away from the edges, toggles + slider centred, rows kept tight */
.rcmp-controls { flex: 0 0 auto; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-bottom: 1px solid var(--border-dim); }
.rcmp-controls .fav-slider { width: 100%; }
.rcmp-controls > .slot-sub { width: 100%; text-align: center; }
.rcmp-controls .fav-rankmode { margin: 0; justify-content: center; }
.rcmp-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 96px auto; gap: 10px; align-items: center;
  width: 100%; background: transparent; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit;
  padding: 3px 4px; border-radius: 5px; }
@media (hover: hover) { .rcmp-row:hover { background: var(--surface2); } }
.rcmp-realm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .rcat-row { grid-template-columns: 1fr 64px 42px; gap: 8px; }
  .rcat-row.rcat-generic { grid-template-columns: 1fr auto; }
  .rcmp-row { grid-template-columns: 1fr 60px auto; gap: 7px; }
  .realm-objrow { grid-template-columns: 24px 1fr; }
  .realm-objrow-base { grid-column: 1 / -1; padding-left: 32px; }
}
/* realm complex-interaction combination table */
.realm-combos { display: flex; flex-direction: column; gap: 3px; }
.rc-row { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: baseline; gap: 8px; font-size: 13px;
  padding: 4px 8px; background: var(--surface); border: 1px solid var(--border-dim); border-radius: 6px; }
.rc-combo { font-weight: 600; }
.rc-arrow { color: var(--text-mute); text-align: center; }
.rc-result { color: var(--accent); }

/* realm card tiles */
.card-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.card-tile { background: var(--surface); border: 1px solid var(--border-dim); border-left: 4px solid var(--cardcls); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.card-tile.lv0 { opacity: .58; }
.card-head { display: flex; gap: 10px; align-items: center; }
.card-art { position: relative; width: 52px; height: 78px; flex: 0 0 auto; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; }   /* 2:3 = the game's 80×120 card */
.card-art .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.card-art .card-crit { position: relative; width: 84%; height: 84%; object-fit: contain; }
.card-art .card-frame { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }   /* border over bg + creature (game draw order) */
.card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-title b { font-size: 15px; }
/* "n / n / n" — cards needed per tier; active tiers highlighted by the current level */
.card-tiers { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; margin-top: -2px; }
.card-tiers .ct-seg { min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 5px; color: var(--text-mute); background: var(--bg2); border: 1px solid var(--border-dim); }
.card-tiers .ct-seg.on { color: #fff; background: var(--cardcls); border-color: var(--cardcls); }
.card-tile.cls-life .card-tiers .ct-seg.on { color: #150e26; }   /* Life is light gold → keep dark text */
.card-tiers .ct-sep { color: var(--text-mute); font-weight: 400; }
.card-effects { display: flex; flex-direction: column; gap: 4px; }
.card-effect { font-size: 11.5px; line-height: 1.35; padding: 5px 8px; border-radius: 6px; background: var(--bg2); display: flex; gap: 7px; align-items: flex-start; }
.card-effect .ce-tier { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--cardcls); color: #fff; font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.card-tile.cls-life .card-effect .ce-tier { color: #150e26; }   /* Life gold → dark text */
/* God Shops: locked centered god sprite header + per-item icons */
.gs-detail-head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-bottom: 1px solid var(--border-dim); }
.gs-god-sprite { height: 120px; display: flex; align-items: center; justify-content: center; }
.gs-god-sprite img { height: 120px; width: auto; object-fit: contain; image-rendering: pixelated; }
.gs-god-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
/* Web only: the god-list creature sprites read too small (~half the tile) — larger tiles + near-flush sprite */
@media (min-width: 601px) {
  .gs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gs-grid .pick-tile .pt-sprite img { padding: 2%; }
}
/* Guild list is always the 5 guilds: a row of 3 over an offset row of 2 (each tile spans 2 of 6 columns; 4 and 5 start
   one column in, so they sit in the gaps of the row above) */
.gs-grid.guild-grid { grid-template-columns: repeat(6, minmax(0, 52px)); justify-content: center; gap: 12px; padding-top: 6px; }
.guild-grid .pick-tile { grid-column: span 2; }
.guild-grid .pick-tile:nth-child(4) { grid-column: 2 / span 2; }
.guild-grid .pick-tile:nth-child(5) { grid-column: 4 / span 2; }
@media (min-width: 601px) { .gs-grid.guild-grid { grid-template-columns: repeat(6, minmax(0, 82px)); gap: 20px; } }
.gs-item-ico { flex: 0 0 auto; align-self: center; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border-dim); border-radius: 8px; overflow: hidden; }
.gs-item-ico img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.gs-item-ico .crit-face { width: 100%; height: 100%; }
.gs-item-ico.empty { background: none; border-color: transparent; }
/* shop rows: name / chips / price centred vertically in the row (not pinned to the top like perk rows) */
.perk-line.gs-line { align-items: center; }
.gs-line .perk-line-body { align-self: center; justify-content: center; }
.gs-line .perk-line-head { align-items: center; }
.gs-line .perk-line-meta { margin-top: 0; padding-top: 0; }
.card-effect.off { opacity: .38; }
.card-effect.off .ce-tier { background: var(--border-dim); }
.card-level { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: auto; padding-top: 2px; }
.lvl-btn { width: 30px; height: 30px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--border-dim); color: var(--text); font-size: 18px; font-weight: 700; }
.lvl-btn:disabled { opacity: .3; }
.lvl-badge { min-width: 52px; text-align: center; font-weight: 700; color: var(--accent); }

/* nether stones — structured builder + gem icons */
.nether-form { width: 340px; }
.nf-row { display: flex; gap: 6px; margin-bottom: 8px; }
.gem-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gem-choice { width: 42px; height: 42px; padding: 3px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border-dim); }
.gem-choice.on { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); }
.gem-choice img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.np-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.np-chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); font-size: 12px; }
.np-chip b { cursor: pointer; color: var(--bad); }
.np-builder { background: var(--surface); border: 1px solid var(--accent2); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.np-step { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-lbl { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .5px; width: 50px; }
.np-select { background: var(--bg); color: var(--text); border: 1px solid var(--border-dim); border-radius: 7px; padding: 6px 8px; }
/* manual %-entry field inside a property slot — fit the box, no clip, clean dark-theme focus */
.np-wrap { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }
.np-pct { font-size: 11px; color: var(--text-dim); }
.np-num {
  width: 100%; min-width: 0; max-width: 46px; text-align: center;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 4px 4px; font-size: 12px;
  -moz-appearance: textfield; appearance: textfield;
}
.np-num::-webkit-outer-spin-button, .np-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.np-num:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(154,123,214,.4); }
/* nether spell trigger selector */
.np-trigger {
  max-width: 100%; min-width: 0; text-align: center; font-size: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 3px 2px;
}
.np-trigger:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(154,123,214,.4); }
/* nether stone info panel (effects shown on selection, one row each) */
.ns-info-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ns-info-icon { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ns-info-icon img { width: 100%; height: 100%; object-fit: contain; }
.ns-info-actions { display: flex; gap: 6px; margin-top: 12px; }
.ns-info-actions .slot-mini { flex: 1; }
/* info panels (right side) — centered header + actions across all overlays */
.ns-info-head { justify-content: center; }
.ns-info-actions { justify-content: center; }
.ovl-right .section-label { text-align: center; }
.card-tile.locked .card-level { opacity: .5; }   /* apply-all mode: per-card steppers are inert */
/* Tag Synergy — collapsible group per shared tag; each effect shows its description + owner */
.syn-list { display: flex; flex-direction: column; gap: 10px; }
.syn-group { border: 1px solid var(--border-dim); border-radius: 8px; overflow: hidden; scroll-margin-top: 6px; }
.syn-tag { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 10px; background: var(--surface2); border-bottom: 1px solid var(--border-dim); border-radius: 0; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .syn-tag:hover { background: var(--surface3); } }
.syn-group.collapsed .syn-tag { border-bottom: 0; }
.syn-tag b { font-size: 14px; }
.syn-tag .syn-count { flex: 0 0 auto; font-weight: 800; color: var(--cap); }
.syn-tag .opt-chev { margin-left: auto; opacity: .55; font-size: 12px; }
.syn-tag .syn-caret { flex: 0 0 auto; opacity: .55; font-size: 11px; margin-left: 4px; }
/* jump-link bar — click a chip to expand + scroll to that tag group */
/* synergy list: a sleek Collapse-all + quick-nav dropdown (replaces the old jump-chip row) */
.syn-navbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-dim); }
.syn-nav { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border-dim); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
@media (hover: hover) { .syn-nav:hover { border-color: var(--accent2); } }
/* shared select styling for native quick-nav dropdowns (synergy + threats) */
select.app-select { background: var(--surface); border: 1px solid var(--border-dim); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
@media (hover: hover) { select.app-select:hover { border-color: var(--accent2); } }
.syn-effs { display: flex; flex-direction: column; }
.syn-eff { padding: 7px 10px; border-top: 1px solid var(--border-dim); text-align: left; }
.syn-eff:first-child { border-top: 0; }
.syn-eff-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.syn-owner { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-dim); color: var(--text-dim); }
.syn-owner.k-spec { border-color: var(--accent); color: var(--cap); }
.syn-owner.k-anoint { border-color: var(--accent2); color: var(--text); }
.syn-owner.k-crea { border-color: var(--border-dim); color: var(--text-dim); }
.syn-owner.k-spell { border-color: #3a6ea5; color: #9fd0ff; }
/* creature detail left panel — just a centered sprite + class·race */
.cd-left { width: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.cd-sprite { width: 130px; height: 130px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; }
.cd-sprite img { width: 100%; height: 100%; object-fit: contain; }
/* party navigation — discrete chevrons; below the sprite on web, flanking it on mobile */
.cd-sprite-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cd-chev { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 24px; line-height: 1;
  padding: 6px 10px; border-radius: 8px; transition: color .1s, background .1s; }
@media (hover: hover) { .cd-chev:hover { color: var(--text); background: rgba(255,255,255,.07); } }
.cd-chev.flank { display: none; }               /* mobile-only; hidden on web */
.cd-nav-below { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
.cd-nav-pos { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; min-width: 34px; }
.np-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* artifact library + builder icons */
.lib-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.lib-tile { background: var(--surface); border: 1px solid var(--border-dim); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.lib-tile.equipped, .lib-tile.selected { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); }
.lib-tile.selected { cursor: pointer; }
.lib-tile.flash { border-color: var(--good); box-shadow: inset 0 0 0 2px var(--good); transition: box-shadow .2s; }
.lib-icon { width: 60px; height: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lib-icon img { width: 100%; height: 100%; object-fit: contain; }
/* selected-build preview panel: emblem + anoint icons row, then a 2×3 party grid */
.build-info .bi-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bi-emblem { width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.bi-emblem img { width: 100%; height: 100%; object-fit: contain; }
.bi-anoints { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bi-anoint { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border-dim); border-radius: 5px; overflow: hidden; }
.bi-anoint img { width: 100%; height: 100%; object-fit: contain; }
.bi-crits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bi-crit { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 8px; overflow: hidden; }
.bi-crit.empty { opacity: .35; }
.bi-crit img, .bi-crit .crit-face { width: 100%; height: 100%; object-fit: contain; }
.lib-name { font-weight: 600; font-size: 13px; }
.lib-sub { font-size: 11px; color: var(--text-dim); }
.lib-actions { display: flex; gap: 4px; margin-top: 2px; }
.slot-mini.danger { color: var(--bad); border-color: #6b2f2f; flex: 0 0 auto; }
.chip.danger { border-color: #6b2f2f; color: var(--bad); }
.prop-ico { width: 22px; height: 22px; flex: 0 0 auto; display: flex; }
.prop-ico img { width: 100%; height: 100%; object-fit: contain; }
.hdr-ico { width: 30px; height: 30px; display: flex; flex: 0 0 auto; }
.hdr-ico img { width: 100%; height: 100%; object-fit: contain; }
.name-field { font-weight: 700; }
.build-icon-pick {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--surface2); border: 1px solid var(--border-dim); border-radius: 10px;
  color: var(--text); cursor: pointer;
}
@media (hover: hover) { .build-icon-pick:hover { border-color: var(--accent2); } }
.build-icon-pick > img, .build-icon-pick > .slot-empty-icon { width: 48px; height: 48px; object-fit: contain; }
.build-icon-pick .slot-empty-icon { font-size: 26px; }
/* build creation (save form): a big centred sprite box + name, with a large animated preview panel */
.build-create { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 16px; min-height: 100%; }
.build-sprite-box { width: 168px; height: 168px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px dashed var(--border); border-radius: 18px; cursor: pointer; transition: border-color .12s; }
@media (hover: hover) { .build-sprite-box:hover { border-color: var(--accent2); background: var(--surface2); } }
.build-sprite-box > img { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; }
.build-sprite-box .slot-empty-icon { font-size: 60px; color: var(--accent2); }
.build-name { flex: 0 0 auto; max-width: 340px; width: 100%; text-align: center; font-weight: 700; font-size: 15px; }
.build-preview { display: flex; align-items: center; justify-content: center; }
.build-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.build-hero > img { width: 208px; height: 208px; object-fit: contain; image-rendering: pixelated; }
.build-hero.empty .slot-empty-icon { font-size: 72px; color: var(--border); }

/* artifact builder wizard — step 1 has EXACTLY 5 primary types, so they fill the step.
   mobile: full-width horizontal rows. web: a centered row of large containers with breathing room. */
.art-type-grid { display: flex; flex-direction: column; gap: 12px; }
.art-type-tile { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 12px; cursor: pointer; text-align: left; }
@media (hover: hover) { .art-type-tile:hover { border-color: var(--border); } }
.art-type-tile.chosen { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); background: rgba(154,123,214,.12); }
.att-ico { width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.att-ico img { width: 100%; height: 100%; object-fit: contain; }
.att-name { font-weight: 700; font-size: 16px; flex: 1; }
.att-stat { font-size: 13px; color: var(--text-dim); flex: 0 0 auto; }
@media (min-width: 700px) {
  .art-type-grid { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch;
    gap: 20px; max-width: 1100px; margin: 8px auto; padding: 0 8px; }
  .art-type-tile { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center;
    justify-content: center; gap: 12px; padding: 28px 14px; }
  .art-type-tile .att-ico { width: 68px; height: 68px; }
  .art-type-tile .att-name { flex: 0 0 auto; font-size: 17px; }
  .art-type-tile .att-stat { flex: 0 0 auto; }
}
.art-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.art-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 9px; text-align: center; min-height: 78px; justify-content: center; }
.art-slot.primary { border-color: var(--accent2); }
.art-slot.add { cursor: pointer; border-style: dashed; color: var(--accent2); }
@media (hover: hover) { .art-slot.add:hover { border-color: var(--accent2); } }
.art-slot.locked { opacity: .4; border-style: dashed; filter: grayscale(1); cursor: default; }
.as-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.as-ico img { width: 100%; height: 100%; object-fit: contain; }
.as-ico.glyph { font-size: 22px; color: var(--accent2); }
.as-lab { font-size: 11px; font-weight: 600; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.as-sub { font-size: 10px; color: var(--text-dim); line-height: 1.1; max-height: 2.2em; overflow: hidden; }
.as-rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: var(--bad); font-size: 11px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.art-slot-group { margin-bottom: 12px; }
.art-slot-group .section-label { margin-bottom: 6px; }
.art-slot.picking { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); }
.art-addmenu { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.art-picker { margin-top: 12px; border-top: 1px solid var(--border-dim); padding-top: 8px; }
/* bounded, self-contained scroll for the inline slot pickers (fixes nested-scroll collapse) */
.art-pick-scroll { height: 44vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }   /* fixed so the builder picker doesn't resize with content */
/* spell-gem builder props step: name + boxes sit at natural height, the property picker fills the
   rest of the screen so the enchantment list uses the full column instead of a fixed sliver */
.sgb-top { flex: 0 0 auto; padding: 12px; overflow-y: auto; max-height: 55%; }
.sgb-top:not(.picking) { flex: 1 1 auto; max-height: none; }   /* no picker open → the whole column scrolls */
.sgb-picker { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-dim); }
.sgb-pick-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px; }
.art-picker .prop-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.art-picker .prop-ico img { width: 100%; height: 100%; object-fit: contain; }

/* artifact builder info panel (right) — picker list / item preview / live bonus */
.ovl-right.art-side { display: flex; flex-direction: column; overflow: hidden; }
/* Live-bonus view has no fixed head → it gets its own scroller (the panel itself stays overflow:hidden) */
.art-side .art-side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.art-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex: 0 0 auto; }
.art-side-head b { font-size: 13px; }
/* the side-panel search must NOT inherit .ovl-search's flex:1 (in this column-flex panel that stretched it vertically) */
.art-side .ovl-search.art-side-search { flex: 0 0 auto; width: 100%; max-width: none; margin-bottom: 8px; }
.art-side-filter { flex: 0 0 auto; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.art-side-filter .seg { display: inline-flex; flex-wrap: wrap; }
/* shared spell picker bar (Spell Gem / Artifact / Nether Stone wizards) — one compact look everywhere, so it also
   fits the narrow artifact side panel and phones: row 1 search · ＋ Filter · ★, row 2 Target ▾ · Class ▾ · sort */
.ovl-filterbar.spf-row .ovl-search { max-width: none; }
.ovl-filterbar.sg-dropbar { flex-wrap: nowrap; gap: 4px; }
.sg-dropbar select.app-select { flex: 0 1 auto; min-width: 0; max-width: 118px; padding: 4px 4px; font-size: 12px; }
.sg-dropbar select.app-select.on { border-color: var(--accent2); color: var(--text); background: var(--surface3); }
.sg-dropbar .sg-sort-gap { flex: 1 1 2px; }
.sg-dropbar .seg { flex: 0 0 auto; }
.sg-dropbar .seg-btn { padding: 4px 7px; font-size: 11px; }
.art-side .ovl-filterbar { padding-left: 0; padding-right: 0; }
.sg-sort-sec { margin: 10px 0 6px; }
.prop-metatag.clash { color: var(--bad); border-color: var(--bad); }
.art-side-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.art-side .prop-row .prop-ico { width: 20px; height: 20px; flex: 0 0 auto; }
.art-side .prop-row .prop-ico img { width: 100%; height: 100%; object-fit: contain; }
/* fill the side panel's height so a long preview (e.g. a nether stone's full Bonuses view)
   scrolls inside .art-pv-body instead of being clipped, with the header + confirm pinned. */
.art-pv { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.art-pv-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex: 0 0 auto; }
.art-pv-top .as-ico { width: 40px; height: 40px; }
.art-pv-name { font-weight: 700; font-size: 15px; line-height: 1.15; }
.art-pv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.art-pv .btn-confirm { flex: 0 0 auto; }
.art-pv-line { font-size: 13px; padding: 2px 0; }
.art-pv-line b { color: #9fd0ff; }
.art-pv .btn-confirm { width: 100%; }
.btn-confirm.danger-confirm { background: var(--bad); color: #1a1230; }

/* creature wizard: personality + scroll customization (right panel) */
.crea-customize { margin-top: 14px; border-top: 1px solid var(--border-dim); padding-top: 10px; text-align: left; }
/* standalone (step 3 center panel): no divider — it's the primary content, not an appendage */
.crea-customize.standalone { margin-top: 0; border-top: none; padding-top: 0; max-width: 420px; }
.cc-persbar { display: flex; flex-wrap: wrap; gap: 6px; }
.scroll-grid { display: flex; flex-direction: column; gap: 4px; }
.scroll-row { display: grid; grid-template-columns: 1fr 26px 44px 26px; align-items: center; gap: 6px; }
.scroll-lbl { font-size: 12px; color: var(--text-dim); }
.scroll-val { text-align: center; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.scroll-row .perk-step { min-width: 26px; }
/* personality growth markers in the stat table */
.growth { font-weight: 800; font-size: 12px; }
.growth.up { color: var(--good); }
.growth.down { color: var(--bad); }
/* personality picker option sub-label */
.opt-row .opt-sub { margin-left: auto; font-size: 11px; color: var(--text-dim); }

/* "No fusion" tile in the fusion step */
.pick-tile.nofuse .pt-sprite { color: var(--text-mute); }
.nofuse-glyph { font-size: 34px; color: var(--text-mute); }
.pick-tile.nofuse.selected .nofuse-glyph { color: var(--accent2); }

/* mobile overrides for v2 components */
@media (max-width: 600px) {
  .cd-left { width: auto; }   /* full-width when stacked on top so the sprite centers */
  .cd-chev.flank { display: block; }   /* flank the sprite on mobile */
  .cd-nav-below { display: none; }      /* … and drop the below-sprite nav */
  .lib-info { flex: 0 0 45vh; height: 45vh; max-height: 45vh; }   /* roomier bottom info panel */
  .spec-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }        /* ≥5 per row */
  .spec-pick .pt-name { font-size: 9px; line-height: 1.05; }
  .spec-right, .nether-form { width: auto; }
  .card-grid { grid-template-columns: 1fr; }
  .lib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* saved builds: 4 per row on phones */
  /* equipment overlays (artifacts / spell gems / nether): 6 per row on phones */
  .equip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .equip-grid .pick-tile .pt-name { font-size: 9px; }
  /* shorter artifact/slot tiles on mobile so the wizard fits without scrolling */
  .art-slot { min-height: 58px; padding: 6px 4px; }
  .art-slot .as-ico { width: 26px; height: 26px; }
  .art-slot .as-ico.glyph { font-size: 18px; }
  .art-slot .as-lab { font-size: 10px; }
  .art-slot-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
  /* artifact wizard: slot groups packed 4 slots per row — [Primary|Stat×3] [Trick×2|Trait|Spell] [Nether] */
  .art-slot-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
  .art-slot-groups .art-slot-group { grid-column: span var(--n, 1); min-width: 0; margin-bottom: 10px; display: flex; flex-direction: column; }
  .art-slot-groups .art-slot-grid { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); flex: 1; }   /* stretch → equal heights across a row */
  .art-slot-groups .section-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }
  .art-type-tile { padding: 13px 14px; gap: 13px; }
  .att-ico { width: 46px; height: 46px; }
  .att-name { font-size: 15px; }
  .art-pick-scroll { height: 38vh; }
  .ovl-right.art-side { flex: 0 0 50vh; height: 50vh; max-height: 50vh; }   /* roomier artifact side panel */
  /* slots step: every slot on ONE locked row that scrolls sideways; the picker / preview / live bonus fills the rest */
  .artb-slots { flex: 0 0 auto; }
  .artb-slots .ovl-center-scroll { flex: 0 0 auto; overflow: visible; padding: 8px 0 6px; }
  .artb-slots .art-slot-groups { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 0 10px 4px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .artb-slots .art-slot-groups::-webkit-scrollbar { display: none; }
  .artb-slots .art-slot-groups .art-slot-group { flex: 0 0 auto; margin-bottom: 0; }
  .artb-slots .art-slot-groups .art-slot-grid { grid-template-columns: repeat(var(--n, 1), 68px); gap: 5px; }
  .artb-slots .art-slot { min-height: 64px; }
  .artb-slots .art-slot-groups .section-label { margin: 0 2px 4px; font-size: 10px; }
  .artb-slots + .ovl-right.art-side { flex: 1 1 auto; height: auto; max-height: none; }
}

.ns-issue { color: var(--bad); font-size: 12px; }
.art-addmenu .chip:disabled { opacity: .4; cursor: not-allowed; }

/* fusion colour step — the game's 6 options in its 2×3 layout */
.fuse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 12px; justify-content: center; padding: 12px 0; }
.fuse-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-dim); border-radius: 9px; transition: border-color .1s; }
@media (hover: hover) { .fuse-cell:hover { border-color: var(--accent2); } }
.fuse-cell.on { border-color: var(--accent2); box-shadow: inset 0 0 0 2px var(--accent2); background: rgba(154,123,214,.2); }
.fuse-cell img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* spell gem builder: slots past the gem level's slot count */
.art-slot.locked { opacity: .45; border-style: dashed; cursor: default; }
.art-slot.over { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }

/* creature spell-slot header (Spells page + equip list from a creature): class-coloured circle per equipped
   spell, outlined circle per empty slot */
.overlay-header.spells-hdr { gap: 10px; }
.spells-hdr-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spell-dots { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.sdot { width: 13px; height: 13px; border-radius: 50%; background: var(--dc); border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); flex: 0 0 auto; }
.sdot.empty { background: transparent; border: 1.5px dashed var(--text-mute); box-shadow: none; }
.spell-page-list { display: flex; flex-direction: column; gap: 10px; }
.spell-page-tile .art-spellcard-head { flex-wrap: wrap; }
.spell-page-tile .spt-tags { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.spell-page-tile .rank-badge { min-width: 0; }
.spell-page-tile .spt-props { margin-top: 6px; }

/* build import / export pop-out (Riddle Dwarf style) */
.bio-pop { width: 460px; }
.bio-tabs .seg-btn { padding: 4px 10px; font-size: 12px; }
.bio-gap { flex: 1 1 auto; }
.bio-body { display: flex; flex-direction: column; padding: 10px; min-height: 0; }
.bio-text { width: 100%; max-width: none; height: 44vh; min-height: 180px; resize: vertical; box-sizing: border-box;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.4; white-space: pre; overflow: auto;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-dim); border-radius: 8px; padding: 10px; }
.bio-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border-top: 1px solid var(--border-dim); }
.bio-result { font-size: 13px; }
.bio-warn { margin: 10px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 12px; }
.bio-warn li { margin: 3px 0; }

/* Projects overlay */
.proj-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.proj-item { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border: 1px solid var(--border-dim); border-radius: 6px; font-size: 12px; background: var(--surface); }
.proj-item img { width: 24px; height: 24px; image-rendering: pixelated; }
.proj-item b { color: var(--accent2); font-weight: 600; }
.proj-reqs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ── inline name icons: spec emblem / class icon / False God icon in front of a listed name ── */
.tag-ico { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; flex: 0 0 auto; }
.tag-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.spec-tag { display: inline-flex; align-items: center; }
.spec-tag .tag-ico { width: 14px; height: 14px; margin-right: 3px; }
.facet .tag-ico { width: 15px; height: 15px; margin: 0 3px 0 2px; }
.lib-sub { display: flex; align-items: center; justify-content: center; gap: 0; }

/* ── saved-library header bar (Artifacts / Nether Stones / Spell Gems): filters left, sort right ── */
.lib-bar { flex-wrap: wrap; row-gap: 6px; }
.lib-bar .sg-sort-gap { flex: 1 1 auto; }

/* ── realm page → Interactions: one card per object (sprite · name · ×count · rank-0 interaction) + its favor tiers ── */
.realm-tabs { margin: 10px 0 8px; }
.robj-cards { display: flex; flex-direction: column; gap: 8px; }
/* one container per realm Object: header row, then a bordered row per effect (base = favor 0, then each tier) */
.robj-card { background: linear-gradient(var(--surface), var(--bg2)); border: 1px solid rgba(154,123,214,.45); border-radius: var(--radius); overflow: hidden; }
.robj-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13.5px;
  background: var(--surface3); border-bottom: 1px solid rgba(154,123,214,.35); }
.robj-tiers { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text); }
.robj-tier { display: flex; gap: 10px; align-items: baseline; padding: 5px 10px; }
.robj-tier + .robj-tier { border-top: 1px solid rgba(154,123,214,.2); }
.robj-tier .fav-tier-rk { flex: 0 0 auto; min-width: 26px; text-align: center; }

/* ── Nether Realm helper (Faucet / Mimic Mike) ─────────────────────────────── */
.nh-head { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border-dim); background: linear-gradient(#241a48, var(--bg2)); }
.nh-valves { display: flex; gap: 6px; }
.nh-valve { width: 52px; height: 52px; padding: 4px; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border-dim); border-radius: 8px; cursor: pointer; }
@media (hover: hover) { .nh-valve:hover { border-color: var(--border); } }
.nh-valve.on { border-color: var(--border); background: rgba(201,162,75,.14); }
.nh-valve img, .nh-chest img, .nh-row-valves img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.nh-arrow { color: var(--text-mute); font-size: 18px; }
/* fixed-size result column + a 2-line label box, so a longer reward never shifts the valves/chest */
.nh-result { flex: 0 0 200px; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; }
.nh-result b { display: flex; align-items: flex-start; justify-content: center; min-height: calc(2 * 1.3em); line-height: 1.3; }
.nh-result.mimic b { color: var(--bad); }
.nh-chest { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.nh-chest.lg { width: 64px; height: 64px; }
.nh-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--bg2)); overflow: hidden; }
.nh-row, .nh-mm-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; width: 100%;
  background: transparent; border: 0; color: var(--text); font: inherit; text-align: left; }
.nh-row + .nh-row, .nh-mm-row + .nh-mm-row { border-top: 1px solid var(--border-dim); }
.nh-row { cursor: pointer; }
@media (hover: hover) { .nh-row:hover { background: rgba(154,123,214,.08); } }
.nh-row.on { background: rgba(201,162,75,.14); box-shadow: inset 3px 0 0 var(--border); }
.nh-row.empty { color: var(--text-mute); }
.nh-row.mimic .nh-reward { color: var(--bad); }
.nh-row-valves { flex: 0 0 auto; display: flex; gap: 2px; }
.nh-row-valves img { width: 22px; height: 22px; }
.nh-reward { flex: 1; min-width: 0; font-size: 13px; }
.nh-mm-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: var(--surface2); border: 1px solid var(--border-dim); border-radius: 8px; }
.nh-pct { flex: 0 0 auto; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .nh-valve { width: 44px; height: 44px; }
  .nh-arrow { display: none; }
  .nh-result { flex-basis: 100%; width: 100%; }
  .nh-row-valves img { width: 18px; height: 18px; }
}
/* off valves read dimmer than on ones (the two sprites differ only by handle angle) */
.nh-valve img.nh-off, .nh-row-valves img.nh-off { opacity: .4; }
/* shared-build link prompt */
.share-crits { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.share-name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.share-name input { flex: 1; min-width: 0; }
.share-note { margin-top: 8px; }
.share-btns { display: flex; gap: 8px; flex-wrap: nowrap; }
/* spells page: reorder equipped gems */
.spt-move { display: inline-flex; gap: 2px; margin-right: 2px; }
.spt-mv { width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--border-dim); background: var(--surface2);
  color: var(--text); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
@media (hover: hover) { .spt-mv:hover:not(:disabled) { border-color: var(--border); } }
.spt-mv:disabled { opacity: .3; cursor: default; }
/* glossary: resurrection order */
.res-line .res-n { align-self: center; }
.res-n { flex: 0 0 28px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); font-size: 15px; }
.res-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.res-rule .res-n { font-size: 14px; }
/* enemy-only resurrection sources (boss traits with no player source, realm properties): whole row tinted red */
.res-line.res-enemy { background: linear-gradient(90deg, rgba(224,107,107,.20), rgba(224,107,107,.08)); border-color: rgba(224,107,107,.45); }
.res-note { margin-top: 3px; font-style: italic; color: #ffb3b3; }
.res-line.res-block { border-style: dashed; }
.res-line.res-block .res-n { color: var(--bad); font-size: 14px; }
.res-block-tag { color: var(--bad); border-color: var(--bad); }
.res-flow-note { margin: 6px 0 2px; text-align: left; line-height: 1.45; }
/* RI/Runes: rewards bonus as a small chip at the top right of the row */
.thr-reward { margin-left: auto; flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap;
  background: rgba(201,162,75,.12); border: 1px solid rgba(201,162,75,.45); border-radius: 6px; padding: 1px 6px; }
/* realm creature chips: colour-coded source instead of a type label (Roaming = plain chip) */
.realm-race.cat-encounter { background: var(--surface3); border-color: rgba(154,123,214,.55); }
.realm-race.cat-godshop { background: rgba(201,162,75,.12); border-color: var(--accent); }
.rc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-legend { display: inline-flex; gap: 4px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.rc-key { font-size: 10px; font-weight: 600; color: var(--text-dim); padding: 0 6px; border-radius: 999px; border: 1px solid var(--border-dim); background: var(--surface); }
.rc-key.cat-encounter { background: var(--surface3); border-color: rgba(154,123,214,.55); }
.rc-key.cat-godshop { background: rgba(201,162,75,.12); border-color: var(--accent); }
/* phones: library + spell filter/sort bars stay on ONE row — tighter controls instead of wrapping */
@media (max-width: 480px) {
  .lib-bar { flex-wrap: nowrap; gap: 4px; padding-left: 8px; padding-right: 8px; }
  .lib-bar .facet { padding: 4px 8px; font-size: 12px; flex: 0 0 auto; }
  .lib-bar .app-select { padding: 4px; font-size: 12px; min-width: 0; }
  .lib-bar .seg-btn, .sg-dropbar .seg-btn { padding: 4px 5px; font-size: 11px; }
  .lib-bar .sg-sort-gap { flex: 1 1 0; }
  .sg-dropbar select.app-select { max-width: 76px; }
}
@media (max-width: 360px) { .lib-bar .seg-btn, .sg-dropbar .seg-btn { padding: 4px 3px; } .lib-bar .facet { padding: 4px 6px; } }
.realm-race img + img { margin-left: -4px; }
/* glossary: Nether Stone drop breakpoints */
.nd-wrap { margin: 8px 0 4px; }
.nd-diff { margin-bottom: 8px; }
.nd-table { border: 1px solid rgba(154,123,214,.45); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.nd-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; align-items: center; padding: 7px 12px; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.nd-row + .nd-row { border-top: 1px solid rgba(154,123,214,.2); }
.nd-row span:not(:first-child) { text-align: right; }
.nd-hd { background: var(--surface3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.nd-pct { font-weight: 700; color: var(--accent); display: flex; align-items: baseline; gap: 8px; }
.nd-pct small { font-weight: 400; font-size: 11px; color: var(--text-mute); }
.nd-note { margin-top: 6px; }
.nd-row.ps-row { grid-template-columns: 1fr 52px 1.6fr; }
.nd-row.ps-row span { text-align: left; }
.nd-row.ps-row span:nth-child(2) { text-align: right; }
/* errata: Rodian Masters per realm */
.nd-row.mr-row { grid-template-columns: minmax(96px, 1fr) 2.4fr; align-items: start; }
.nd-row.mr-row span { text-align: left; }
.mr-realm { display: flex; align-items: center; gap: 6px; line-height: 1.25; }
.mr-realm img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.mr-pool { display: flex; flex-wrap: wrap; gap: 4px; }
.realm-race.mr-extra { border-style: dashed; border-color: var(--accent2); }
@media (max-width: 480px) { .nd-row.mr-row { grid-template-columns: 1fr; gap: 6px; } .nd-row.mr-row.nd-hd span:last-child { display: none; } }
/* glossary: start-of-battle steps (collapsible groups inside the section) */
.sob-intro { margin: 8px 0 6px; }
.sob-step { display: flex; align-items: center; gap: 6px; width: 100%; margin: 6px 0; padding: 7px 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface3);
  border: 1px solid rgba(154,123,214,.45); border-radius: 8px; }
@media (hover: hover) { .sob-step:hover { border-color: var(--accent2); } }
.sob-step + .perk-list { margin-bottom: 8px; }
.sob-mem-toggle { align-self: flex-start; margin-top: 4px; font-size: 11px; padding: 2px 8px; }
.sob-members { margin-top: 4px; padding-top: 0; }
/* start-of-battle: unnumbered marker row (where setup sorts the timeline) */
.sob-marker { background: var(--surface3); border: 1px dashed rgba(154,123,214,.55); }
.sob-marker .res-n { font-size: 16px; }

/* ── Bosses (Menu → Bosses + boss detail page) — mobile first ── */
.boss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.boss-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; background: var(--surface);
  border: 1px solid var(--border-dim); border-radius: 9px; cursor: pointer; transition: border-color .1s; }
@media (hover: hover) { .boss-tile:hover { border-color: var(--accent2); } }
.boss-tile .boss-formation { width: 100%; margin: 0; }
.boss-tile .pt-name { text-align: center; font-size: 13px; }
/* six trimmed battle frames tiled edge to edge into the whole creature (offsets are % of each 64x64 cell) */
.boss-formation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 288px); margin: 0 auto 12px; }
.boss-cell { position: relative; display: block; aspect-ratio: 1; padding: 0; margin: 0; border: 0; background: none; }
button.boss-cell { cursor: pointer; }
.boss-cell img { position: absolute; image-rendering: pixelated; }
button.boss-cell:focus-visible img { filter: brightness(1.25) drop-shadow(0 0 2px var(--accent2)); }
@media (hover: hover) { button.boss-cell:hover img { filter: brightness(1.25) drop-shadow(0 0 2px var(--accent2)); } }
.boss-threat { margin-bottom: 8px; border: 1px solid var(--bad); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.boss-threat-head { padding: 6px 10px; background: rgba(224,107,107,.16); font-weight: 700; font-size: 14px; }
.boss-threat-body { padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.boss-threat-body .boss-steps { padding-left: 16px; }
.boss-threat-fx, .boss-why { margin: 0; }
.boss-threat-cond { margin: 6px 0 0; }
.boss-why { margin-top: 6px; color: var(--text-dim); }
.boss-who { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; }
@media (hover: hover) { .boss-who:hover { text-decoration: underline; } }
.boss-when { color: var(--text-mute); }
.boss-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.boss-threats { margin-bottom: 12px; }
.boss-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border-dim);
  border-radius: 999px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; line-height: 1.4;
  vertical-align: middle; cursor: pointer; }
span.boss-chip { cursor: default; }
@media (hover: hover) { button.boss-chip:hover { border-color: var(--accent2); } }
.boss-chip.warn { border-color: var(--bad); color: var(--text); background: rgba(224,107,107,.12); }
.boss-chip.dim { color: var(--text-mute); border-style: dashed; }
.boss-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.boss-stats b { color: var(--text); }
.boss-unit { padding: 10px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border-dim);
  border-radius: var(--radius); scroll-margin-top: 8px; }
.boss-unit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.boss-unit-spr { width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.boss-unit-spr img { max-width: 100%; max-height: 100%; object-fit: contain; }
.boss-unit-name { font-size: 15px; }
.boss-sub { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.boss-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.boss-steps li { margin: 2px 0; }
.boss-spells { margin: 4px 0 8px; }
.boss-steps li.fx-clarify { list-style: none; margin-left: -18px; }
.boss-rune-group { margin-bottom: 8px; padding: 4px 10px 8px; border: 1px solid var(--border-dim); border-left: 3px solid var(--good);
  border-radius: var(--radius); background: var(--surface); }
.boss-rune-group.bad { border-left-color: var(--bad); }
.boss-rune { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px; }
.boss-rune-group .boss-why { font-size: 13px; line-height: 1.5; }
.boss-sub-bad { color: var(--bad); }
.boss-sub-good { color: var(--good); }
.boss-lore { margin: 4px 0 12px; }
.boss-dialog { font-style: italic; color: var(--text-dim); }
@media (min-width: 720px) {
  .boss-formation { width: min(100%, 384px); }
  .boss-steps { font-size: 13.5px; }
}

/* Bosses: Nether Bosses | False Gods | Gate of the Gods toggle (three long labels: tighter so it fits a 360px phone) */
.art-view-toggle.boss-types { gap: 10px; flex-wrap: wrap; }
.art-view-toggle.boss-types .av-tab { font-size: 11.5px; letter-spacing: .2px; }
.av-tab:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { .av-tab:disabled:hover { color: var(--text-mute); } }
/* Nether Boss tiles: one creature each, so a denser grid than the False Gods' formations */
.nb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 720px) { .nb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.nb-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: var(--surface);
  border: 1px solid var(--border-dim); border-radius: 9px; cursor: pointer; color: var(--text); font: inherit; transition: border-color .1s; }
@media (hover: hover) { .nb-tile:hover { border-color: var(--accent2); } }
.nb-tile-spr { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.nb-tile-spr img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.nb-tile-spr.duo { width: 100%; max-width: 128px; gap: 2px; }
.nb-tile-spr.duo img { max-width: 50%; }
.hdr-ico.duo { width: 62px; gap: 2px; }
.hdr-ico.duo img { width: 30px; }
.nb-tile .pt-name { text-align: center; font-size: 12px; line-height: 1.25; }
.nb-tiers { margin-top: 0; }
.boss-stat-grid { margin-bottom: 12px; }
.boss-unit .boss-stat-grid { margin-top: 8px; }
.boss-mat { padding: 8px 0; border-bottom: 1px solid var(--border-dim); }
.boss-mat-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
/* Gate of the Gods page: god portrait + difficulty table (scrolls sideways inside its box on a narrow phone, never the page) */
.gg-portrait { display: flex; justify-content: center; margin: 0 0 12px; }
.gg-portrait img { width: min(50%, 160px); height: auto; image-rendering: pixelated; }
.gg-portrait.duo { gap: 8px; }
.gg-portrait.duo img { width: min(42%, 150px); }
.boss-diff-wrap { overflow-x: auto; margin-bottom: 6px; }
.boss-diff { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.boss-diff th, .boss-diff td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--border-dim); white-space: nowrap; }
.boss-diff th:first-child, .boss-diff td:first-child { text-align: left; }
.boss-diff th { color: var(--text-mute); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.boss-diff-note { margin-bottom: 12px; }
.boss-rewards-art { margin-top: 6px; }
/* property that's legal on the spell but does nothing (Agate rounding to +0, Azurite on a no-damage/no-stat spell) */
.prop-metatag.nofx { color: var(--bad); border: 1px solid var(--bad); border-radius: 4px; padding: 0 4px; }
.art-slot .prop-metatag.nofx { margin: 2px 0 0; display: inline-block; }
.taxo-bar .facet { flex: 0 1 auto; min-width: 0; }   /* stacked taxonomy filter chips wrap onto new rows */
/* Planner: swap a creature with its neighbour — top-left corner, mirroring the ✕ */
.slot-move { position: absolute; top: 4px; left: 5px; z-index: 3; display: inline-flex; gap: 2px; }
.slot-move .spt-mv { width: 22px; height: 22px; font-size: 10px; }
.roster-identity .slot-move { top: -4px; left: -2px; }
@media (max-width: 560px) { .roster-identity .slot-move { top: 6px; left: 6px; } }
.slot .slot-move { left: 50%; transform: translateX(-50%); }   /* tiles: class/race badges own the top-left */
.no-anoint { color: var(--text-mute); font-size: 13px; line-height: 1; cursor: help; }   /* spec overlay: perk that can't be anointed */

/* ══ Landscape phone (short viewport — e.g. a phone clipped into a controller) — Planner first (#1) ══
   One screen = the whole party: slim top bar, Spec + Anointments as a compact strip, all 6 creature tiles in one
   row (grid view) or roster rows two-up with a smaller identity block. Other screens follow in a later pass. */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { padding: 2px 10px; }
  .topbar-title h1 { font-size: 14px; }
  .planning-main { padding: 8px 10px; }
  /* Spec + Anointments: one-line strip tiles (icon left of label + sub), same column width as the creature tiles */
  .home-top { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .spec-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center;
    justify-items: start; text-align: left; padding: 4px 8px; min-height: 44px; }
  .spec-tile-icon { grid-row: span 2; width: 30px; height: 30px; }
  .spec-tile-label, .spec-tile-sub { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spec-tile-sub { font-size: 10px; }
  .spec-tile-icon img.tile-empty-ico { width: 24px; height: 24px; }
  .spec-tile-icon img.tile-empty-ico.anoint-ph { width: 30px; height: 30px; }
  .spec-tile { grid-column: span 2; }   /* room for the label + sub (spec) and 5 perk icons (anointments) */
  .spec-tile:not(:has(.spec-tile-sub)) .spec-tile-label { grid-row: span 2; }   /* label alone → vertically centred */
  .anoint-tile .spec-tile-icon { width: auto; min-height: 0; }
  .anoint-tile .anoint-tile-icons { flex-wrap: nowrap; }
  /* grid view: the full party in one row */
  .party-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .slot { min-height: 0; padding: 5px; gap: 4px; }
  .slot .tile-badges { top: 22px; }
  .tile-badge { width: 16px; height: 16px; }
  .slot-name { font-size: 11px; }
  .slot-actions { gap: 3px; }
  .slot-mini { font-size: 10px; padding: 3px 2px; }
  /* roster view: two rows side by side, compact identity column */
  .party-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster-row { grid-template-columns: 116px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .roster-row + .roster-row { border-top: 0; }
  .roster-row:nth-child(n + 3) { border-top: 1px solid var(--border-dim); }
  .roster-row:nth-child(even) { border-left: 1px solid var(--border-dim); }
  .roster-sprite { width: 60px; height: 60px; }
  .roster-name { font-size: 12px; }
  .roster-stats { gap: 1px 6px; }
  .roster-stats .rstat { font-size: 10px; }
  .roster-actions .slot-mini { min-width: 0; }
  .roster-traits { gap: 5px; }
  .roster-traits .trait-desc { font-size: 11.5px; line-height: 1.3; }
}
/* Appendix: Class Advantage + Random Targets tables */
.ca-cls { display: inline-flex; align-items: center; gap: 5px; }
.ca-cls .px { width: 18px; height: 18px; }
.nd-row.rt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nd-row.rt-row3 { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) 3.5em; }
.nd-row.rt-row3 > span:last-child { text-align: right; }
.nd-row.rt-row > span:nth-child(2), .nd-row.rt-row3 > span:nth-child(2) { text-align: left; }   /* prose column */

/* Final Summoning: Greater Demon → spell */
.ds-list { display: flex; flex-direction: column; gap: 6px; }
.ds-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--border-dim); border-radius: 6px; }
.ds-demon { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 120px; min-width: 0; }
.ds-demon img { width: 20px; height: 20px; image-rendering: pixelated; }
.ds-spells { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 1 1 160px; min-width: 0; }
.ds-spell { display: inline-flex; align-items: center; gap: 4px; }
.ds-spell img { width: 16px; height: 16px; }
.ds-spells .slot-sub { flex-basis: 100%; }
/* creature detail Triggers (BACKLOG #5): one block per event, the shared spell-gem containers inside */
.trig-group { margin-bottom: 10px; }
.trig-group .art-spellcard-head { flex-wrap: wrap; }
.trig-card .trait-banner { flex: 1; min-width: 0; }