/* =========================================================
   Кодекс артефактів — design tokens
   Palette: deep plum-charcoal ground, aged-gold accent,
   muted crimson secondary, parchment ink text.
   Display: Cinzel (heraldic capitals)
   Body: Spectral (warm literary serif)
   Data/numeric: JetBrains Mono (ledger figures)
   ========================================================= */

:root{
  --ink-void:      #100d16;
  --ink-panel:     #17131e;
  --ink-panel-2:   #1e1926;
  --ink-line:      #322a3c;
  --ink-line-soft: #26202f;

  --parchment:     #e8e0cf;
  --parchment-dim: #a89e8f;
  --parchment-mut: #756c7d;

  --gold:          #c8a35a;
  --gold-bright:   #e4c17c;
  --gold-dim:      #8a7042;

  --crimson:       #9a3b42;
  --crimson-bright:#c14c52;

  --sapphire:      #4d7a9c;
  --verdant:       #5c8a5f;

  --radius-s: 3px;
  --radius-m: 6px;

  --font-display: 'Cinzel', serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-deep: 0 18px 40px -14px rgba(0,0,0,0.65);
}

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

html{ color-scheme: dark; }

body{
  margin: 0;
  background: var(--ink-void);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 64px; /* room for tray handle */
}

::selection{ background: var(--gold-dim); color: var(--ink-void); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .card:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ambient background ornament: faint radial + hairline diamond grid */
.bg-ornament{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 560px at 18% -8%, rgba(200,163,90,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(154,59,66,0.08), transparent 55%),
    repeating-linear-gradient(135deg, rgba(232,224,207,0.018) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(45deg, rgba(232,224,207,0.018) 0 1px, transparent 1px 34px);
}

/* =========================== HEADER =========================== */

.site-head{
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(23,19,30,0.95), rgba(23,19,30,0.65));
  backdrop-filter: blur(6px);
}
.site-head__inner{
  max-width: 1400px; margin: 0 auto;
  padding: 22px 28px;
  display: flex; align-items: center; gap: 18px;
}
.site-head__mark{ color: var(--gold); flex-shrink: 0; }
.site-head__titles h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  margin: 0 0 2px;
  color: var(--parchment);
}
.site-head__titles p{
  margin: 0; color: var(--parchment-mut); font-size: 0.9rem; font-style: italic;
}
.site-head__count{
  margin-left: auto; text-align: right; flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--gold-bright);
  padding-left: 18px; border-left: 1px solid var(--ink-line);
}
.site-head__count span{ display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.site-head__count small{ color: var(--parchment-mut); font-family: var(--font-body); font-style: italic; font-size: 0.72rem; }

/* =========================== LAYOUT =========================== */

.layout{
  position: relative; z-index: 1;
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  padding: 26px 28px 40px;
  align-items: start;
}

/* =========================== FILTERS =========================== */

.filters{
  position: sticky; top: 20px;
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-m);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.filters__scroll{
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px 18px 24px;
}
.filters__scroll::-webkit-scrollbar{ width: 8px; }
.filters__scroll::-webkit-scrollbar-thumb{ background: var(--ink-line); border-radius: 4px; }

.filter-group{ margin-bottom: 20px; }
.filter-group:last-of-type{ margin-bottom: 14px; }

.filter-label{
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.filter-value{
  font-family: var(--font-mono);
  color: var(--parchment-mut);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
}

.text-input{
  width: 100%;
  background: var(--ink-void);
  border: 1px solid var(--ink-line);
  color: var(--parchment);
  padding: 9px 11px;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.text-input:focus{ border-color: var(--gold-dim); }
select.text-input{ appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c8a35a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 30px;
}

input[type="range"]{
  width: 100%; appearance: none; height: 3px; background: var(--ink-line);
  border-radius: 2px; margin-top: 6px;
}
input[type="range"]::-webkit-slider-thumb{
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink-void);
  cursor: pointer; margin-top: -5.5px;
  box-shadow: 0 0 0 1px var(--gold-dim);
}
input[type="range"]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink-void); cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track{ height: 3px; background: var(--ink-line); border-radius: 2px; }

.checkbox-row{
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 0.82rem; color: var(--parchment-dim);
  cursor: pointer;
}
.checkbox-row input{ accent-color: var(--gold); width: 14px; height: 14px; }

.stat-filters{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-filter{ display: flex; flex-direction: column; gap: 3px; }
.stat-filter label{
  font-size: 0.68rem; color: var(--parchment-mut); text-transform: none;
}
.stat-filter input{
  width: 100%; background: var(--ink-void); border: 1px solid var(--ink-line);
  color: var(--parchment); padding: 5px 7px; border-radius: var(--radius-s);
  font-family: var(--font-mono); font-size: 0.78rem;
}

.btn{
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-s);
  padding: 9px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--ghost{
  background: transparent; border-color: var(--ink-line); color: var(--parchment-dim);
  width: 100%;
}
.btn--ghost:hover{ border-color: var(--gold-dim); color: var(--gold-bright); }
.btn--gold{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241a08; border-color: var(--gold-dim);
  width: 100%; font-weight: 700;
}
.btn--gold:hover{ filter: brightness(1.08); }
.btn--gold.is-added{
  background: var(--ink-line-soft); color: var(--parchment-mut); border-color: var(--ink-line);
}
.btn--text{
  background: none; border: none; color: var(--crimson-bright);
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; padding: 4px 8px;
}
.btn--text:hover{ color: var(--gold-bright); }
.btn--mobile-only{ display: none; }

/* =========================== RESULTS =========================== */

.results__toolbar{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.results__hint{ color: var(--parchment-mut); font-size: 0.82rem; font-style: italic; }

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.card{
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .12s ease;
  cursor: pointer;
}
.card:hover{ border-color: var(--gold-dim); transform: translateY(-2px); }
.card.is-in-tray{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

.card__img-wrap{
  background: radial-gradient(ellipse at 50% 35%, rgba(200,163,90,0.10), transparent 65%), var(--ink-void);
  display: flex; align-items: center; justify-content: center;
  height: 108px; border-bottom: 1px solid var(--ink-line);
}
.card__img{ max-width: 64px; max-height: 64px; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }

.card__body{ padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.card__name{
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem;
  margin: 0; color: var(--parchment); line-height: 1.3;
  min-height: 2.5em;
}

.card__meta{ display: flex; flex-wrap: wrap; gap: 6px; }
.chip{
  font-family: var(--font-mono); font-size: 0.68rem;
  padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--ink-line); color: var(--parchment-dim);
}
.chip--lvl{ color: var(--sapphire); border-color: rgba(77,122,156,0.4); }
.chip--oa{ color: var(--crimson-bright); border-color: rgba(193,76,82,0.4); }
.chip--dur{ color: var(--verdant); border-color: rgba(92,138,95,0.4); }

.card__stats{ display: flex; flex-wrap: wrap; gap: 5px; }
.stat-pill{
  font-family: var(--font-mono); font-size: 0.72rem;
  background: var(--ink-void); border: 1px solid var(--ink-line-soft);
  border-radius: var(--radius-s); padding: 2px 6px;
  color: var(--gold-bright);
}
.stat-pill small{ color: var(--parchment-mut); font-family: var(--font-body); font-style: italic; margin-right: 3px; }

.card__set{
  font-size: 0.72rem; color: var(--parchment-mut); font-style: italic;
}
.card__set b{ color: var(--gold); font-style: normal; }

.card__price{
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--parchment-dim);
  border-top: 1px dashed var(--ink-line); padding-top: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.card__price .price-main{ color: var(--gold-bright); font-weight: 700; }
.card__price .price-unknown{ color: var(--parchment-mut); font-style: italic; font-family: var(--font-body); }

.empty-state{
  text-align: center; padding: 60px 20px; color: var(--parchment-mut);
}
.empty-state p{ font-style: italic; margin-bottom: 14px; }
.empty-state .btn{ width: auto; display: inline-block; }

/* =========================== TRAY =========================== */

.tray{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--ink-panel-2);
  border-top: 1px solid var(--gold-dim);
  box-shadow: 0 -14px 34px -10px rgba(0,0,0,0.6);
}
.tray__handle{
  width: 100%; display: flex; align-items: center; gap: 10px;
  justify-content: center;
  background: none; border: none; color: var(--parchment-dim);
  font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px; cursor: pointer;
}
.tray__handle-label{ color: var(--gold); }
.tray__handle-count{
  background: var(--crimson); color: var(--parchment); font-family: var(--font-mono);
  border-radius: 20px; padding: 1px 8px; font-size: 0.72rem;
}
.tray__handle-chevron{ transition: transform .2s ease; color: var(--gold-dim); }
.tray.is-open .tray__handle-chevron{ transform: rotate(180deg); }

.tray__body{
  max-height: 0; overflow: hidden; transition: max-height .28s ease;
  border-top: 1px solid var(--ink-line);
}
.tray.is-open .tray__body{ max-height: 62vh; overflow-y: auto; }

.tray__items{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 24px 4px; max-width: 1400px; margin: 0 auto;
}
.tray__empty{ color: var(--parchment-mut); font-style: italic; font-size: 0.88rem; }

.tray-chip{
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-void); border: 1px solid var(--ink-line);
  border-radius: 20px; padding: 4px 6px 4px 10px;
  font-size: 0.82rem;
}
.tray-chip img{ width: 22px; height: 22px; object-fit: contain; }
.tray-chip button{
  background: var(--ink-line-soft); border: none; color: var(--parchment-mut);
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: 0.75rem;
}
.tray-chip button:hover{ background: var(--crimson); color: var(--parchment); }

.tray__ledger{ padding: 12px 24px 22px; max-width: 1400px; margin: 0 auto; }

.ledger{
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-m);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(232,224,207,0.028) 27px 28px),
    var(--ink-panel);
  padding: 14px 18px 18px;
}
.ledger__row--head{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.ledger__grid{
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--ink-line);
  min-height: 22px;
}
.ledger-stat{
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--gold-bright);
}
.ledger-stat small{ color: var(--parchment-mut); font-family: var(--font-body); font-style: italic; margin-right: 4px; }

.ledger__totals{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.ledger__total{ display: flex; flex-direction: column; gap: 3px; }
.ledger__total-label{ font-size: 0.68rem; color: var(--parchment-mut); text-transform: uppercase; letter-spacing: 0.04em; }
.ledger__total-value{ font-family: var(--font-mono); font-size: 1.15rem; color: var(--parchment); font-weight: 700; }
.ledger__total-value.is-over{ color: var(--crimson-bright); }

/* =========================== MODAL =========================== */

.modal-backdrop{
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8,6,11,0.72); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 20px; overflow-y: auto;
}
.modal-backdrop[hidden]{ display: none; }
.modal{
  background: var(--ink-panel); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-m); max-width: 560px; width: 100%;
  padding: 26px 28px 28px; box-shadow: var(--shadow-deep);
}
.modal__close{
  float: right; background: none; border: none; color: var(--parchment-mut);
  font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.modal__close:hover{ color: var(--gold-bright); }
.modal__head{ display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.modal__img{ width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.modal__title{ font-family: var(--font-display); font-size: 1.15rem; color: var(--parchment); margin: 0 0 4px; }
.modal__sub{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--parchment-mut); }
.modal__desc{ font-style: italic; color: var(--parchment-dim); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.6; }
.modal__section{ margin-bottom: 14px; }
.modal__section h4{
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px;
}
.modal__bonus{ background: var(--ink-void); border-left: 2px solid var(--crimson); padding: 8px 12px; font-size: 0.85rem; color: var(--parchment-dim); margin-bottom: 6px; }
.modal__link{ color: var(--sapphire); font-size: 0.8rem; text-decoration: none; }
.modal__link:hover{ text-decoration: underline; }

/* =========================== RESPONSIVE =========================== */

@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  .filters{
    position: fixed; inset: 0 20% 0 0; top: 0; z-index: 15;
    max-width: 320px; border-radius: 0;
    transform: translateX(-105%); transition: transform .22s ease;
    max-height: 100vh;
  }
  .filters.is-open{ transform: translateX(0); }
  .filters__scroll{ max-height: 100vh; }
  .btn--mobile-only{ display: inline-block; width: auto; }
  .site-head__inner{ padding: 16px 18px; }
  .site-head__titles p{ display: none; }
  .layout{ padding: 18px 16px 30px; }
  .ledger__totals{ grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}


/* =========================== EQUIPMENT DOLL + SUGGESTIONS =========================== */
body{padding-bottom:0}
.layout{grid-template-columns:260px minmax(0,1fr) 360px;max-width:1800px}
.loadout-panel{position:sticky;top:20px;background:var(--ink-panel);border:1px solid var(--ink-line);border-radius:var(--radius-m);box-shadow:var(--shadow-deep);padding:16px;max-height:calc(100vh - 40px);overflow:auto}
.loadout-panel__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--ink-line);padding-bottom:12px}
.loadout-panel h2,.set-reference h3{font-family:var(--font-display);font-size:.9rem;letter-spacing:.05em;color:var(--gold);margin:0}
.loadout-panel__head p{margin:4px 0 0;color:var(--parchment-mut);font-size:.78rem;line-height:1.35}
.doll{position:relative;display:grid;grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:92px 112px 112px;gap:8px;margin:16px 0}
.equip-slot{min-width:0;background:linear-gradient(180deg,var(--ink-panel-2),var(--ink-void));border:1px dashed var(--ink-line);border-radius:var(--radius-m);color:var(--parchment-dim);font-family:var(--font-body);font-size:.72rem;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.15s}
.equip-slot:hover,.equip-slot.is-active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(200,163,90,.25) inset}
.equip-slot.is-filled{border-style:solid;color:var(--parchment)}
.equip-slot img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.equip-slot span{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.equip-slot--ring1{grid-area:1/1}.equip-slot--helmet{grid-area:1/2}.equip-slot--amulet{grid-area:1/3}
.equip-slot--ring2{grid-area:2/1}.equip-slot--armor{grid-area:2/2}.equip-slot--cloak{grid-area:2/3}
.equip-slot--weapon{grid-area:3/1}.equip-slot--boots{grid-area:3/2}.equip-slot--shield{grid-area:3/3}
.doll__figure{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:76px;height:278px;pointer-events:none;opacity:.14;z-index:0}
.doll__head,.doll__body,.doll__legs{position:absolute;left:50%;transform:translateX(-50%);background:var(--gold)}
.doll__head{width:30px;height:34px;border-radius:50%;top:0}.doll__body{width:52px;height:105px;border-radius:18px 18px 8px 8px;top:38px}.doll__legs{width:38px;height:105px;top:148px;clip-path:polygon(0 0,100% 0,82% 100%,58% 100%,50% 45%,42% 100%,18% 100%)}
.tray__items{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--ink-line);padding-top:12px;max-height:180px;overflow:auto}
.tray-chip{display:grid;grid-template-columns:28px 1fr auto 22px;gap:7px;align-items:center;background:var(--ink-void);border:1px solid var(--ink-line-soft);border-radius:var(--radius-s);padding:4px 6px;font-size:.76rem}
.tray-chip img{width:26px;height:26px;object-fit:contain}.tray-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tray-chip small{color:var(--parchment-mut);font-size:.62rem}.tray-chip button{border:0;background:none;color:var(--crimson-bright);font-size:1.1rem;cursor:pointer}
.tray__empty{margin:0;color:var(--parchment-mut);font-style:italic;font-size:.78rem}
.ledger{margin-top:14px}.ledger__row--head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:.72rem;color:var(--gold);padding-bottom:8px}
.ledger__grid{display:flex;flex-wrap:wrap;gap:5px}.ledger-stat{font-family:var(--font-mono);font-size:.67rem;background:var(--ink-void);border:1px solid var(--ink-line-soft);padding:3px 5px;border-radius:3px;color:var(--gold-bright)}.ledger-stat small{color:var(--parchment-mut);margin-right:3px}.muted{color:var(--parchment-mut)}
.ledger__totals{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.ledger__total{padding:7px;background:var(--ink-void);border:1px solid var(--ink-line-soft);border-radius:3px}.ledger__total-label{display:block;color:var(--parchment-mut);font-size:.62rem}.ledger__total-value{font-family:var(--font-mono);color:var(--gold-bright);font-size:.82rem}.is-over{color:var(--crimson-bright)!important}
.set-bonuses{display:flex;flex-direction:column;gap:5px;margin-top:8px}.active-set{font-size:.72rem;border-left:2px solid var(--gold-dim);padding:5px 7px;background:var(--ink-void)}.active-set b,.active-set span{display:block}.active-set span{color:var(--parchment-dim);margin-top:2px}
.set-reference{margin-top:16px;border-top:1px solid var(--ink-line);padding-top:12px}.set-reference h3{margin-bottom:8px}.set-reference__body{display:flex;flex-direction:column;gap:5px;margin-top:8px}.set-reference__body div{background:var(--ink-void);border:1px solid var(--ink-line-soft);padding:6px;font-size:.72rem}.set-reference__body b,.set-reference__body span{display:block}.set-reference__body b{color:var(--gold)}.set-reference__body span{color:var(--parchment-dim);margin-top:2px}
.auto-builder__hint{font-size:.75rem;color:var(--parchment-mut);margin:0 0 8px;line-height:1.35}
.suggestions{position:relative;z-index:2;border-top:1px solid var(--gold-dim);background:var(--ink-panel);margin-top:20px}.suggestions__inner{max-width:1800px;margin:0 auto;padding:24px 28px}.suggestions__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.suggestions__head h2{margin:0;font-family:var(--font-display);font-size:1rem;color:var(--gold)}.suggestion-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.suggestion-card{background:var(--ink-panel-2);border:1px solid var(--ink-line);padding:12px;border-radius:var(--radius-m)}.suggestion-card__head{display:flex;justify-content:space-between;gap:8px;color:var(--gold-bright);font-family:var(--font-mono);font-size:.72rem}.suggestion-items{margin:9px 0;display:flex;flex-direction:column;gap:4px}.suggestion-items div{display:grid;grid-template-columns:28px 1fr auto;gap:6px;align-items:center;font-size:.75rem}.suggestion-items img{width:26px;height:26px;object-fit:contain}.suggestion-items small{color:var(--parchment-mut);font-size:.62rem}.suggestion-card .btn{width:100%}
.modal__cost{font-family:var(--font-mono);font-size:.8rem;color:var(--parchment-dim)}.modal__link{margin-top:12px}.modal__link a{color:var(--gold)}
@media(max-width:1250px){.layout{grid-template-columns:260px minmax(0,1fr)}.loadout-panel{position:relative;top:auto;grid-column:1/-1;max-height:none}.doll{max-width:520px;margin-left:auto;margin-right:auto}.tray__items{max-height:150px}}
@media(max-width:760px){.layout{grid-template-columns:1fr;padding:14px}.filters{position:relative;top:auto;max-height:none}.loadout-panel{grid-column:auto}.doll{grid-template-rows:82px 100px 100px}.site-head__inner{padding:16px}.site-head__titles p{display:none}.suggestions__inner{padding:18px 14px}.suggestion-list{grid-template-columns:1fr}.ledger__totals{grid-template-columns:1fr 1fr}}


/* =========================== DATA EDITOR =========================== */
.file-btn{position:relative;display:flex;align-items:center;justify-content:center;}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.edit-form{display:flex;flex-direction:column;gap:11px;margin-top:12px;}
.edit-form label{display:flex;flex-direction:column;gap:5px;color:var(--parchment-dim);font-size:.82rem;}
.edit-form textarea{min-height:84px;resize:vertical;line-height:1.35;}
.edit-form .edit-json{min-height:180px;font-family:var(--font-mono);font-size:.76rem;}
.edit-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.edit-form__actions{display:flex;gap:10px;margin-top:4px;}
.edit-form__actions .btn{width:auto;flex:1;}
@media(max-width:520px){.edit-form__grid{grid-template-columns:1fr;}.edit-form__actions{flex-direction:column;}}


/* ===== Saved custom loadouts ===== */
.saved-sets{margin-top:14px;padding-top:14px;border-top:1px solid var(--ink-line)}
.saved-sets__head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:9px}
.saved-sets__head h3{font-family:var(--font-display);font-size:.78rem;letter-spacing:.05em;color:var(--gold);margin:0}
.saved-sets__head p{margin:4px 0 0;color:var(--parchment-mut);font-size:.72rem;line-height:1.35}
.saved-sets__save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch}
.saved-sets__save .text-input{min-width:0}
.saved-sets__save .btn{white-space:nowrap}
.saved-sets__list{display:flex;flex-direction:column;gap:6px;margin-top:9px;max-height:190px;overflow:auto}
.saved-sets__empty{margin:0;padding:8px;border:1px dashed var(--ink-line-soft);border-radius:4px;color:var(--parchment-mut);font-size:.75rem;font-style:italic}
.saved-set{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:5px}
.saved-set__load{appearance:none;width:100%;border:1px solid var(--ink-line-soft);background:var(--ink-void);border-radius:4px;padding:7px 9px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--parchment)}
.saved-set__load:hover{border-color:var(--gold-dim);background:rgba(214,168,76,.06)}
.saved-set__load b{font-family:var(--font-display);font-size:.68rem;letter-spacing:.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-set__load small{color:var(--parchment-mut);font-family:var(--font-mono);font-size:.62rem;white-space:nowrap}
.saved-set__delete{appearance:none;border:1px solid var(--ink-line-soft);background:transparent;color:var(--parchment-mut);border-radius:4px;cursor:pointer;font-size:1rem;line-height:1}
.saved-set__delete:hover{border-color:var(--crimson-bright);color:var(--crimson-bright)}
.saved-sets__tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.saved-sets__tools .btn{font-size:.66rem;padding:7px 6px}
@media(max-width:520px){.saved-sets__save{grid-template-columns:1fr}.saved-sets__tools{grid-template-columns:1fr}}

/* ===== Hero level + dynamic bonuses ===== */
.hero-level-box{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(203,166,84,.28);background:rgba(203,166,84,.06);border-radius:12px}
.hero-level-box label{display:block;font-family:"Cinzel",serif;font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:8px}
.hero-level-box__row{display:flex;gap:10px;align-items:center}.hero-level-box__row input{width:82px;flex:0 0 82px}.hero-level-box__row small{opacity:.72;line-height:1.35}
.dynamic-effects{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 12px}.ledger-stat--effect{border-color:rgba(86,157,209,.32);background:rgba(86,157,209,.08)}
.dynamic-effects__empty{font-size:12px;opacity:.58}.bonus-raw{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.55;opacity:.78}

/* ===== Comparison ===== */
.comparison-section{padding:22px 28px 36px}.comparison-section__inner{max-width:1500px;margin:0 auto;border:1px solid rgba(203,166,84,.22);background:rgba(16,17,20,.92);border-radius:18px;padding:22px;box-shadow:0 16px 45px rgba(0,0,0,.25)}
.comparison-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.comparison-head h2{margin:0 0 5px;font-family:"Cinzel",serif}.comparison-head p{margin:0;opacity:.68}.comparison-mode{display:flex;gap:8px;flex-wrap:wrap}
.comparison-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.comparison-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.compare-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}.compare-card h3{margin:0 0 10px;font-size:15px}.compare-art-list{display:flex;gap:5px;flex-wrap:wrap}.compare-art-list span{width:40px;height:40px;border:1px solid rgba(203,166,84,.25);border-radius:7px;display:grid;place-items:center;background:rgba(0,0,0,.24)}.compare-art-list img{max-width:34px;max-height:34px}
.comparison-table{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}.comparison-table__row{display:grid;grid-template-columns:minmax(190px,1.6fr) repeat(3,minmax(85px,.7fr));gap:10px;padding:9px 12px;border-top:1px solid rgba(255,255,255,.065);align-items:center;font-size:13px}.comparison-table__row:first-child{border-top:0}.comparison-table__head{background:rgba(203,166,84,.08);font-family:"Cinzel",serif;font-size:11px}.comparison-table__row>span:not(:first-child),.comparison-table__row>strong{text-align:right}.comparison-table__row .is-better{font-weight:700}.comparison-table__row .is-worse{opacity:.72}
@media(max-width:900px){.comparison-head{flex-direction:column}.comparison-controls,.comparison-summary{grid-template-columns:1fr}.comparison-table__row{grid-template-columns:minmax(130px,1.4fr) repeat(3,minmax(65px,.7fr));font-size:11px;padding:8px}.comparison-section{padding:14px}.comparison-section__inner{padding:14px}.hero-level-box__row{align-items:flex-start;flex-direction:column}}
\n\n/* =========================== V1.3 NAV / SCROLL / COMPARE =========================== */\n.page-tabs{position:sticky;top:0;z-index:20;background:rgba(15,13,19,.96);border-bottom:1px solid var(--ink-line);backdrop-filter:blur(8px)}\n.page-tabs__inner{max-width:1800px;margin:0 auto;padding:0 28px;display:flex;gap:4px}\n.page-tab{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--parchment-mut);font-family:var(--font-display);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:13px 18px;cursor:pointer}\n.page-tab:hover{color:var(--parchment)}\n.page-tab.is-active{color:var(--gold-bright);border-bottom-color:var(--gold-bright);background:rgba(200,163,90,.055)}\n[hidden]{display:none!important}\n.results{position:sticky;top:62px;max-height:calc(100vh - 82px);overflow-y:auto;padding-right:8px;overscroll-behavior:contain;scrollbar-gutter:stable}\n.results::-webkit-scrollbar,.loadout-panel::-webkit-scrollbar{width:8px}.results::-webkit-scrollbar-thumb,.loadout-panel::-webkit-scrollbar-thumb{background:var(--ink-line);border-radius:4px}\n.filters,.loadout-panel{top:62px;max-height:calc(100vh - 82px)}\n.filters__scroll{max-height:calc(100vh - 82px)}\n.edit-stats{border:1px solid var(--ink-line);border-radius:var(--radius-s);padding:12px;margin:2px 0 4px}.edit-stats legend{padding:0 7px;color:var(--gold);font-family:var(--font-display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}\n.comparison-section{padding:26px 28px 40px;position:relative;z-index:1}.comparison-section__inner{max-width:1800px;margin:0 auto}\n.comparison-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.comparison-level-note{font-size:.82rem;color:var(--parchment-mut)}.comparison-level-note b{color:var(--gold-bright);font-family:var(--font-mono)}\n.comparison-add{width:auto!important;min-width:220px}\n.comparison-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:18px}\n.comparison-object{min-width:0}.comparison-object .filter-label{justify-content:flex-start}.comparison-object__pick{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:6px}.comparison-search{background-image:none!important;padding-right:11px!important}.comparison-remove{border:1px solid var(--ink-line);border-radius:var(--radius-s);background:transparent;color:var(--crimson-bright);font-size:20px;cursor:pointer}.comparison-remove:hover:not(:disabled){border-color:var(--crimson-bright)}.comparison-remove:disabled{opacity:.25;cursor:not-allowed}\n.comparison-summary{display:grid;grid-template-columns:repeat(var(--compare-cols),minmax(180px,1fr));gap:12px;margin-bottom:14px;overflow-x:auto}\n.comparison-table{overflow:auto;max-width:100%}.comparison-table__row{display:grid;grid-template-columns:minmax(260px,1.45fr) repeat(var(--compare-cols),minmax(150px,1fr));gap:10px;min-width:max-content}.comparison-table__row>span:not(:first-child),.comparison-table__row>strong,.comparison-table__row>b:not(:first-child){text-align:center}.comparison-table__head>b{display:flex;align-items:center;justify-content:center;line-height:1.25;min-height:34px}.comparison-table__head>b:first-child{justify-content:flex-start;text-align:left}.comparison-table__row>span:first-child{text-align:left}.comparison-table__row>span:not(:first-child){font-family:var(--font-mono)}\n@media(max-width:1250px){.results{position:relative;top:auto;max-height:72vh}.filters,.loadout-panel{top:auto}.comparison-section{padding:18px}.page-tabs__inner{padding:0 18px}}\n@media(max-width:760px){.page-tabs__inner{padding:0 12px}.page-tab{flex:1;padding:12px 8px}.results{max-height:none;overflow:visible}.comparison-toolbar{align-items:stretch;flex-direction:column}.comparison-add{width:100%!important}.comparison-controls{grid-template-columns:1fr}.comparison-table__row{grid-template-columns:minmax(180px,1.2fr) repeat(var(--compare-cols),minmax(120px,1fr))}}\n
/* =========================== V1.4 MENU / COMPARE UX =========================== */
.site-menu{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(203,166,84,.24);
  background:linear-gradient(180deg,rgba(20,18,24,.985),rgba(12,12,15,.97));
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
}
.site-menu__inner{
  max-width:1800px;
  margin:0 auto;
  padding:9px 28px;
  display:flex;
  align-items:center;
  gap:14px;
}
.site-menu__label{
  flex:0 0 auto;
  color:var(--parchment-mut);
  font-family:var(--font-display);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding-right:14px;
  border-right:1px solid var(--ink-line);
}
.site-menu__items{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.site-menu__items::-webkit-scrollbar{display:none}
.site-menu .page-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:0 0 auto;
  min-height:38px;
  padding:9px 16px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--parchment-mut);
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.site-menu .page-tab:hover{
  color:var(--parchment);
  border-color:var(--ink-line);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}
.site-menu .page-tab.is-active{
  color:var(--gold-bright);
  border-color:rgba(203,166,84,.48);
  background:linear-gradient(180deg,rgba(203,166,84,.15),rgba(203,166,84,.065));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.2);
}
.page-tab__icon{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:5px;
  color:var(--gold);
  background:rgba(203,166,84,.09);
  font-family:var(--font-mono);
  font-size:.68rem;
}
.site-menu .page-tab.is-active .page-tab__icon{background:rgba(203,166,84,.18);color:var(--gold-bright)}

/* The comparison page is a standalone workspace: no codex sidebars/catalog/suggestions. */
body.is-comparison-page #codexPage,
body.is-comparison-page .suggestions{display:none!important}
body.is-comparison-page .site-head__count{display:none}
body.is-comparison-page .comparison-section{min-height:calc(100vh - 150px)}

/* Shop status */
.card__flags{display:flex;flex-wrap:wrap;gap:5px}
.shop-badge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:5px;
  border:1px solid rgba(203,166,84,.42);
  border-radius:999px;
  background:rgba(203,166,84,.09);
  color:var(--gold-bright);
  padding:3px 8px;
  font-family:var(--font-display);
  font-size:.64rem;
  letter-spacing:.035em;
}
.modal__status{margin-top:7px}

/* Larger readable stats / bonuses in artifact cards and detail window. */
.card .stat-pill{font-size:.80rem;padding:3px 7px}
.card__set{font-size:.79rem;line-height:1.4}
.modal .stat-pill{font-size:.82rem;padding:4px 8px}
.modal .ledger-stat{font-size:.76rem;padding:5px 7px}
.modal .bonus-raw{font-size:.87rem;line-height:1.62;opacity:.88}

/* Independent comparison level selector. */
.comparison-toolbar{align-items:flex-end}
.comparison-level-control{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--parchment-mut);
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.035em;
}
.comparison-level-control span{white-space:nowrap}
.comparison-level-control .text-input{width:88px;min-width:88px;text-align:center;font-family:var(--font-mono);color:var(--gold-bright)}

/* Comparison picker: saved loadouts are ordinary selects; artifacts get a searchable dropdown. */
.comparison-object{position:relative;overflow:visible}
.comparison-object__pick{position:relative;overflow:visible}
.comparison-select{width:100%}
.comparison-combobox{position:relative;min-width:0}
.comparison-search{width:100%;background-image:none!important;padding-right:11px!important}
.comparison-combobox__menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 5px);
  left:0;
  right:0;
  max-height:310px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(203,166,84,.38);
  border-radius:9px;
  background:rgba(14,14,18,.995);
  box-shadow:0 18px 38px rgba(0,0,0,.46);
  padding:5px;
  scrollbar-gutter:stable;
}
.comparison-combobox__menu[hidden]{display:none!important}
.comparison-option{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--parchment);
  padding:8px 9px;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:.82rem;
}
.comparison-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comparison-option small{color:var(--parchment-mut);font-family:var(--font-mono);font-size:.60rem}
.comparison-option:hover,.comparison-option.is-active{background:rgba(203,166,84,.12);color:var(--gold-bright)}
.comparison-option-empty{padding:12px 10px;color:var(--parchment-mut);font-style:italic;font-size:.78rem}

.comparison-controls{overflow:visible}
.comparison-section__inner{overflow:visible}
.comparison-table__row>span:not(:first-child),
.comparison-table__row>strong,
.comparison-table__row>b:not(:first-child){text-align:center}

@media(max-width:760px){
  .site-menu__inner{padding:8px 12px;gap:8px}
  .site-menu__label{display:none}
  .site-menu__items{width:100%}
  .site-menu .page-tab{flex:0 0 auto;padding:9px 12px}
  .comparison-toolbar{align-items:stretch;flex-direction:column}
  .comparison-level-control{justify-content:space-between}
  .comparison-level-control .text-input{width:110px}
  .comparison-combobox__menu{max-height:260px}
}
.comparison-object:focus-within{z-index:90}


/* Site footer */
.site-footer{
  position:relative;
  z-index:1;
  margin-top:24px;
  border-top:1px solid rgba(203,166,84,.20);
  background:linear-gradient(180deg,rgba(10,10,13,.15),rgba(10,10,13,.62));
}
.site-footer__inner{
  width:min(1440px,calc(100% - 32px));
  min-height:66px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 0;
  color:var(--parchment-mut);
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.045em;
  text-align:center;
}
.site-footer__sep{color:rgba(203,166,84,.55)}
.site-footer a{
  color:var(--gold-bright);
  text-decoration:none;
  border-bottom:1px solid rgba(203,166,84,.35);
  transition:color .18s ease,border-color .18s ease,text-shadow .18s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:#f0d68f;
  border-color:rgba(240,214,143,.75);
  text-shadow:0 0 14px rgba(203,166,84,.18);
  outline:none;
}
@media(max-width:560px){
  .site-footer__inner{width:min(100% - 24px,1440px);flex-wrap:wrap;gap:6px 9px;font-size:.68rem}
}