:root{
  --bg:#0c0e14;
  --bg2:#141824;
  --panel:#191e2c;
  --panel2:#212838;
  --border:#2c3447;
  --text:#dce3f0;
  --muted:#8b97ad;
  --accent:#5aa9ff;
  --accent2:#9a6bff;
  --shadow:0 4px 18px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1a2034 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a{color:var(--accent)}

/* Header */
header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(12,14,20,.96), rgba(12,14,20,.82));
  border-bottom:1px solid var(--border);
  padding:8px 16px 0;
}
.title h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.3px}
.title .sub{margin:1px 0 6px;color:var(--muted);font-size:11.5px}
.version-picker{color:var(--muted)}
.version-picker.hidden{display:none}
.version-picker select{
  margin-left:3px;font:inherit;font-size:11.5px;color:var(--text,#e8e8e8);
  background:var(--panel,#1b1b1f);border:1px solid var(--border,#333);
  border-radius:4px;padding:1px 4px;cursor:pointer;
}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--muted);padding:6px 13px;font-size:13.5px;font-weight:600;cursor:pointer;
  border-radius:6px 6px 0 0;
}
.tabs button:hover{color:var(--text);background:var(--panel)}
.tabs button.active{color:#fff;border-bottom-color:var(--accent)}

main{max-width:1320px;margin:0 auto;padding:12px}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Controls */
.controls{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;margin-bottom:10px;
}
.controls.slim{padding:7px 9px}
.search{
  flex:1 1 280px;min-width:220px;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:7px 10px;font-size:13.5px;
}
.search:focus{outline:none;border-color:var(--accent)}
.control-group{display:flex;flex-direction:column;gap:4px}
.control-group>label,.label-row>label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
select{
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;color:var(--text);
  padding:6px 9px;font-size:13px;cursor:pointer;
}
.chips{display:flex;flex-wrap:wrap;gap:5px;max-width:780px}
.chip{
  border:1px solid var(--border);background:var(--bg2);color:var(--muted);
  padding:3px 9px;border-radius:999px;font-size:12px;cursor:pointer;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;user-select:none;
}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{color:#0c0e14;font-weight:700}
/* On, but only partly in play: the depth selector lit it, yet some of what it
   names can't spawn at that depth (Easy at depth 4 excludes every giant). Kept
   outlined rather than filled so it never claims to be a plain selection. */
.chip.partial{border-color:var(--accent);color:var(--accent);background:transparent;font-weight:700}
.chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.control-group.hidden{display:none}

.count{color:var(--muted);font-size:12px;margin:0 2px 8px}

/* Active stat filters + autocomplete */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.active-filters.hidden{display:none}
.af-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.af-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  background:var(--panel2);border:1px solid var(--accent2);border-radius:999px;padding:3px 5px 3px 9px;color:#e7ecf7}
.af-kind{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;padding:1px 6px;border-radius:999px}
.af-kind.mod{background:#3a2350;color:#d7a6ff}
.af-kind.use{background:#143a45;color:#7fdcef}
.af-kind.pool{background:#3a3410;color:#e6d27a}
.af-kind.depth{background:#12324a;color:#8fc4ff}
.af-chip button{width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;line-height:1}
.af-chip button:hover{background:#a33;color:#fff}

.stat-dd{
  position:fixed;z-index:60;background:#1b2233;border:1px solid var(--accent2);
  border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.55);padding:4px;max-width:520px;
}
.stat-dd-head{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;padding:4px 8px 5px}
.stat-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer}
.stat-opt:hover{background:var(--panel2)}
.stat-opt b{flex:1;font-size:13.5px}
.so-kind{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;padding:2px 7px;border-radius:999px}
.so-kind.mod{background:#3a2350;color:#d7a6ff}
.so-kind.use{background:#143a45;color:#7fdcef}
.so-kind.pool{background:#3a3410;color:#e6d27a}
.so-count{color:var(--muted);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* Grid + cards */
.grid{
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--border);border-radius:10px;padding:10px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
  position:relative;
}
.card-head{display:flex;gap:9px;align-items:flex-start}
.icon{
  width:40px;height:40px;flex:0 0 40px;border-radius:8px;
  background:var(--bg);border:1px solid var(--border);
  image-rendering:pixelated;object-fit:contain;padding:2px;
}
.icon.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px}
.card-title{flex:1;min-width:0}
.card-title .name{font-weight:700;font-size:15px;line-height:1.2}
.card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;align-items:center}
.badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);
}
.badge.badge-boss{color:#ffcf5a;background:#3a2416;border-color:#7a4a1f;
  text-transform:uppercase;letter-spacing:.5px}
.badge.slot{color:#fff;background:#2a3550;border-color:#3a4560}
/* Rares carry an Easy/Medium/Hard class instead of a 1-9 difficulty, plus the
   roster they came from — two separate facts, so two badges. */
.badge.badge-rare{color:#e0b0ff;background:#2b1c3d;border-color:#553a75}
.badge.badge-group{color:#b6a0d8;background:#221a30;border-color:#413055}
.badge.badge-spawn-count{color:#9ed8b2;background:#172d20;border-color:#315f40}
.badge.oncraft{color:#e7c66b;border-color:#6b5a2f;background:#2b2616}
.badge.onpickup{color:#8fc4ff;border-color:#2f4a6b;background:#162232}
.badge.level{color:#fff}
.badge.level.forbidden{background:#3d3d3d;border-color:#5a5a5a;color:#fff;
  text-transform:uppercase;letter-spacing:.5px}
.granted-by{font-size:11.5px;color:var(--muted);margin-top:6px}
.granted-by .xref{color:#fff}
.tag-pill{
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
  border:1px solid currentColor;
}
.desc{font-size:13px;line-height:1.4;color:#cdd6e6;white-space:pre-wrap}
.bonuses{display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.35}
.bonuses .b{padding-left:13px;position:relative}
.bonuses .b:before{content:"›";position:absolute;left:2px;color:var(--muted)}

.section-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-top:2px}
.recipe{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.recipe .req{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:6px;border:1px solid currentColor;font-size:11.5px;font-weight:700;
}
.recipe .req .n{opacity:.85}
.req.any{color:var(--muted);border-style:dashed}

.upgrades{border-top:1px dashed var(--border);padding-top:6px;margin-top:1px}
.upgrades summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:700;list-style:none}
.upgrades summary::-webkit-details-marker{display:none}
.upgrades summary:before{content:"▸ ";color:var(--accent)}
.upgrades[open] summary:before{content:"▾ "}
.upg{margin-top:6px;font-size:12.5px}
.upg .uh{font-weight:700}
.upg .ul{color:var(--muted);font-size:10.5px;font-weight:700;margin-left:6px}

.stats{display:flex;flex-wrap:wrap;gap:4px}
.stat{font-size:11.5px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.stat b{color:#fff}

.craftable-tag{position:absolute;top:8px;right:8px;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:5px;background:#13391f;color:#7ee0a0;border:1px solid #2f6b45}
.craftable-tag.slack{background:#3a2f14;color:#e7c66b;border-color:#6b5a2f}

.tablink{color:var(--accent);cursor:pointer;text-decoration:underline}
.btn-ghost{background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  padding:6px 11px;border-radius:7px;cursor:pointer;font-weight:600}
.btn-ghost:hover{color:var(--text);border-color:var(--accent)}
/* Primary / submit-style action button (e.g. Craft). Solid green when actionable,
   neutral grey (not a washed-out tint) when disabled. */
.btn-primary{background:#2e6147;border:1px solid #3c7d5a;color:#dcefe3;
  padding:6px 16px;border-radius:7px;cursor:pointer;font-weight:700}
.btn-primary:hover:not(:disabled){background:#357253;border-color:#4a946d}
.btn-primary:disabled{background:var(--bg2);border-color:var(--border);color:var(--muted);cursor:default}

/* Craftable-only toggle */
.toggle{background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  padding:6px 12px;border-radius:7px;cursor:pointer;font-weight:700;font-size:13px}
.toggle:hover{color:var(--text);border-color:var(--accent)}
.toggle.active{background:#13391f;color:#7ee0a0;border-color:#2f6b45}
.toggle.active::before{content:"✓ "}
/* Compact variant sitting beside a control-group label. */
.toggle.sm{padding:1px 8px;font-size:11px}
.label-row{display:flex;align-items:center;gap:8px}

/* Collapsible negative tag filter under the spell Tag chips. The summary reads
   as a control-group label; the count keeps a selection visible while shut. */
.exclude-tags{margin-top:4px}
.exclude-tags summary{cursor:pointer;list-style:none;user-select:none;width:max-content;
  font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.exclude-tags summary::-webkit-details-marker{display:none}
.exclude-tags summary:before{content:"▸ ";color:var(--accent)}
.exclude-tags[open] summary:before{content:"▾ "}
.exclude-tags summary:hover{color:var(--text)}
.exclude-tags .chips{margin-top:4px}
.exclude-tags .chip.active{text-decoration:line-through}
.xcount{margin-left:6px;padding:0 6px;border-radius:999px;background:#5a2230;color:#ffb3c0}
.xcount:empty{display:none}

/* Sliding two-way switch (equipment tag filter: item tags vs recipe tags).
   inline-grid with 1fr columns sizes BOTH options to the wider label, so the
   thumb is exactly half the track and slides a clean 100% with no measuring. */
.segmented{
  position:relative;display:inline-grid;grid-template-columns:repeat(2,1fr);
  background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:2px;
  align-self:flex-start;   /* .control-group is a flex column: don't stretch to the chip row */
}
.seg-thumb{
  position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);
  border-radius:999px;background:var(--accent);pointer-events:none;
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.segmented[data-mode="recipe"] .seg-thumb{transform:translateX(100%)}
.seg-opt{
  position:relative;z-index:1;background:none;border:none;cursor:pointer;
  padding:3px 11px;border-radius:999px;white-space:nowrap;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--muted);
}
.seg-opt:hover:not(.active){color:var(--text)}
.seg-opt.active{color:#0c0e14}
.seg-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.seg-thumb{transition:none}}

/* Component inventory ("I have 2 Chaos Seeds…") */
.inventory{background:linear-gradient(180deg,#16212b,#121a24);border:1px solid #2f5a4a;
  border-radius:11px;padding:10px 12px;margin-bottom:10px}
.inventory.hidden{display:none}
.inv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.inv-title{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px}
.inv-chips{display:flex;flex-wrap:wrap;gap:6px}
.inv-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--border);border-radius:999px;padding:2px 6px 2px 4px;font-size:12.5px;font-weight:700}
.inv-chip img{width:20px;height:20px;image-rendering:pixelated;object-fit:contain}
.inv-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-qty{display:flex;align-items:center;gap:5px}
.inv-qty button{width:20px;height:20px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text);font-size:13px;cursor:pointer;line-height:1}
.inv-qty button:hover{border-color:var(--accent)}
.inv-qty b{min-width:12px;text-align:center;font-variant-numeric:tabular-nums;color:var(--accent)}
.inv-rm{width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;line-height:1}
.inv-rm:hover{background:#a33;color:#fff}
.inv-essences{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:12px}
.inv-ess-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}

/* Build workspace (Equipment tab) ---------------------------------------- */
.build{
  background:linear-gradient(180deg,#1a2233,#141a26);
  border:1px solid var(--accent);border-radius:11px;padding:10px 12px;margin-bottom:12px;
  box-shadow:var(--shadow);
}
.build.hidden{display:none}
.build-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wl-title{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.wl-badge{background:var(--accent);color:#0c0e14;border-radius:999px;font-size:11px;font-weight:800;padding:1px 8px}
.build-summary{display:flex;flex-wrap:wrap;gap:9px;align-items:center;flex:1;min-width:90px}
.bs-craft{font-size:12.5px;font-weight:800;color:#e7c66b}
.bs-craft.all{color:#7ee0a0}
.bs-waste{font-size:11.5px;font-weight:700;color:#e79a6b}
.wl-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-items:center}
.wl-actions .btn-ghost{font-size:12px;padding:5px 9px}
.wl-actions .btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.wl-actions .btn-primary{font-size:12px;padding:5px 14px}
#wl-auto{color:var(--accent2);border-color:#3a2f5a}

.build-body{display:flex;flex-direction:column;gap:10px;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}

/* Component pool — standalone panel on the Equipment tab (always visible when
   you own components, independent of the build). */
.eq-pool{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:9px 11px;margin-bottom:10px}
.eq-pool.hidden{display:none}
.eq-pool.picking{border-color:var(--accent2);box-shadow:0 0 0 1px rgba(154,107,255,.35)}
.pool-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:7px}
.pool-title{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}
.pool-edit{font-size:10px;margin-left:4px}
.pool-hint{font-size:11.5px;color:var(--muted)}
.pick-hint{font-size:11.5px;color:#dfe6f3}
.pool-empty{font-size:12.5px;color:var(--muted);padding:6px 2px}
.pool-tiles{display:flex;flex-wrap:wrap;gap:7px;min-height:8px}

/* Component tile (pool + assigned): name on top, then a bigger icon paired
   with its essence letters below. */
.comp-tile{
  position:relative;width:108px;background:var(--panel2);border:1px solid var(--border);
  border-radius:9px;padding:6px;cursor:pointer;user-select:none;display:flex;flex-direction:column;gap:5px;
}
.comp-tile:hover{border-color:var(--accent)}
.comp-tile.picked{border-color:var(--accent);box-shadow:0 0 0 2px rgba(90,169,255,.55);background:#1d2940}
.comp-tile.dragging{opacity:.4}
.comp-tile.oncraft{border-color:#6b5a2f;background:linear-gradient(180deg,#2b2616,#1d1d28)}
.comp-tile.oncraft:hover{border-color:#e7c66b}
.ct-name{font-size:11px;font-weight:700;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ct-bottom{display:flex;align-items:center;gap:6px;min-width:0}
.ct-ic{width:34px;height:34px;flex:0 0 34px;border-radius:6px;background:var(--bg);border:1px solid var(--border);image-rendering:pixelated;object-fit:contain;padding:2px}
.ct-ic.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px}
.ct-ess{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-width:0}
.ess{font-size:10px;font-weight:800;line-height:1;height:18px;min-width:17px;padding:0 4px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;
  color:var(--ec,var(--muted));border:1px solid var(--ec,var(--border));background:color-mix(in srgb, var(--ec, #888) 15%, transparent);
  font-variant-numeric:tabular-nums}
.ess.wasted{opacity:.4;text-decoration:line-through;border-style:dashed}
.ess-none{font-size:9.5px;color:var(--muted)}
/* Total-essence summary at the bottom of the components drawer: one code chip
   per essence held, grouped per tag. */
.pool-essences{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:9px 2px 2px;
  padding-top:9px;border-top:1px solid var(--border)}
.pe-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-right:2px}
.ess-run{display:inline-flex;gap:2px}
.ct-count{position:absolute;top:-6px;right:-6px;background:var(--accent);color:#0c0e14;font-size:10px;font-weight:800;border-radius:999px;padding:1px 6px;box-shadow:var(--shadow)}
.ct-rm{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);
  background:var(--panel);color:var(--muted);font-size:10px;line-height:1;cursor:pointer;z-index:2}
.ct-rm:hover{background:#a33;color:#fff;border-color:#a33}

/* Build items — one per row: info + recipe slots on the left, assigned
   components on the right. Compact and fixed so the layout never bloats. */
.build-items{display:flex;flex-direction:column;gap:7px}
.build-item{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--border);
  border-radius:10px;padding:7px 9px}
.build-item.is-ok{border-color:#2f6b45;background:linear-gradient(180deg,#17241d,#131e18)}
.build-item.droppable{outline:1px dashed var(--accent2);outline-offset:2px}
/* Fixed-width left block so every row's components start at the same column. */
.bi-left{display:flex;gap:8px;align-items:center;flex:0 0 320px;max-width:100%;min-width:0}
.bi-ic{width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:var(--bg);border:1px solid var(--border);image-rendering:pixelated;object-fit:contain;padding:2px}
.bi-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.bi-row1{display:flex;align-items:center;gap:6px;min-width:0}
.bi-name{font-weight:700;font-size:13.5px;cursor:help;flex:0 1 auto;min-width:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-name:hover,.bi-name:focus{color:#fff;text-decoration:underline dotted;outline:none}
.bi-waste{font-size:11px;font-weight:800;color:#e79a6b;white-space:nowrap}
.wl-built{font-size:12px;font-weight:800;color:#7ee0a0;font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-miss{font-size:11.5px;font-weight:800;color:#e79a6b;font-variant-numeric:tabular-nums}
.build-item>.wl-remove{flex:0 0 20px;order:-1}
.wl-remove{width:20px;height:20px;flex:0 0 20px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);
  color:var(--muted);font-size:11px;cursor:pointer;line-height:1}
.wl-remove:hover{border-color:#a33;color:#ff8585}

/* Recipe slots: one-letter ✓ filled / ? missing chips.
   Fixed height + align-self:center so they never stretch to the row's height. */
.bi-slots{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.eslot{font-size:11px;font-weight:800;line-height:1;height:21px;min-width:22px;padding:0 5px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.eslot.filled{color:var(--ec);border:1px solid var(--ec);background:color-mix(in srgb,var(--ec) 18%,transparent)}
.eslot.miss{color:var(--ec,var(--muted));border:1px dashed var(--ec,var(--border));opacity:.9}
.eslot.any{--ec:var(--muted);color:var(--muted);border-color:var(--border)}
.eslot.any.filled{border-style:solid;background:color-mix(in srgb,var(--muted) 16%,transparent)}

/* Assigned components: left-aligned, starting at the same column on every row */
.bi-comps{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;align-items:center;flex:1 1 200px;min-width:0}
.build-item.droppable .bi-comps{outline:1px dashed rgba(154,107,255,.4);outline-offset:3px;border-radius:8px}
.bi-drop-hint{font-size:11px;color:var(--muted);padding:4px 2px}

.add-build{
  background:var(--bg2);border:1px solid var(--border);color:var(--accent);
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;
  flex:0 0 auto;align-self:flex-start;
}
.add-build:hover{border-color:var(--accent);color:#fff;background:#1d2940}
.add-build.in{color:#7ee0a0;border-color:#2f6b45;background:#13391f}

/* Per-card share button (bottom-right of every infobox) ---------------------
   In flow rather than absolutely positioned: card text runs to the right edge
   (monster passives, recipe chips), so an overlay would sit on top of it.
   margin-top:auto pins it to the true bottom of grid-stretched cards. */
.card-share{margin-top:auto;align-self:flex-end;line-height:0}
.share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border-radius:6px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--muted);
  opacity:.5;transition:opacity .12s,color .12s,border-color .12s,background .12s;
}
.card:hover .share-btn{opacity:1}
.share-btn:hover{color:var(--accent);border-color:var(--border);background:var(--bg2)}
.share-btn:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px}
.share-btn.copied{opacity:1;color:#7ee0a0;border-color:#2f6b45;background:#13391f}
.share-btn.failed{opacity:1;color:#ff9a9a;border-color:#6b2f2f;background:#391313}

/* Card-capture mode ---------------------------------------------------------
   `share.py --cards` drives a headless browser over this same page and adds
   .shotmode to <body>, then clips one screenshot per card for the link
   previews. Strip the chrome, unstack the grid so every card sits at its
   natural height, and pin a share-image width. The flat background (instead of
   the fixed radial gradient) keeps the margin around every card identical. */
body.shotmode{background:var(--bg)}
body.shotmode header,body.shotmode footer,body.shotmode .controls,
body.shotmode .count,body.shotmode .active-filters,body.shotmode .build,
body.shotmode .eq-pool,body.shotmode .inventory{display:none}
body.shotmode main{max-width:none;padding:0}
body.shotmode .grid{display:block}
body.shotmode .card{width:400px}
body.shotmode .card-share{display:none}
/* Controls are dead pixels in a still — nobody can press a button in a PNG, and
   showing one implies the picture is the app. Drop the add-to-wishlist/pool
   button (which also gives the title row its full width back) and the upgrades
   disclosure triangle, since the shot forces those details open anyway. */
body.shotmode .add-build{display:none}
body.shotmode .upgrades summary:before{content:none}
/* One frame per card, wrapped around it by the renderer: the padding gives the
   shot a margin of site background, so the card's rounded corners land on the
   colour they do on the page instead of on four bare notches. */
body.shotmode .shot-frame{width:428px;padding:14px;background:var(--bg)}

.inv-tip{font-size:11px;color:var(--muted);margin-top:8px}

/* Animated unit sprites (pure CSS idle loop via background-position) */
.sprite{
  --d:48px;
  width:var(--d);height:var(--d);flex:0 0 auto;
  background-repeat:no-repeat;image-rendering:pixelated;
  background-size:calc(var(--cols,1) * var(--d)) calc(var(--rows,1) * var(--d));
  background-position-x:0;
  background-position-y:calc((1 - var(--rows,1)) * var(--d));
}
/* keyframes .sprite.cN are injected at runtime, one per distinct frame count */

/* Recent changes screen (header link, no tab button) ----------------------- */
.recent-head{margin:0 2px 12px}
.recent-head h2{margin:0;font-size:20px;font-weight:800}
.rc-section{margin:0 0 22px}
.rc-title{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border);
  font-size:16px;font-weight:800;
}
.rc-build{font-size:11.5px;font-weight:700;color:var(--muted)}
.rc-total{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  font-weight:800;color:var(--accent)}
.rc-kind{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;
  color:var(--muted);margin:12px 0 6px;display:flex;align-items:center;gap:7px;
}
.rc-kcount{
  background:var(--bg2);border:1px solid var(--border);border-radius:999px;
  padding:0 7px;font-size:10.5px;letter-spacing:0;color:var(--text);
}
.rc-gone{color:var(--muted);font-style:italic;justify-content:center;text-align:center}
/* Changed entry: the card as it reads now, with the field-level diff under it */
.rc-change{display:flex;flex-direction:column;gap:6px}
.rc-diff{
  background:var(--bg2);border:1px solid var(--border);border-radius:9px;
  padding:7px 9px;font-size:11.5px;display:flex;flex-direction:column;gap:5px;
}
.rc-drow{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.rc-drow.long{flex-direction:column;gap:3px}
.rc-dfield{
  color:var(--muted);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.5px;flex:0 0 auto;
}
.rc-dvals{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;min-width:0}
.rc-drow.long .rc-dvals{flex-direction:column;gap:3px}
.rc-dold{color:#e08a8a;text-decoration:line-through;white-space:pre-wrap}
.rc-dnew{color:#7ee0a0;white-space:pre-wrap}
/* Membership rows: one word, no strikethrough (nothing was replaced) */
.rc-dop{font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:10px}
.rc-dop.added{color:#7ee0a0}
.rc-dop.removed{color:#e08a8a}
.rc-drow .rc-dop + .rc-dold{text-decoration:none}
.rc-darrow{color:var(--muted);flex:0 0 auto}
.rc-drow.long .rc-darrow{display:none}

/* Costume cards (spoiler-gated cosmetics) --------------------------------- */
.cos-grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr))}
.cos-card{cursor:pointer;align-items:center;text-align:center;gap:8px;user-select:none}
.cos-card.cos-open{cursor:default}             /* free costume: nothing to reveal */
.cos-card:hover:not(.cos-open){border-color:var(--accent)}
.cos-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cos-art-wrap{
  position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:10px 0;
  overflow:hidden;
}
.cos-art{--d:96px}
/* Spoiler state: the art stays in the DOM (so the idle loop is already running
   when revealed) but is blurred out and covered by the veil. */
.cos-card:not(.revealed) .cos-art{filter:blur(14px) saturate(.5);opacity:.55}
.cos-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  background:rgba(12,14,20,.45);color:var(--muted);
}
.cos-card.revealed .cos-veil{display:none}
.cos-veil svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.cos-veil .cos-hint{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.cos-card:hover .cos-veil{color:var(--text)}
.cos-name{font-weight:800;font-size:14px}
.cos-unlock{font-size:12px;color:var(--muted);line-height:1.35}
.cos-unlock.free{color:#7ee0a0}
@media (prefers-reduced-motion:reduce){.cos-art{animation:none!important}}

/* Monster cards */
.mon-art{--d:56px;border-radius:9px;background-color:var(--bg);border:1px solid var(--border)}
.mon-card .uline{display:flex;flex-wrap:wrap;gap:9px;font-size:12.5px;font-weight:700;margin-top:5px}
.mon-card .uhp{color:#ff7a7a}
.mon-card .ush{color:#4dfdfc}
.mon-card .uflags{color:var(--accent);font-weight:700}
/* The spawn table's alpha pairing, both directions. */
.mon-card .uesc{font-size:12px;margin-top:4px;color:#c2ccdd}
.mon-card .uescl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:800;margin-right:4px}
.mon-card .uresists{display:flex;flex-wrap:wrap;gap:7px;font-size:11.5px;font-weight:700;margin-top:2px}
.mon-card .usec{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  font-weight:800;margin:7px 0 3px;border-top:1px solid var(--border);padding-top:5px}
.mon-card .uab{font-size:12.5px;margin-bottom:5px}
.mon-card .uabn{font-weight:800}
.mon-card .ubits{color:var(--muted);font-size:11px;font-weight:700}
.mon-card .udmg{color:#ff8585}
.mon-card .udesc{color:#c2ccdd;font-size:12px;line-height:1.4;margin-top:1px;white-space:pre-wrap}
.mon-card .upass{font-size:12px;line-height:1.4;color:#cdd6e6;margin-bottom:3px;white-space:pre-wrap}

/* Cross-reference links + highlight on navigate */
.xref{color:#9cc7ff;cursor:pointer;border-bottom:1px dotted #5c7aa8;font-weight:600}
.xref:hover{color:#fff;border-bottom-color:#fff}
/* Buffs are glossary terms, not navigable cards: dashed underline + help cursor. */
.xref[data-k="buff"]{color:#d9c7f0;border-bottom-style:dashed;border-bottom-color:#7a6a9c;cursor:help}
.xref[data-k="buff"]:hover{color:#fff;border-bottom-color:#fff}
@keyframes cardflash{
  0%{box-shadow:0 0 0 2px var(--accent),0 0 24px 6px rgba(90,169,255,.75)}
  60%{box-shadow:0 0 0 2px var(--accent),0 0 22px 5px rgba(90,169,255,.6)}
  100%{box-shadow:0 0 0 0 rgba(90,169,255,0)}}
.card.flash{animation:cardflash 3.1s ease-out}

/* Summon chips + unit tooltip */
.summon-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.summon-chips{display:flex;flex-wrap:wrap;gap:4px}
.summon-chip{
  display:inline-flex;align-items:center;gap:4px;cursor:help;
  background:var(--panel2);border:1px solid var(--border);border-radius:6px;
  padding:1px 7px 1px 3px;font-size:11.5px;font-weight:700;color:#d7e0f0;
}
.summon-chip:hover,.summon-chip:focus{border-color:var(--accent2);color:#fff;outline:none}
.summon-chip .chip-sprite{--d:18px}
/* Effects row: every buff/debuff a card applies. Chips are .xref buff nodes (for
   the tooltip wiring), so undo the inline-link underline and look like a chip. */
.xref.buff-chip{
  display:inline-flex;align-items:center;gap:5px;cursor:help;
  background:var(--panel2);border:1px solid var(--border);border-radius:6px;
  padding:1px 7px;font-size:11.5px;font-weight:700;color:#d9c7f0;
}
.xref.buff-chip[data-type="Debuff"]{border-color:#5a3b4a}
.xref.buff-chip:hover,.xref.buff-chip:focus{border-color:var(--accent2);color:#fff;outline:none}
.buff-dot{width:7px;height:7px;border-radius:50%;flex:none}
.buff-sheet .buff-stack{font-size:11px;color:#c2ccdd;margin-top:5px;line-height:1.35}
.buff-sheet .buff-stack .muted,.buff-sheet .buff-stack.muted{color:var(--muted)}
/* A pool summon ("Any Wizard") — links to the Monsters-tab filter, not one unit. */
.pool-chip{
  display:inline-flex;align-items:center;cursor:pointer;
  background:var(--panel2);border:1px dashed var(--accent2);border-radius:6px;
  padding:1px 8px;font-size:11.5px;font-weight:700;color:#cbd6ec;
}
.pool-chip:hover,.pool-chip:focus{background:var(--accent2);color:#0c0e14;outline:none}

.unit-tip{
  position:fixed;z-index:100;width:280px;max-width:92vw;
  background:linear-gradient(180deg,#1c2233,#12161f);
  border:1px solid var(--accent2);border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.6);padding:10px;pointer-events:none;
}
.unit-sheet .uhead{display:flex;gap:9px;align-items:center;margin-bottom:6px}
.unit-sheet .uicon-sprite{--d:42px;background-color:var(--bg);border:1px solid var(--border);border-radius:7px}
.unit-sheet .uname{font-weight:800;font-size:15px}
.unit-sheet .uline{display:flex;flex-wrap:wrap;gap:9px;font-size:12.5px;font-weight:700;margin:3px 0}
.unit-sheet .uhp{color:#ff7a7a}
.unit-sheet .ush{color:var(--shield, #4dfdfc)}
.unit-sheet .uflags{color:var(--accent);font-weight:700}
.unit-sheet .uresists{display:flex;flex-wrap:wrap;gap:7px;font-size:11.5px;font-weight:700;margin:3px 0}
.unit-sheet .usec{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  font-weight:800;margin:7px 0 3px;border-top:1px solid var(--border);padding-top:5px}
.unit-sheet .uab{font-size:12px;margin-bottom:4px}
.unit-sheet .uabn{font-weight:800}
.unit-sheet .ubits{color:var(--muted);font-size:11px;font-weight:700}
.unit-sheet .udmg{color:#ff8585}
.unit-sheet .udesc{color:#c2ccdd;font-size:11.5px;line-height:1.35;margin-top:1px}
.unit-sheet .upass{font-size:11.5px;line-height:1.35;color:#cdd6e6;margin-bottom:3px}

footer{color:var(--muted);font-size:11.5px;text-align:center;padding:18px 20px;border-top:1px solid var(--border);margin-top:20px}

.empty{color:var(--muted);padding:30px;text-align:center;grid-column:1/-1}

@media (max-width:560px){
  main{padding:8px}
  .build{padding:9px 9px}
  .wl-actions{width:100%;margin-left:0}
  .wl-actions .btn-ghost{flex:1 1 auto;text-align:center}
  .bi-left{flex:1 1 100%}
  .bi-comps{flex:1 1 100%}
  .comp-tile{width:calc(50% - 4px)}
  .pool-tiles{gap:8px}
}

/* --- GUIDE ------------------------------------------------------------- */
.guide-root{max-width:920px;margin:0 auto}
.g-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.g-title{margin:0;font-size:22px;font-weight:800;color:#fff;flex:1 1 auto;min-width:0}
.g-title-input{flex:1 1 auto;min-width:0;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;color:#fff;font-size:20px;font-weight:800;padding:7px 11px}
.g-title-input:focus{outline:none;border-color:var(--accent)}
.g-head-actions{display:flex;gap:7px;flex-wrap:wrap}
.g-instr{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent2);
  border-radius:8px;padding:8px 12px;color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:14px}
.g-instr b{color:var(--text)}

.g-super{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;margin-bottom:14px}
.g-super-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.g-super-head h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);font-weight:800;flex:1 1 auto}
.g-import{font-size:11.5px}
.g-super-foot{margin-top:8px}

.g-section{border-top:1px dashed var(--border);padding:9px 0}
.g-section:first-child{border-top:none}
.g-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.g-sec-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:800;
  padding:2px 9px;border-radius:999px;border:1px solid currentColor}
.g-sec-select{background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:3px 7px;cursor:pointer}
.g-sec-tools{display:flex;gap:3px;margin-left:auto}
.g-iconbtn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);
  color:var(--muted);cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.g-iconbtn:hover{color:var(--text);border-color:var(--accent)}
.g-iconbtn.danger:hover{color:#ff6b6b;border-color:#ff6b6b}
.g-iconbtn:disabled{opacity:.3;cursor:default}

/* heading accent colors */
.h-C{color:#ffd166}.h-E{color:#5ad1a8}.h-T{color:#9a6bff}.h-L{color:#ff9ecb}
.h-U{color:#5aa9ff}.h-D{color:#6ec6c9}.h-A{color:#ff8c5a}.h-N{color:#ff6b6b}
.h-M{color:#b0b6c4}.h-V{color:#7fd1ae}.h-W{color:#7fb6e0}.h-X{color:#c79fe0}.h-Z{color:#d4a373}
select.g-sec-select{color:var(--text)}
.g-sec-custom{background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);font-size:11.5px;font-weight:700;letter-spacing:.4px;padding:3px 8px;max-width:180px;
  text-transform:uppercase}
.g-sec-custom::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.g-sec-custom:focus{outline:none;border-color:var(--accent)}

.g-items{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.g-item{display:flex;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--border);
  border-radius:9px;padding:4px 6px}
.editing .g-item{cursor:grab}
.g-item.dragging{opacity:.4;cursor:grabbing}
.g-drop-marker{align-self:stretch;width:3px;min-height:34px;border-radius:2px;flex:none;
  background:var(--accent);box-shadow:0 0 7px var(--accent);animation:gpulse .8s ease-in-out infinite}
@keyframes gpulse{0%,100%{opacity:.45}50%{opacity:1}}
.g-or{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;align-self:center;padding:0 1px}
.g-alt{display:flex;align-items:center;gap:7px;padding:2px 4px}
.g-alt .icon{width:30px;height:30px;flex:none}
.g-alt-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.g-alt-name{font-size:13px;font-weight:700;color:var(--text)}
.g-alt-name.xref{cursor:pointer;text-decoration:none}
.g-alt-name.xref:hover{text-decoration:underline;color:var(--accent)}
.g-alt.upg .g-alt-name{color:#cdb8ff}
.g-alt-sub{font-size:10px;color:var(--muted)}
.g-lv{font-size:11px;font-weight:800;color:#0c0e14;background:var(--accent);border-radius:5px;
  min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;align-self:center;
  white-space:nowrap;flex:none}
.g-alt.upg .g-lv{background:var(--accent2)}
.g-lv.forbidden{background:#3d3d3d;color:#fff;border:1px solid #5a5a5a}
.g-alt-x{width:18px;height:18px;border-radius:50%;border:none;background:transparent;color:var(--muted);
  cursor:pointer;font-size:11px;line-height:1;flex:none}
.g-alt-x:hover{color:#ff6b6b;background:var(--panel2)}
.g-or-add,.g-add-item{border:1px dashed var(--border);background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;font-size:11.5px;font-weight:700;padding:4px 9px}
.g-or-add{padding:3px 6px;align-self:center}
.g-or-add:hover,.g-add-item:hover{color:var(--accent);border-color:var(--accent)}
.g-add-item{display:inline-flex;align-items:center}
.g-empty{color:var(--muted);text-align:center;padding:40px 0;font-size:14px}

/* item picker */
.g-picker{position:fixed;z-index:70;width:300px;max-width:calc(100vw - 16px);background:#1b2233;
  border:1px solid var(--accent2);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.g-pick-search{width:100%;border:none;border-bottom:1px solid var(--border);background:var(--bg2);
  color:var(--text);font-size:13px;padding:9px 11px}
.g-pick-search:focus{outline:none}
.g-pick-list{max-height:280px;overflow:auto}
.g-pick-opt{display:flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;font-size:13px}
.g-pick-opt:hover{background:var(--panel2)}
.g-pick-opt b{font-weight:700;color:var(--text)}
.g-pick-sub{color:var(--muted);font-size:11px;margin-left:auto;text-align:right}
.g-pick-tag{font-size:9px;font-weight:800;letter-spacing:.5px;padding:1px 5px;border-radius:4px;flex:none}
.g-pick-tag.eq{background:#274b73;color:#bcd9ff}.g-pick-tag.spell{background:#2c5a47;color:#b8f0d6}
.g-pick-tag.upg{background:#3d2c66;color:#cdb8ff}
.g-pick-empty{padding:12px;color:var(--muted);font-size:12.5px;text-align:center}

.g-flash{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:#3a2230;border:1px solid #ff6b6b;color:#ffd9d9;padding:9px 16px;border-radius:9px;
  font-size:13px;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:90}
.g-flash.show{opacity:1;transform:translateX(-50%) translateY(0)}