:root {
  /* fonts — matched to the Claudie/fellowsheepi site */
  --F: 'Barlow', system-ui, sans-serif;
  --FC: 'Barlow Condensed', sans-serif;
  --FD: 'Cinzel', serif;

  /* palette — matched to the Claudie/fellowsheepi site */
  --bg: #0c0e15;
  --bg-2: #12141d;
  --bg-3: #171a26;
  --border: #2a2d3e;
  --border2: #363a4f;
  --text: #c8cde0;
  --muted: #dfe3ef;   /* was faded grey #5a5f7a — now light/white per request */
  --accent: #6c8fff;
  --gold: #d4a84b;
  --green: #56d98a;
  --red: #f06060;
  --purple: #a78bfa;

  /* rarity */
  --r-Common: #9da4b0; --r-Uncommon: #56d98a; --r-Rare: #6c8fff;
  --r-Epic: #a78bfa; --r-Legendary: #d4a84b; --r-Champion: #f06060; --r-Heroic: #ffd24a;

  --primary-stat: #e7c98a;
  --secondary-stat: #8fb6ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, #191d2c 0%, rgba(12,14,21,0) 62%),
    var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--F);
  min-height: 100vh;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(23,26,38,.75), rgba(12,14,21,.35));
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px);
}
/* brand app-switcher (matches the Route Planner / Simulator sites) */
.brand { position: relative; }
#brandBtn { display: flex; align-items: center; gap: 9px; padding: 6px 12px; background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
#brandBtn:hover { border-color: var(--border); background: rgba(255,255,255,.03); }
#brandBtn img { width: 22px; height: 22px; border-radius: 4px; }
#brandBtn .brand-name { font-family: var(--FD); font-weight: 800; font-size: 18px; letter-spacing: .5px; color: #eef1fb; white-space: nowrap; }
#brandBtn .brand-name em { font-style: normal; font-weight: 600; color: var(--gold); }
#brandBtn .dd-arrow { font-size: 11px; color: var(--muted); transition: transform .15s; }
#brandBtn.open .dd-arrow { transform: rotate(180deg); }
#brandList { position: absolute; top: calc(100% + 4px); left: 0; min-width: 260px; background: var(--bg-2); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); overflow: hidden; display: none; z-index: 60; }
#brandList.open { display: block; }
#brandList a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--text); text-decoration: none; font-family: var(--FC); font-size: 14px; letter-spacing: .5px; border-bottom: 1px solid var(--border); }
#brandList a:last-child { border-bottom: none; }
#brandList a:hover { background: var(--bg-3); color: var(--gold); }
#brandList a.active { color: var(--gold); cursor: default; background: rgba(212,168,75,.06); }
#brandList a img { width: 22px; height: 22px; border-radius: 4px; }
#brandList .dd-sub { font-size: 10px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; font-family: var(--FC); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.field b { color: var(--gold); font-family: var(--F); }

/* custom hero dropdown (icons + hero colours, from the Route Planner) */
.hero-select { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.hs-cap { font-family: var(--FD); font-weight: 800; font-size: 18px; letter-spacing: .5px; color: #eef1fb; }
.hero-dd { position: relative; }
#heroBtn { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: max-content; padding: 7px 14px; background: var(--bg-3); color: var(--text); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
#heroBtn:hover { border-color: var(--border2); }
#heroBtn img { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto; background: #0a0c12; }
#heroBtn .hs-name { font-family: var(--FD); font-weight: 700; font-size: 16px; letter-spacing: .3px; }
#heroBtn .hs-name.muted { color: var(--muted); font-weight: 600; }
#heroBtn .dd-arrow { font-size: 11px; color: var(--muted); transition: transform .15s; }
#heroBtn[aria-expanded="true"] .dd-arrow { transform: rotate(180deg); }
#heroList { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: max-content; min-width: 100%; overflow: visible; background: var(--bg-2); border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); display: none; z-index: 60; padding: 4px; }
#heroList.open { display: block; }
.hero-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer; text-align: left; }
.hero-opt:hover { background: var(--bg-3); }
.hero-opt.selected { border-color: var(--border2); background: var(--bg-3); }
.hero-opt img { width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; background: #0a0c12; }
.hero-opt .hs-name { font-family: var(--FD); font-weight: 700; font-size: 15px; letter-spacing: .3px; }

select, input[type=number] {
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font: 400 13px var(--F); min-width: 150px;
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
input[type=number] { min-width: 64px; width: 70px; }
input[type=range] { width: 190px; accent-color: var(--gold); }

.btn {
  background: none; color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 12px; cursor: pointer; font: 600 12px var(--FC);
  text-transform: uppercase; letter-spacing: .5px; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); background: rgba(108,143,255,.08); }
.btn.ghost { color: var(--muted); }
.btn.small { padding: 3px 9px; font-size: 12px; }
/* share button + copy toast */
.share-btn { align-self: center; display: inline-flex; align-items: center; gap: 6px; border-color: var(--gold); color: var(--gold); }
.share-btn:hover { background: rgba(212,168,75,.12); border-color: var(--gold); }
.share-btn:disabled { opacity: .55; cursor: default; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--bg-2); border: 1px solid var(--gold); color: var(--text);
  padding: 9px 16px; border-radius: 9px; font-size: 13px; z-index: 200;
  box-shadow: 0 6px 22px rgba(0,0,0,.55); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.btn.primary { background: rgba(108,143,255,.15); border-color: var(--accent); color: #dfe7ff; }

.pill { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--border); color: var(--gold); font: 600 11px var(--F); text-align: center; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 1fr 380px; gap: 18px; max-width: 1180px; margin: 22px auto; padding: 0 18px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 0 24px rgba(0,0,0,.35); }
.panel h2 { font-family: var(--FC); font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 4px 0 12px; }
.panel.right h2:not(:first-child) { margin-top: 22px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: -4px -4px 14px; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: 600 13px var(--FC); text-transform: uppercase; letter-spacing: 1px; padding: 8px 14px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- gear grid ---------- */
.leg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 9px 11px; border: 1px solid var(--r-Legendary, #FF8C00); border-radius: 8px; background: rgba(255,140,0,.06); }
.leg-row > span { font-family: var(--FC); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #FF8C00; white-space: nowrap; }
.leg-row em { font-style: normal; color: var(--muted); }
.leg-row select { flex: 1; }
.gear-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 10px; align-items: start; }
@media (max-width: 560px) { .gear-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
.slot {
  padding: 10px; min-height: 134px;   /* uniform tile height — mods beyond 4 lines collapse to "+N more" */
  background: var(--bg-3); border: 1px solid var(--border); border-left: 3px solid var(--border2);
  border-radius: 8px; cursor: pointer; transition: border-color .15s, transform .05s;
}
.slot:hover { border-color: var(--accent); }
.slot:active { transform: translateY(1px); }
.slot.empty { display: flex; align-items: center; gap: 10px; }
.slot .icon { width: 44px; height: 44px; border-radius: 7px; background: #0a0c12; border: 1px solid var(--border); object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted); }
.slot .icon.slot-type-icon { background: transparent; border: none; object-fit: contain; opacity: .5; }
.slot .meta { min-width: 0; flex: 1; }
.slot .slot-name { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.slot .item-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.empty .item-name { color: var(--muted); font-weight: 400; font-style: italic; }
/* filled slot: name top-left, level top-right, icon + stats/mods below */
.slot-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.slot-hd-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* yellow ! when the item still has empty options to pick */
.slot-warn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(224,134,0,.16); border: 1px solid #E0A000; color: #FFC53D; font-family: var(--FC); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; flex: 0 0 auto; }
.slot-lvl { font-family: var(--FC); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.slot-body { display: flex; gap: 10px; align-items: flex-start; }
.slot-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.slot-stats { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; }
.slot-stat b { color: #eef1fb; font-weight: 700; }
.slot-mods { font-size: 11px; color: var(--muted); line-height: 1.4; }
.slot-mod-line { font-size: 12px; color: var(--text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-mod-line .mod-bullet { color: var(--muted); }
.slot-mod-line.slot-mod-more { color: var(--muted); font-size: 11px; font-style: italic; padding-left: 15px; }
.slot-mod-line.set-line { color: var(--gold); }
.slot-mod-line.leg-line { color: #f2c078; }
.leg-line .leg-diamond { color: #FF8C00; }
.leg-line .leg-tag { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.mod-set-tag { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); }
.mod-set-name { color: var(--gold); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-wrap { position: relative; flex: 0 0 auto; }
.slot-gem { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 5px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); }
/* config-modal fixed stats */
.fixed-stats { display: flex; flex-direction: column; gap: 3px; }
.fixed-stat { display: flex; justify-content: space-between; align-items: center; padding: 6px 11px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; }
.fixed-stat b { color: #eef1fb; font-weight: 700; }

.r-Common{border-left-color:var(--r-Common)!important} .r-Uncommon{border-left-color:var(--r-Uncommon)!important}
.r-Rare{border-left-color:var(--r-Rare)!important} .r-Epic{border-left-color:var(--r-Epic)!important}
.r-Legendary{border-left-color:var(--r-Legendary)!important}
.txt-Common{color:var(--r-Common)} .txt-Uncommon{color:var(--r-Uncommon)} .txt-Rare{color:var(--r-Rare)}
.txt-Epic{color:var(--r-Epic)} .txt-Legendary{color:var(--r-Legendary)} .txt-Champion{color:var(--r-Champion)} .txt-Heroic{color:var(--r-Heroic)}

/* ---------- talent board (fellowship-sim style) ---------- */
.tb-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tb-title { font-family: var(--FD); font-size: 15px; color: #eef1fb; }
.tb-pts { font-family: var(--FC); text-transform: uppercase; letter-spacing: .5px; font-size: 12px; color: var(--muted); margin-left: auto; }
.tb-pts b { color: var(--gold); font-family: var(--F); font-size: 15px; }
.tb-rows { display: flex; flex-direction: column; gap: 10px; }
.tb-row { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; }
.tb-numeral { font-family: var(--FD); font-size: 15px; color: var(--muted); text-align: center; }
.tb-cells { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.tb-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; cursor: pointer; }
.tb-icon-wrap { position: relative; width: 52px; height: 52px; }
.tb-icon { width: 52px; height: 52px; border-radius: 9px; border: 2px solid var(--border2); background: #0a0c12; object-fit: cover; filter: grayscale(.7) brightness(.55); transition: filter .15s, border-color .15s, box-shadow .15s; }
.tb-cell:hover .tb-icon { border-color: var(--accent); filter: grayscale(.2) brightness(.85); }
.tb-cell.on .tb-icon { filter: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(212,168,75,.5); }
.tb-cell.locked .tb-icon { opacity: .4; }
.tb-cell.locked { cursor: not-allowed; }
.tb-cost { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--bg); border: 1px solid var(--gold); color: var(--gold); font: 600 10px var(--F); display: flex; align-items: center; justify-content: center; }
.tb-name { font-size: 10px; line-height: 1.2; text-align: center; color: var(--muted); }
.tb-cell.on .tb-name { color: var(--text); }

.talent-tip { position: fixed; z-index: 60; max-width: 280px; background: var(--bg-2); border: 1px solid var(--border2); border-radius: 9px; padding: 10px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transition: opacity .12s; }
.talent-tip.show { opacity: 1; }
.talent-tip h3 { font-family: var(--FD); font-size: 14px; margin: 0 0 6px; color: #eef1fb; }
.talent-tip .tip-desc { font-size: 12px; color: var(--text); line-height: 1.5; }
.talent-tip .tip-cost { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 7px; }
.talent-tip .tip-cost b { color: var(--gold); }
.rt-effect, .rt-absorb { color: var(--accent); } .rt-bold { color: #eef1fb; font-weight: 600; } .rt-warning { color: var(--gold); }

/* ---------- blessings ---------- */
.blessing-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 560px) { .blessing-list { grid-template-columns: 1fr; } }
.blessing { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-3); cursor: pointer; }
.blessing:hover { border-color: var(--accent); }
.blessing.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,168,75,.18); }
.blessing .bl-icon { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto; filter: grayscale(.6) brightness(.7); }
.blessing.on .bl-icon { filter: none; }
.blessing .bl-name { font-weight: 600; font-size: 13px; }
.blessing .bl-rank { font-family: var(--FC); font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }
.blessing .bl-desc { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* ---------- traits (weapon / necklace) ---------- */
.trait-picker { display: flex; flex-direction: column; gap: 6px; }
.trait-cat-label { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* ---------- stat sheet ---------- */
.stat-sheet { display: flex; flex-direction: column; gap: 2px; }
.stat-row { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; }
.stat-row:nth-child(even) { background: rgba(255,255,255,.02); }
.stat-row .name { color: var(--muted); }
.stat-row .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.stat-row.primary .val { color: var(--primary-stat); }
.stat-row.secondary .val { color: var(--secondary-stat); }
.stat-row .val small { color: var(--muted); font-weight: 400; }
.stat-group-label { font-family: var(--FC); font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin: 12px 0 3px; }
.stat-toggle { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.stat-toggle input { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; flex: 0 0 auto; }
.stat-toggle:hover span { color: var(--text); }
.bonus-note { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(212,168,75,.06); border: 1px solid rgba(212,168,75,.22); }
.bonus-note-title { font-family: var(--FC); font-size: 10px; letter-spacing: 1.2px; color: var(--gold); text-transform: uppercase; margin-bottom: 4px; }
.bonus-note-row { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------- set bonuses ---------- */
.setbonus-list { display: flex; flex-direction: column; gap: 8px; }
.setbonus { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--border); }
.setbonus.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(212,168,75,.18); }
.setbonus.inactive { opacity: .5; }
.setbonus .sb-icon { width: 32px; height: 32px; border-radius: 6px; flex: 0 0 auto; }
.setbonus .sb-name { font-weight: 600; font-size: 13px; }
.setbonus .sb-count { font-family: var(--FC); font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }
.setbonus .sb-desc { font-size: 11px; color: var(--muted); white-space: pre-line; margin-top: 2px; }
.note { font-size: 11px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.note code { background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 10px; color: var(--purple); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(6,7,12,.66); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-card { background: var(--bg-2); border: 1px solid var(--border2); border-radius: 12px; width: min(560px, 100%); max-height: 86vh; overflow: auto; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-2); }
.modal-head h3 { font-family: var(--FD); font-weight: 600; margin: 0; font-size: 16px; color: #eef1fb; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row > span { font-family: var(--F); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #eef1fb; }
.cfg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.btn.ghost.cfg-back { font-family: var(--FD); font-weight: 700; font-size: 12px; letter-spacing: .3px; color: #eef1fb; }
.bluestats { font-family: var(--FD); font-weight: 800; font-size: 12.5px; letter-spacing: .5px; text-transform: none; }
.bs-blue { color: #22d3ee; }   /* cyan */
.bs-white { color: #eef1fb; }  /* brand white */
.bs-amt { color: #39ff14; text-transform: none; font-family: var(--FC); }  /* electric green */
.bs-cell { display: inline-flex; align-items: center; gap: 6px; }   /* Blue-Stat dropdown + its rolled amount */
.trait-list { display: flex; flex-direction: column; gap: 4px; }
.trait-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 84px; gap: 8px; align-items: center; }
.trait-row.att-row { grid-template-columns: 70px minmax(0, 1fr); }
.trait-row select { min-width: 0; width: 100%; }
.mod-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; align-items: center; }
.mod-row select { min-width: 0; width: 100%; }
/* effect-token styling (shared by modal descriptions + overview) */
.tok-cat { color: var(--gold); font-weight: 600; }
.tok-rank { color: var(--accent, #6c8fff); font-weight: 700; }
/* overview tab */
/* compact multi-column card grid: icon on the left, name + rank, effect underneath */
.overview-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 7px; align-items: start; }
/* section headers grouping sets / blessings / traits / attunements */
.ov-section { grid-column: 1 / -1; font-family: var(--FC); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 12px 0 1px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.ov-section:first-child { margin-top: 0; }
.ov-card { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); padding: 7px 9px; }
.ov-icon { width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto; object-fit: cover; background: #0a0c12; border: 1px solid var(--border2); }
.ov-body { min-width: 0; flex: 1; }
.ov-head { display: flex; align-items: baseline; gap: 6px; }
.ov-kind { display: none; }                                   /* the section header already says what it is */
.ov-name { font-family: var(--FD); font-weight: 700; font-size: 12.5px; color: #eef1fb; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-rank { margin-left: auto; font-family: var(--FC); font-size: 10px; color: var(--muted); font-weight: 700; border: 1px solid var(--border2); border-radius: 4px; padding: 0 5px; flex: 0 0 auto; }
.ov-slot { margin-left: auto; font-family: var(--FC); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ov-effect { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
/* which ability press grants a necklace sign (resolved per hero, like blessings name their abilities) */
.att-trigger { margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.att-trigger b { color: var(--gold); font-weight: 700; }
.trait-cat { font-family: var(--FC); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.trait-desc { font-size: 11px; margin: 0 0 6px 82px; }
.trait-desc.mod-desc { margin: 1px 0 8px 2px; }   /* modifier descriptions sit leftmost, under the row */
.trait-desc:empty { display: none; }
/* gems tab (ported from fellowship-sim) */
.gem-heskyr { min-height: 18px; margin-bottom: 8px; }
.gem-heskyr-on { color: var(--gold); font-family: var(--FC); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.gem-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gem-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gem-col, .gem-col-track, .gem-slots { overflow: visible; }
.gem-col-track { position: relative; width: 100%; display: flex; justify-content: center; padding: 3px 0; }
.gem-col-fill { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; border-radius: 2px; background: var(--gc); box-shadow: 0 0 8px var(--gc); transition: height .25s; }
.gem-slots { position: relative; display: flex; flex-direction: column-reverse; gap: 5px; }
.gem-slot { position: relative; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; display: flex; align-items: center; justify-content: center; transition: border-color .15s, box-shadow .15s; cursor: help; }
.gem-slot img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; filter: grayscale(1) brightness(.35); transition: filter .15s; }
.gem-slot.on { border-color: var(--gc); box-shadow: 0 0 7px color-mix(in srgb, var(--gc) 55%, transparent); }
.gem-slot.on img { filter: none; }
.gem-slot:hover, .gem-slot:focus-visible { border-color: var(--text); outline: none; }
.gem-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: 232px; padding: 11px 13px; background: #12141c; border: 1px solid var(--gc); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 40; text-align: left; }
.gem-slot:hover .gem-tip, .gem-slot:focus-visible .gem-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.gem-tip-name { font-family: var(--FD); font-size: 13px; font-weight: 600; color: var(--gold); text-align: center; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .5px; line-height: 1.3; }
.gem-tip-body { font-family: var(--F); font-size: 12px; line-height: 1.45; color: #dfe3ef; }
.gem-tip-foot { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--border); font-family: var(--F); font-size: 11px; line-height: 1.4; color: var(--muted); }
.gem-tip-foot b { color: var(--gc); font-weight: 600; }
.gem-tip-on { color: #56d98a; font-weight: 600; }
.gem-slots > .gem-slot:nth-last-child(-n+3) .gem-tip { bottom: auto; top: calc(100% + 8px); }
.gem-col-foot { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gem-col-name { font-family: var(--FD); font-weight: 700; font-size: 13px; color: var(--gc); }
.gem-col-power { font-family: var(--FC); font-size: 11px; color: var(--text); }
.gem-rank-count { font-family: var(--FC); font-size: 10px; color: var(--muted); }
.gem-over { color: var(--gold); font-weight: 700; }
.mod-budget { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.mod-bar { display: grid; grid-template-columns: 58px 1fr 52px; gap: 8px; align-items: center; }
.mod-label { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.mod-track { height: 7px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.mod-fill { height: 100%; background: var(--gold); transition: width .15s; }
.mod-val { font-family: var(--FC); font-size: 12px; color: var(--text); text-align: right; }
.mod-bar.over .mod-fill { background: #f0655a; }
.mod-bar.over .mod-val { color: #f0655a; }
.cfg-il { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cfg-leg-badge { font-family: var(--FC); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #FF8C00; }
.leg-mod { border-color: rgba(255,140,0,.35); }
.leg-mod .ov-name { color: #FF8C00; }
.leg-ability { border-color: rgba(255,140,0,.5); background: rgba(255,140,0,.06); }
.leg-ability .ov-name { color: #FF8C00; font-family: var(--FD); }
.item-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow: auto; padding-right: 4px; }
.item-opt { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; }
.item-opt:hover { background: var(--bg-3); }
.item-opt.selected { border-color: var(--gold); background: var(--bg-3); }
.item-opt small { color: var(--muted); }
.item-opt .opt-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-opt .opt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.set-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--FC); font-size: 11px; letter-spacing: .3px; color: var(--gold); text-transform: uppercase; }
.set-tag-icon { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; object-fit: cover; }
.opt-icon { width: 26px; height: 26px; border-radius: 5px; flex: 0 0 auto; background: #0a0c12; }
.stat-row .val small { color: var(--muted); font-weight: 400; margin-left: 0; margin-right: 5px; }
.controls-inline { display: flex; gap: 8px; align-items: center; }
.ilvl-note { font-family: var(--FC); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); align-self: center; }
.ilvl-note b { color: var(--gold); }
.gem-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border2); flex: 0 0 auto; box-shadow: 0 0 6px rgba(0,0,0,.4) inset; }
.gem-tier-icon { width: 28px; height: 28px; border-radius: 5px; object-fit: contain; flex: 0 0 auto; background: transparent; }

.loading { text-align: center; color: var(--muted); padding: 90px 20px; font-family: var(--FC); letter-spacing: 1px; text-transform: uppercase; font-size: 14px; }
.loading.error { color: var(--red); text-transform: none; letter-spacing: 0; font-family: var(--F); }