:root{
  --bg:#0b0e14; --panel:#131822; --panel2:#1b2130; --edge:#28303f;
  --txt:#e6edf3; --dim:#8b97a8; --acc:#4ade80; --acc2:#60a5fa; --red:#f87171;
  --c1:#9aa4b2; --c2:#2dd4a7; --c3:#60a5fa; --c4:#c084fc; --c5:#fbbf24;
  --bronze:#b4785a; --silver:#a8b6c4; --gold:#e0b243; --prism:#8de3f0;
  /* Star glyph for the select-comp button, as a mask so it inherits color. */
  --star:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.45 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z"/></svg>');
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-size:14px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:16px;margin:0;font-weight:700}
h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:0 0 8px}
header{display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--panel);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:20}
.beta{color:var(--dim);font-weight:400}
.meta,.status{font-size:11px;color:var(--dim)}
.status{font-variant-numeric:tabular-nums}
.newexp{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px;
  white-space:nowrap;cursor:pointer}
.newexp input{accent-color:var(--acc)}
.spacer{flex:1}
.setname{font-size:12px;color:var(--dim)}
/* align-items:start shrink-wraps the sidebar's grid area to its own content,
   and a sticky element can never escape its containing block -- so it stuck
   for ~600px then scrolled away. Stretch gives it the full row to stick in. */
.wrap{display:grid;grid-template-columns:306px 1fr;align-items:stretch}
.wrap.filters-collapsed{grid-template-columns:64px 1fr}
/* --hdr is measured from the real header in JS: a hardcoded value drifts the
   moment the header wraps or its font changes, which reads as the sidebar
   sliding a few px under the header while you scroll */
.side{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:14px;
  margin:14px 0 14px 16px;
  position:sticky;top:calc(var(--hdr,47px) + 14px);
  max-height:calc(100vh - var(--hdr,47px) - 28px);
  overflow-y:auto}
.sidehead{margin-bottom:14px}
.filtertoggle{display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;
  color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.filtertoggle:hover,.filtertoggle:focus-visible{color:var(--txt);border-color:var(--acc2);
  outline:none}
.filtertoggle:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--acc2)}
.filtericon,.filterchev{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.filterchev{margin-left:auto;transition:transform .15s}
.filtertoggle[aria-expanded="false"] .filterchev{transform:rotate(-90deg)}
.sidecontent[hidden]{display:none}
.wrap.filters-collapsed .side{padding:8px;overflow:visible}
.wrap.filters-collapsed .sidehead{margin:0}
.wrap.filters-collapsed .filtertoggle{justify-content:center;padding:8px}
.wrap.filters-collapsed .filtertoggle-label,
.wrap.filters-collapsed .filterchev{display:none}
.side section{margin-bottom:20px}
.main{padding:14px 16px;min-width:0}
.hint{font-size:11px;color:var(--dim);line-height:1.45;margin:6px 0 0}
.hint .g{color:var(--acc)} .hint .r{color:var(--red)}
.tag{background:var(--panel2);border:1px solid var(--edge);border-radius:10px;
  padding:1px 7px;font-size:10px;color:var(--dim);font-weight:400;letter-spacing:0}

/* sliders */
.slider{display:flex;align-items:center;gap:10px}
.slider input[type=range]{flex:1;accent-color:var(--acc);height:18px}
.slider output{min-width:24px;text-align:center;font-weight:700;color:var(--acc);
  font-variant-numeric:tabular-nums;font-size:15px}

select{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--edge);
  border-radius:6px;padding:6px 8px;font-size:13px}
button{background:var(--panel2);color:var(--txt);border:1px solid var(--edge);
  border-radius:6px;padding:6px 11px;cursor:pointer;font-size:12px}
button:hover{border-color:var(--acc2)}
.effortctl{display:grid;grid-template-columns:1fr auto;gap:6px}
.effortctl button:disabled{opacity:.45;cursor:default}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;margin-top:9px;color:var(--dim)}
.chk input{accent-color:var(--acc)}

.costs{display:flex;gap:5px}
.costs .cbtn{flex:1;text-align:center;padding:6px 0;border:1px solid var(--edge);
  border-radius:6px;background:var(--panel2);cursor:pointer;font-weight:700;font-size:12px;
  color:var(--dim);user-select:none}
.costs .cbtn.on{color:#08120b;background:var(--acc);border-color:var(--acc)}
.groupex{margin-top:10px;padding-top:9px;border-top:1px dashed var(--edge)}
.groupex[hidden]{display:none}
.groupexlbl{display:block;margin-bottom:6px;color:var(--dim);font-size:9px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.groupcheck{display:flex;align-items:center;gap:6px;color:#aab3c0;font-size:11px;cursor:pointer}
.groupcheck input{margin:0;accent-color:var(--red)}
.groupcheck b{margin-left:auto;padding:0 5px;border:1px solid #394354;border-radius:8px;
  color:var(--dim);font-size:9px;font-variant-numeric:tabular-nums}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chips .emb{display:flex;align-items:center;gap:5px;background:#1d3b2b;border:1px solid var(--acc);
  border-radius:12px;padding:2px 8px;font-size:11px;cursor:pointer}
.chips .emb img{width:13px;height:13px}

/* unit picker */
.picker{container-type:inline-size;background:var(--panel);border:1px solid var(--edge);
  border-radius:10px;padding:12px 14px;margin-bottom:14px}
.pickhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pickhead h2{margin:0}
.pooltabs{display:inline-flex;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.pooltabs button{border:0;border-right:1px solid var(--edge);border-radius:0;padding:4px 9px;
  background:#171d28;color:var(--dim);font-size:11px}
.pooltabs button:last-child{border-right:0}
.pooltabs button:hover,.pooltabs button:focus-visible{background:#202838;color:var(--txt);outline:none}
.pooltabs button.active{background:#263248;color:#e6edf3}
.pickctl{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;gap:6px}
.pickctl input{background:var(--panel2);color:var(--txt);border:1px solid var(--edge);
  border-radius:6px;padding:5px 9px;font-size:12px;width:180px}
.pickctl button:disabled{opacity:.55;cursor:wait}
.savedmenu{position:relative}
.savedmenu>summary{list-style:none;cursor:pointer;padding:6px 9px;background:var(--panel2);
  color:var(--txt);border:1px solid var(--edge);border-radius:6px;font-size:12px;
  line-height:1.2;user-select:none;white-space:nowrap}
.savedmenu>summary::-webkit-details-marker{display:none}
.savedmenu[open]>summary{border-color:#48556a}
.savedlist{position:absolute;z-index:50;top:calc(100% + 6px);right:0;width:230px;
  max-height:280px;overflow:auto;padding:5px;background:#10141c;
  border:1px solid #333c4d;border-radius:7px;box-shadow:0 10px 28px #000b}
.saveditem{display:flex;align-items:center;gap:3px;border-bottom:1px solid #202735}
.saveditem:last-child{border-bottom:0}
.savedload{min-width:0;flex:1;border:0;background:transparent;text-align:left;
  padding:7px 6px;color:#d9dee7}
.savedload:hover,.savedload:focus-visible{background:#1b2230;color:#fff}
.savedname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saveddelete{flex:none;width:27px;height:27px;padding:0;border:0;background:transparent;
  color:#778191;font-size:18px;line-height:1}
.saveddelete:hover,.saveddelete:focus-visible{color:var(--red);background:#2a171b}
.savedempty{padding:12px 9px;color:var(--dim);font-size:11px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-top:10px}
.grid.traitview{grid-template-columns:minmax(0,1fr);align-items:start;gap:10px}
.traitgroup{min-width:0;padding:8px;border:1px solid #252e3d;border-radius:8px;background:#10151e}
.traitgroup.hide{display:none}
.traitgroup .poolhdr{margin:0 0 7px}
.traitunits{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
@container (min-width:620px){.grid.traitview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:930px){.grid.traitview{grid-template-columns:repeat(3,minmax(0,1fr))}}
.u{position:relative;border:2px solid var(--edge);border-radius:7px;overflow:hidden;
  cursor:pointer;background:var(--panel2);aspect-ratio:1;transition:border-color .1s,transform .06s}
.u:hover{transform:translateY(-1px)}
.u img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.u .nm{position:absolute;left:0;right:0;bottom:0;padding:2px 3px;font-size:9.5px;
  background:linear-gradient(transparent,rgba(0,0,0,.92) 55%);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
/* cost is already carried by the tile border + the cost-bucket header */
.u .cst{display:none}
.u.req img{opacity:1}
.u.req::before,.uc.req::before{content:"\2713";position:absolute;z-index:3;top:2px;right:2px;
  display:grid;place-items:center;width:16px;height:16px;box-sizing:border-box;
  border:1px solid #b7f7cb;border-radius:50%;background:var(--acc);color:#fff;
  box-shadow:0 1px 3px #000b;font-size:10px;font-weight:900;line-height:1;pointer-events:none}
/* A carry is a required unit you are also spending items on: the checkmark
   becomes a sword and the tile gets a warmer border so the item holders are
   readable at a glance in a dense picker. */
.u.carry::before,.uc.carry::before{content:"\2694";background:var(--gold,#e0b756);
  border-color:#f4d98b;color:#1b1405;font-size:11px}
.u.carry{border-color:var(--gold,#e0b756);box-shadow:0 0 0 1px #e0b75655}
.u.exc{border-color:var(--red);opacity:.35}
.u.exc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom right,transparent 47%,var(--red) 47%,var(--red) 53%,transparent 53%)}
.u.hide{display:none}
.c1{color:var(--c1)} .c2{color:var(--c2)} .c3{color:var(--c3)} .c4{color:var(--c4)} .c5{color:var(--c5)}
.b1{border-color:#3a4250} .b2{border-color:#1c6b56} .b3{border-color:#2b5b91}
.b4{border-color:#6d3f96} .b5{border-color:#9b7419}

/* results */
.rhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.count{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.comp{background:var(--panel);border:1px solid var(--edge);border-radius:9px;
  padding:10px 12px;margin-bottom:8px}
.comp.entering{animation:comp-enter .16s ease-out both}
@keyframes comp-enter{
  from{opacity:0;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.comp.entering{animation:none}}
.comphead{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.tline{display:flex;flex:1;flex-wrap:wrap;gap:5px;min-width:0}
.tb{display:flex;align-items:center;gap:4px;border-radius:11px;padding:2px 8px 2px 5px;
  font-size:11px;background:var(--panel2);border:1px solid var(--edge);white-space:nowrap}
.tb img{width:14px;height:14px;filter:brightness(1.6)}
.tb b{font-variant-numeric:tabular-nums}
.tb.bronze{border-color:var(--bronze);color:#e5b79f} .tb.silver{border-color:var(--silver);color:#dbe5ee}
.tb.gold{border-color:var(--gold);color:#f5d789} .tb.chromatic,.tb.prismatic{border-color:var(--prism);color:#c4f2f9}
.tb.unique{border-color:#7c6cf5;color:#c3bbff}
.tb.emb{border-style:dashed}
.comprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* The gold/profile/copy/pin cluster used to be the tail of .comprow, so its
   position floated with the portrait wrap: beside the last row at 8 units,
   dropped below at 6. Its own row pins it to the bottom of every card. */
.compfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.compfoot>.copycode{flex:none;width:30px;height:30px;margin:0 0 0 4px}
.compfoot>.copycode .copyicon{width:18px;height:18px}
.compfoot .teamprofile{margin-top:0}
/* Roster profile reads as a caption for the portraits above it, so it
   starts at the same left edge; gold and the buttons are pushed to the
   far end instead. */
.compfoot .teamprofile.compact{margin-left:0}
.compfoot .vg{margin-left:auto}
.upgradepath{flex:none;height:30px;margin-left:4px;padding:0 10px;border-color:#34506a;
  background:#142232;color:#a9caeb;font-weight:700}
.upgradepath:hover,.upgradepath:focus-visible{border-color:var(--acc2);color:#d7ebff;outline:none}
.upgradepath:disabled{opacity:.42;cursor:wait}
.upgradepanel{margin-top:10px;padding-top:10px;border-top:1px solid var(--edge)}
.upcontrols{display:flex;align-items:end;gap:8px;margin-bottom:9px}
.upcontrols label{display:flex;flex-direction:column;gap:4px;color:var(--dim);
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.upcontrols select{min-width:105px;padding:5px 24px 5px 7px;font-size:11px;text-transform:none;
  letter-spacing:0}
.uphint,.upnote{margin:0 0 8px;color:var(--dim);font-size:11px;line-height:1.4}
.uplist{display:flex;flex-direction:column;gap:5px}
.upmove{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(150px,1fr) auto;
  align-items:center;gap:10px;padding:8px 9px;border:1px solid var(--edge);
  border-radius:7px;background:var(--panel2);font-size:11px}
.upchange{display:flex;flex-wrap:wrap;gap:7px}
.upchamp{position:relative;display:block;flex:none;width:48px;height:48px;overflow:visible;
  padding:0;border:2px solid var(--edge);border-radius:8px;background:#111722}
.upchamp.add{border-color:var(--acc)}.upchamp.remove{border-color:var(--red)}
.upchamp.add{cursor:pointer}.upchamp.add:hover,.upchamp.add:focus-visible{
  border-color:#a5f7bf;filter:brightness(1.08);outline:none}
.upchamp>img{display:block;width:100%;height:100%;border-radius:5px;object-fit:cover}
.upchampmark{position:absolute;z-index:2;top:-6px;right:-6px;display:grid;place-items:center;
  width:18px;height:18px;border:2px solid var(--panel2);border-radius:50%;
  color:#07110a;font-size:14px;font-weight:900;line-height:1}
.upchamp.add .upchampmark{background:var(--acc)}
.upchamp.remove .upchampmark{background:var(--red);color:#190709}
.upchampname{position:absolute;left:0;right:0;bottom:0;padding:8px 2px 2px;
  border-radius:0 0 5px 5px;background:linear-gradient(transparent,#000e 60%);
  color:#fff;font-size:7.5px;line-height:1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uptraits{display:flex;flex-wrap:wrap;gap:5px}
.uptrait{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;
  border:1px solid var(--edge);border-radius:10px;background:#171d28;
  font-weight:700;white-space:nowrap}
.uptrait img{width:13px;height:13px;object-fit:contain;filter:brightness(1.5)}
.uptrait.add{border-color:#2c6242;color:var(--acc)}
.uptrait.remove{border-color:#66343d;color:var(--red)}
.uptrait.same{color:var(--dim)}
.upgold{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.upempty,.uploading{padding:14px;border:1px dashed var(--edge);border-radius:7px;
  color:var(--dim);font-size:11px;text-align:center}
/* At phone widths the footer itself wrapped and dropped the pin button onto
   a second line, so the cluster height varied card to card. Let the roster
   profile shrink instead: the buttons stay put and it keeps one row. */
@media(max-width:820px){
  .compfoot{flex-wrap:nowrap}
  .compfoot .teamprofile{flex:0 1 auto;min-width:0;overflow:hidden}
  .compfoot .vg{flex:none}
}
.comprow.alternate{gap:4px}
.uc{position:relative;display:block;flex:none;width:56px;height:56px;overflow:hidden;
  background:var(--panel2);border:2px solid var(--edge);border-radius:8px;cursor:pointer;
  transition:filter .1s,transform .1s}
.uc:hover{filter:brightness(1.12);transform:translateY(-1px)}
.uc img{display:block;width:100%;height:100%;border-radius:5px;object-fit:cover}
.uc .un{position:absolute;left:0;right:0;bottom:0;padding:9px 2px 2px;
  background:linear-gradient(transparent,rgba(0,0,0,.94) 55%);color:#fff;
  font-size:8.5px;line-height:1.1;text-align:center;text-shadow:0 1px 2px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.rtype{position:absolute;z-index:2;top:2px;left:2px;display:inline-flex;align-items:center;
  justify-content:center;gap:0;min-width:16px;height:16px;padding:1px 2px;
  box-sizing:border-box;border:1px solid #445064;border-radius:5px;
  background:#090c12e8;box-shadow:0 1px 3px #000b}
.rtype .si{width:11px;height:11px;margin:0;object-fit:contain}
.rtype.dual .si{width:9px;height:9px}
.rtype.tank{border-color:#4f7480}.rtype.ad{border-color:#8a682e}
.rtype.ap{border-color:#6056a0}.rtype.dual{border-color:#4d7180}
.teamprofile{display:inline-flex;align-items:center;margin-top:6px;overflow:hidden;
  border:1px solid #303a49;border-radius:11px;background:#171d28;color:#9da7b6;
  font-size:11px;line-height:1.3;white-space:nowrap}
.profilepart{display:inline-flex;align-items:center;gap:4px;padding:3px 8px}
.profilepart+.profilepart{border-left:1px solid #303a49}
.profilepart .si{width:13px;height:13px;margin:0;object-fit:contain}
.profilepart b{color:#dce2ea;font-size:11px;font-variant-numeric:tabular-nums}
.teamprofile.compact{flex:none;margin:0 0 0 auto}
.score{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:5px;font-size:10px;color:var(--dim);white-space:nowrap}
.score>span{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;
  border:1px solid #303a49;border-radius:10px;background:var(--panel2)}
.score b{font-size:10.5px;color:inherit;font-variant-numeric:tabular-nums}
.score .active{color:var(--acc);border-color:#2c6242}
.score .w{color:var(--red);border-color:#66343d}
.score .unique,.score .slots{color:#9aa4b2}
.copycode{position:relative;display:grid;place-items:center;width:28px;height:28px;
  margin:7px 0 0 auto;padding:0;border:1px solid #344052;border-radius:7px;
  background:#171d28;color:var(--dim);line-height:1;transition:color .1s,border-color .1s,background .1s}
.copycode:hover,.copycode:focus-visible{color:var(--acc2);border-color:var(--acc2);background:#18273a;outline:none}
.copycode:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--acc2)}
.copyicon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.checkglyph{display:none;stroke-width:2.1}
.copycode.copied{color:var(--acc);border-color:var(--acc);background:#12301f}
.copycode.copied .copyglyph{display:none}
.copycode.copied .checkglyph{display:block}
.copycode::after{content:attr(data-tip);position:absolute;z-index:30;right:-1px;
  bottom:calc(100% + 8px);width:max-content;max-width:190px;padding:6px 8px;
  border:1px solid #30394a;border-radius:5px;background:#080b10;color:var(--txt);
  box-shadow:0 5px 18px #0009;font-size:11px;font-weight:500;line-height:1.2;
  white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(3px);
  transition:opacity .1s,transform .1s,visibility .1s}
.copycode:hover::after,.copycode:focus-visible::after,.copycode.copied::after{
  visibility:visible;opacity:1;transform:translateY(0)}
.comprow>.copycode{flex:none;width:30px;height:30px;margin:0 0 0 4px}
.comprow>.copycode .copyicon{width:18px;height:18px}

/* Select a comp: pins it to the section above the results so it survives the
   next search and can be compared side by side. */
.pincomp{position:relative;flex:none;width:30px;height:30px;margin:0 0 0 4px;padding:0;
  display:grid;place-items:center;border:1px solid #344052;border-radius:7px;
  background:#171d28;color:var(--dim);line-height:1;
  transition:color .1s,border-color .1s,background .1s}
.pincomp::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.pincomp:hover,.pincomp:focus-visible{color:var(--c5);border-color:var(--c5);
  background:#2a2413;outline:none}
.pincomp:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--c5)}
.pincomp[aria-pressed="true"]{color:var(--c5);border-color:var(--c5);background:#2a2413}
.pincomp::after{content:attr(data-tip);position:absolute;z-index:30;right:-1px;
  bottom:calc(100% + 8px);width:max-content;max-width:190px;padding:6px 8px;
  border:1px solid #30394a;border-radius:5px;background:#080b10;color:var(--txt);
  box-shadow:0 5px 18px #0009;font-size:11px;font-weight:500;line-height:1.2;
  white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(3px);
  transition:opacity .1s,transform .1s,visibility .1s}
.pincomp:hover::after,.pincomp:focus-visible::after{visibility:visible;opacity:1;transform:translateY(0)}
.previewcomp{position:relative;flex:none;width:30px;height:30px;margin:0;padding:0;
  display:grid;place-items:center;border-color:#4d4a35;background:#18170f;color:#756f50;line-height:1}
.previewicon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.previewcomp[aria-pressed="true"]{border-color:var(--gold);color:#ffe38c;background:#342b10}
.previewcomp:hover,.previewcomp:focus-visible{border-color:var(--gold);color:#ffe38c}
.selnotice{margin:0 0 8px;padding:7px 9px;border:1px solid #674434;border-radius:6px;
  background:#241813;color:#e6ae91;font-size:11px}

.selected{margin-bottom:14px}
.selhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.selhead h2{font-size:12px;letter-spacing:.08em;color:var(--dim);margin:0;font-weight:700}
.selhead .tag{padding:1px 7px;font-size:11px}
.selhead .clearsel{margin-left:auto;padding:4px 10px;font-size:11.5px;
  color:var(--dim);border-radius:6px}
.selhead .clearsel:hover{color:var(--red);border-color:var(--red)}
/* Selected cards are visually distinct from the result rows below them. */
.selected .comp{border-color:#4a4327;background:linear-gradient(180deg,#1a1810,var(--panel) 60%)}
#list .comp.selected{border-color:#4a4327}
.wasted{font-size:10.5px;color:var(--red);opacity:.85;margin-top:6px}
.empty{color:var(--dim);padding:26px;text-align:center;border:1px dashed var(--edge);border-radius:9px}

@media(max-width:820px){
  /* six nowrap flex children cannot fit a phone: each one wrapped internally
     and the header became a ragged 3-line block. Two tidy rows instead:
     brand + title, then the dim metadata line. */
  header{flex-wrap:wrap;gap:2px 8px;padding:8px 12px}
  header .kit{flex:none;order:1}
  header h1{flex:none;font-size:15px;order:2}
  /* zero-height full-width break: forces a clean row split so the metadata
     shares one line instead of each item wrapping inside itself */
  header::after{content:'';flex-basis:100%;height:0;order:3}
  .setname{order:4}
  .meta{order:5}
  .setname,.meta{font-size:11px}
  /* a flex push is meaningless once the header wraps, and it would otherwise
     blow the metadata row apart */
  header .spacer{display:none}
  .newexp{order:6;font-size:11px}
  .wrap{grid-template-columns:1fr}
  .wrap.filters-collapsed{grid-template-columns:1fr}
  .side{position:static;max-height:none;border:none;border-radius:0;margin:0;
    border-bottom:1px solid var(--edge)}
  .wrap.filters-collapsed .side{padding:8px 16px;overflow:visible}
  .wrap.filters-collapsed .filtertoggle{justify-content:flex-start;width:100%}
  .wrap.filters-collapsed .filtertoggle-label,
  .wrap.filters-collapsed .filterchev{display:block}
  .wrap.filters-collapsed .filterchev{margin-left:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .comphead{flex-direction:column;gap:5px}
  .score{justify-content:flex-start}
  /* margin-left:auto + justify-content:flex-end made every wrapped row of the
     control cluster right-align independently, giving a ragged staircase with
     dead space on the left. On a phone let it start at the left edge and let
     the search box take the leftover width instead of a fixed 130px. */
  .pickctl{margin-left:0;justify-content:flex-start;width:100%;gap:6px}
  .pickctl input{flex:1 1 100%;width:auto;min-width:0}
  .savedmenu{flex:0 0 auto}
  .pickctl button,.savedmenu>summary{flex:1 1 auto;text-align:center;white-space:nowrap}
  .upmove{grid-template-columns:1fr auto;gap:6px}
  .upchange{grid-column:1/-1}
  .uptraits{min-width:0}
}

/* unique traits: shown but not scored */
.tb.uq{opacity:.62}
.tb.uq::after{content:'U';margin-left:5px;font-size:9px;font-weight:700;opacity:.75}
.tb.ns{opacity:.62}
/* overshoot marker, e.g. 4/5 Riftbeast */
.tb .ov{font-style:normal;color:#ff9f6b;font-weight:700;font-size:10px;margin-left:3px}
.chips .emb.req{border-color:#3ddc84;color:#3ddc84}

/* ---- trait requirement grid (replaces the 90-option dropdown) ---- */
/* Hex tiles: TFT renders traits as hexes, and icon-only kills the scrollbar.
   Name lives in the hover card, which already exists for these elements. */
/* Requirements include Rival; emblems do not, so each grid gets a clean rectangle. */
.tgrid{display:grid;gap:5px}
#traitGrid{grid-template-columns:repeat(5,1fr)}
#embGrid{grid-template-columns:repeat(6,1fr)}
.tg{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;
  aspect-ratio:1/1;background:#181d27;border:1px solid #232a36;border-radius:7px;
  user-select:none;transition:background .1s,border-color .1s,transform .1s}
.tg:hover{background:#202632;border-color:#54607a;transform:translateY(-1px);z-index:2}
.tg img{position:relative;width:60%;height:60%;object-fit:contain;
  filter:grayscale(1) opacity(.6);transition:filter .1s}
.tg .noimg{position:relative;width:60%;height:60%}
.tg .tgn{display:none}
.tg .tgv{position:absolute;top:-5px;right:-5px;font-weight:700;font-size:10px;
  line-height:16px;height:16px;min-width:16px;padding:0 3px;color:#0b0e14;
  background:#3ddc84;border:1px solid #0b0e14;border-radius:8px;text-align:center;
  display:none;z-index:3}
.tg.on{background:#12301f;border-color:#3ddc84}
.tg.on img{filter:none}
.tg.on .tgv{display:block}
.tg.hide{display:none}

/* result badges are clickable requirement pins */
.tb[data-tk]{cursor:pointer}
.tb[data-tk]:hover{outline:1px solid #3ddc84;outline-offset:1px}
.tb.pin{box-shadow:0 0 0 2px #3ddc84 inset}

/* ---- unit pool groups ---- */
.poolhdr{grid-column:1/-1;display:flex;align-items:center;gap:8px;
  margin:10px 0 1px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8b94a3}
.poolhdr:first-child{margin-top:2px}
.poolhdr::after{content:"";flex:1;height:1px;background:currentColor;opacity:.22}
.poolhdr i{font-style:normal;font-weight:700;font-size:9.5px;color:#6b7484;
  background:#181d27;border:1px solid #232a36;border-radius:8px;padding:0 6px;order:3}
.costhdr.c1{color:#9aa4b2}
.costhdr.c2{color:#4ac07a}
.costhdr.c3{color:#4a90d9}
.costhdr.c4{color:#c061d0}
.costhdr.c5{color:#e0a13a}
.traithdr{color:#aab6c8}
.traithdr img{width:17px;height:17px;object-fit:contain;filter:brightness(1.5)}
.poolhdr.hide{display:none}

/* ---- result unit portraits: cost identity ---- */
.uc.k1{border-color:#9aa4b2}
.uc.k2{border-color:#4ac07a}
.uc.k3{border-color:#4a90d9}
.uc.k4{border-color:#c061d0}
.uc.k5{border-color:#e0a13a}

/* search stopped short of a full sweep */
.status .cut{color:#ffb454;font-weight:700;cursor:help}
.status .hit{color:var(--acc);font-weight:700}
.status .effort{color:#aab3c0;font-weight:700}
.status .sampled{color:#c4a7ff;font-weight:700;cursor:help}
.tag.warn{background:#3a2a12;border-color:#7a5a1e;color:#ffb454}

/* ---- hover cards ---- */
#card{position:fixed;z-index:99;width:290px;max-height:70vh;overflow:auto;
  background:#10141c;border:1px solid #333c4d;border-radius:9px;padding:10px 11px;
  box-shadow:0 10px 34px #000a;font-size:11.5px;line-height:1.45;color:#c3cad6;
  opacity:0;pointer-events:none;transition:opacity .09s}
#card.show, .sheetbody.show{opacity:1}
#card .chd, .sheetbody .chd{display:flex;align-items:center;gap:8px;margin-bottom:7px}
#card .chd img, .sheetbody .chd img{width:30px;height:30px;object-fit:contain;flex:none}
#card .chd img.sq, .sheetbody .chd img.sq{border-radius:5px;object-fit:cover}
#card .chd b, .sheetbody .chd b{display:block;font-size:13px;color:#eef2f7}
#card .csub, .sheetbody .csub{font-size:10px;color:#8b94a3;letter-spacing:.04em}
#card .csub.k1, .sheetbody .csub.k1{color:#9aa4b2}#card .csub.k2, .sheetbody .csub.k2{color:#4ac07a}#card .csub.k3, .sheetbody .csub.k3{color:#4a90d9}
#card .csub.k4, .sheetbody .csub.k4{color:#c061d0}#card .csub.k5, .sheetbody .csub.k5{color:#e0a13a}
#card .clead, .sheetbody .clead{margin:0 0 7px;color:#aab3c0}
#card .tdetails, .sheetbody .tdetails{margin:0 0 7px;color:#c3cad6}
#card .tdetail, .sheetbody .tdetail{line-height:1.45}
#card .tunits, .sheetbody .tunits{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;padding-top:7px;
  border-top:1px solid #252d3a}
#card .tunit, .sheetbody .tunit{width:32px;height:32px;overflow:hidden;border:2px solid #394352;
  border-radius:5px;background:#181d27}
#card .tunit img, .sheetbody .tunit img{display:block;width:100%;height:100%;object-fit:cover}
#card .tunit.k1, .sheetbody .tunit.k1{border-color:#9aa4b2}#card .tunit.k2, .sheetbody .tunit.k2{border-color:#4ac07a}
#card .tunit.k3, .sheetbody .tunit.k3{border-color:#4a90d9}#card .tunit.k4, .sheetbody .tunit.k4{border-color:#c061d0}
#card .tunit.k5, .sheetbody .tunit.k5{border-color:#e0a13a}
#card .crow, .sheetbody .crow{display:flex;gap:7px;padding:3px 0;border-top:1px solid #1e2531}
#card .cbp, .sheetbody .cbp{flex:none;min-width:19px;height:17px;border-radius:4px;font-size:10px;
  font-weight:800;display:flex;align-items:center;justify-content:center;
  background:#232a36;color:#dfe5ee}
#card .cbp.bronze, .sheetbody .cbp.bronze{background:#5a3b23;color:#f0cba8}
#card .cbp.silver, .sheetbody .cbp.silver{background:#3f4652;color:#e7ecf3}
#card .cbp.gold, .sheetbody .cbp.gold{background:#7a5c17;color:#ffe9a8}
#card .cbp.chromatic, .sheetbody .cbp.chromatic, #card .cbp.prismatic, .sheetbody .cbp.prismatic{background:#5a3d6e;color:#f0d8ff}
#card .cbp.unique, .sheetbody .cbp.unique{background:#1f5a44;color:#b6f5da}
#card .ctx, .sheetbody .ctx{flex:1}
#card .tupgrades, .sheetbody .tupgrades{display:flex;flex-direction:column;gap:4px;margin-top:6px;
  padding-top:5px;border-top:1px solid #252d3a}
#card .tupgrade, .sheetbody .tupgrade{display:grid;grid-template-columns:34px minmax(0,1fr);gap:5px;
  align-items:start}
#card .tucount, .sheetbody .tucount{display:inline-flex;align-items:center;gap:3px;font-weight:700;
  color:#e5c75f;font-variant-numeric:tabular-nums}
#card .tstar, .sheetbody .tstar{width:23px;height:8px;object-fit:contain}
#card .si, .sheetbody .si{display:inline-block;width:14px;height:14px;margin:0 2px;object-fit:contain;
  vertical-align:-2px}
#card .ph, .sheetbody .ph{color:#7f8895;font-style:italic;cursor:help}
#card .cab, .sheetbody .cab{margin:7px 0 4px;padding-top:6px;border-top:1px solid #1e2531}
#card .cab b, .sheetbody .cab b{font-size:12px;color:#eef2f7}
#card .apara, .sheetbody .apara{margin:0 0 7px;color:#aab3c0}
#card .apara:last-child, .sheetbody .apara:last-child{margin-bottom:0}
#card .alabel, .sheetbody .alabel{color:#eef2f7;font-weight:800}
#card .asections, .sheetbody .asections{display:flex;flex-direction:column;gap:5px;margin-top:5px}
#card .asections .apara, .sheetbody .asections .apara{margin:0}
#card .amode, .sheetbody .amode{padding:6px 7px;background:#141a24;border:1px solid #252d3a;
  border-left-width:2px;border-radius:5px}
#card .amode.ad, .sheetbody .amode.ad{border-left-color:#d4a84f}
#card .amode.ap, .sheetbody .amode.ap{border-left-color:#7568df}
#card .amodekey, .sheetbody .amodekey{display:inline-flex;align-items:center;justify-content:center;gap:2px;
  margin-bottom:4px;padding:2px 5px;border-radius:4px;font-size:10px}
#card .amode.ad .amodekey, .sheetbody .amode.ad .amodekey{background:#4b3b1f;color:#f2d68c}
#card .amode.ap .amodekey, .sheetbody .amode.ap .amodekey{background:#302b57;color:#c9c3ff}
#card .amodestat, .sheetbody .amodestat{display:inline-flex;align-items:center;gap:1px;margin-left:3px}
#card .amodekey .si, .sheetbody .amodekey .si{width:12px;height:12px;margin:0}
#card .amodetext, .sheetbody .amodetext{display:block;color:#c3cad6;line-height:1.4}
#card .amodetext .apara, .sheetbody .amodetext .apara{margin:0;color:inherit}
#card .cchs, .sheetbody .cchs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
#card .cch, .sheetbody .cch{display:inline-flex;align-items:center;gap:3px;background:#181d27;
  border:1px solid #232a36;border-radius:5px;padding:1px 5px;font-size:10.5px}
#card .cch img, .sheetbody .cch img{width:13px;height:13px;object-fit:contain}
#card .crole, .sheetbody .crole{display:inline-flex;align-items:center;gap:5px;margin:0 0 7px;
  padding:3px 7px;background:#122628;border:1px solid #2f777d;border-radius:5px;
  color:#bfe7e8;font-size:10.5px;font-weight:700}
#card .crole img, .sheetbody .crole img{width:16px;height:16px;object-fit:contain}
#card .cnote, .sheetbody .cnote{margin:6px 0 0;font-size:10px;color:#6e7683;font-style:italic}

/* ---- muted traits: shown on boards, worth no score ---- */
/* hexes have no border to dash -- mute reads as a desaturated grey ring + dot */
.tg.muted{background:#14181f;border-color:#3a4354;border-style:dashed;opacity:.55}
.tg.muted img{filter:grayscale(1) opacity(.35)}
.tg.muted .tgv{display:block;background:#7f8895;color:#14181f}
.tb.mut{opacity:.45;border-style:dashed}
.tb.mut b{text-decoration:line-through}

/* secondary sort */
label.sub{display:block;margin-top:6px;font-size:11px;color:#8b94a3}
label.sub select{margin-top:3px}

/* unit card stat block */
.cstats{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:6px 0 2px}
.cstat{display:flex;justify-content:space-between;font-size:11px;line-height:1.6}
.cstat span{color:#8b94a3}
.cstat b{color:#e6e9ef;font-weight:600}
#card .stars, .sheetbody .stars{color:#e6e9ef;font-variant-numeric:tabular-nums;white-space:nowrap}
#card .stars i, .sheetbody .stars i{padding:0 2px;color:#687080;font-style:normal}

/* ---- per-board variants: same trait signature, different roster ---- */
.vtag{appearance:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:10px;font-weight:600;color:#8f98a8;background:transparent;border:0;
  border-radius:5px;padding:4px 6px;user-select:none;white-space:nowrap}
.vtag:hover{color:var(--txt);background:#1b2130}
.vtag:focus-visible{color:var(--txt);background:#1b2130;outline:1px solid var(--acc2)}
.comp.vopen .vtag{color:#b9c3d1;background:#1b2130}
.vchev{width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;
  transition:transform .12s,margin-top .12s}
.comp.vopen .vchev{transform:rotate(225deg);margin-top:3px}
.vlist{display:none;margin-top:6px;padding-top:6px;border-top:1px dashed #232a36;gap:5px}
.comp>.vlist{margin-top:0}
.comp.vopen .vlist{display:flex;flex-direction:column}
.comprow.alternate .uc{width:42px;height:42px;border-radius:7px}
.comprow.alternate .uc .un{padding:7px 1px 1px;font-size:7.5px}
.comprow.alternate .rtype{top:1px;left:1px;transform:scale(.85);transform-origin:top left}
.comprow.alternate .uc.req::before{top:1px;right:1px;transform:scale(.85);transform-origin:top right}
.vg{font-size:12px;color:var(--dim);margin-left:6px;padding-left:4px;white-space:nowrap}

/* ---- required trait tiles take the breakpoint's in-game tier colour ---- */
.tg.s-bronze{border-color:var(--bronze);background:#2a1c14}
.tg.s-bronze .tgv{background:var(--bronze);color:#1a0f08}
.tg.s-silver{border-color:var(--silver);background:#1c2129}
.tg.s-silver .tgv{background:var(--silver);color:#12161c}
.tg.s-gold{border-color:var(--gold);background:#2a2210}
.tg.s-gold .tgv{background:var(--gold);color:#1a1405}
.tg.s-chromatic,.tg.s-prismatic{border-color:var(--prism);background:#10262b}
.tg.s-chromatic .tgv,.tg.s-prismatic .tgv{background:var(--prism);color:#062026}

/* ---- "?" info affordance on panel headers ---- */
h2 .q{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;border-radius:50%;border:1px solid #3a4354;background:#181d27;
  color:#7f8895;font-size:9px;font-weight:800;font-style:normal;line-height:1;
  cursor:help;vertical-align:middle;user-select:none;transition:color .1s,border-color .1s}
h2 .q:hover,h2 .q:focus{color:#3ddc84;border-color:#3ddc84;outline:none}
#card .qline, .sheetbody .qline{margin:0 0 4px}
#card .qline:last-child, .sheetbody .qline:last-child{margin:0}
.meta .u{font-style:normal;color:#6b7280}

/* ---- selected/excluded units strip ---- */
.selc.group{border-left-color:var(--red)}
.selc.k1{border-left-color:#9aa4b2} .selc.k2{border-left-color:#4ac07a}
.selc.k3{border-left-color:#4a90d9} .selc.k4{border-left-color:#c061d0}
.selc.k5{border-left-color:#e0a13a}
@media(max-width:820px){ .selgrp{flex-direction:column;gap:4px} .sellbl{flex:none} }
/* traits below their scoring floor or tied to one unit shouldn't look clickable */
.tb.nopin{cursor:default}

/* dead traits: on the board but below the first breakpoint. Grey, inert,
   and showing n/next so the gap reads at a glance ("3/4 Riftbeast"). */
.tb.dead{opacity:.5;border-style:dashed;border-color:#333c4d;color:#8b95a3;
  background:#151a22;cursor:default}
.tb.dead img{filter:grayscale(1);opacity:.6}
.tb.dead b{font-weight:700}
.tb.dead b i{font-style:normal;opacity:.6;font-weight:600}
/* display:flex beats the hidden attribute; without this the empty
   REQUIRED/EXCLUDED labels render with no chips under them */
.sel[hidden],.selgrp[hidden]{display:none}
@media(max-width:820px){.comprow.primary>.uc{width:50px;height:50px}}

/* home link back to the kit — the explorer is one tool of several now */
.kit{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--dim);
  text-decoration:none;padding-right:12px;margin-right:2px;
  border-right:1px solid var(--edge)}
.kit span{color:var(--acc)}
.kit:hover{color:var(--txt)}

/* Optimality badge. Deliberately louder than the "incomplete" warning: the
   whole point of the solver is that users can trust a result at a glance. */
.opt{color:var(--acc);font-weight:700}
.tag.ok{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.45);
  color:var(--acc)}
/* interim state: proven boards are up, the wider search is still filling in */
.more{color:var(--dim)}
.more::after{content:'';display:inline-block;width:6px;height:6px;margin-left:5px;
  border-radius:50%;background:var(--acc2);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* Inactive ("partial") traits are informational. Group them so mobile can
   fold them behind a single chip instead of spending rows on them. */
.deadgrp{display:contents}
.deadsum{display:none}

@media(max-width:820px){
  /* the trait block was 120px of a 315px card -- 12 badges over 5 ragged rows.
     Tighten every badge, and collapse the inactive ones behind a "+N partial"
     chip that expands on tap. */
  .tb{font-size:10px;padding:1px 6px 1px 4px;gap:3px;border-radius:9px}
  .tb img{width:12px;height:12px}
  .tline{gap:4px}
  .deadgrp{display:inline-flex;flex-wrap:wrap;gap:4px}
  .deadgrp .tb.dead{display:none}
  .deadsum{display:inline-flex;align-items:center;padding:1px 8px;border-radius:9px;
    border:1px dashed #39424f;background:transparent;color:#7c8695;font-size:10px;
    font-style:normal;cursor:pointer;white-space:nowrap}
  .deadgrp.open .tb.dead{display:inline-flex}
  .deadgrp.open .deadsum{color:#aab3c0;border-style:solid}
}

/* Touch info sheet. Bottom-anchored rather than centred: the action buttons
   sit in the thumb zone, and leaving the grid visible above keeps the tile
   you tapped in context so you can browse several units in a row. */
.sheetwrap{position:fixed;inset:0;z-index:60;display:none}
.sheetwrap.show{display:block}
.sheetscrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  max-height:70vh;background:var(--panel,#151922);border-top:1px solid var(--line,#2a3040);
  border-radius:14px 14px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.5);
  padding:6px 14px calc(14px + env(safe-area-inset-bottom));
  animation:sheetup .18s ease-out}
@keyframes sheetup{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
/* The header is the drag surface, so it needs enough height to grab. The
   grip stays centred while the close button sits in the corner. */
.sheethead{position:relative;flex:none;height:26px;touch-action:none}
.sheetgrip{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--line,#2a3040)}
/* 44px tap target, pulled into the padding so it hugs the corner. */
.sheetx{position:absolute;top:-4px;right:-6px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:0;background:none;color:var(--dim,#8b94a3);font-size:17px;line-height:1;
  cursor:pointer}
.sheetx:active{color:var(--fg,#e8ecf3)}
/* Emblem stepper: the count is the subject, so it takes the middle. */
.sheetcount{flex:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--fg,#e8ecf3);
  font-variant-numeric:tabular-nums}
.sheetbtn[disabled]{opacity:.4}
/* Capped + internally scrollable: a full-height sheet is just a modal.
   overscroll-behavior stops a flick inside the sheet scrolling the page. */
.sheetbody{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheetfoot{flex:none;display:flex;gap:8px;padding-top:10px}
.sheetfoot[hidden]{display:none}
.sheetbtn{flex:1;min-height:42px;border-radius:9px;border:1px solid var(--line,#2a3040);
  background:var(--chip,#1b212c);color:var(--fg,#e8ecf3);font-size:13px;font-weight:600}
.sheetbtn.on{border-color:var(--acc,#7aa2f7);color:var(--acc,#7aa2f7)}
/* Pointer devices keep the hover card; never show the sheet there. */
@media (pointer:fine){.sheetwrap{display:none!important}}

/* Active filter bar. Sits above the results it shapes so the sidebar can
   stay collapsed on mobile without hiding what is being filtered. */
.afbar{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;padding:8px 10px;
  background:#151a23;border:1px solid #263041;border-radius:8px}
.afbar[hidden]{display:none}
.aflbl{flex:none;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  color:#8b97a8;padding-top:5px}
.afchips{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto;min-width:0}
.afchip{display:inline-flex;align-items:center;gap:4px;max-width:100%;
  padding:3px 6px;border-radius:5px;font-size:12px;line-height:1.3;cursor:pointer;
  background:#1d2532;border:1px solid #2d3a4d;color:#d5dce6}
.afchip img{width:16px;height:16px;border-radius:3px;flex:none}
.afct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afchip .x{flex:none;opacity:.5;font-size:10px;padding-left:1px}
.afchip:hover .x{opacity:1}
/* Colour carries the meaning: green requires, red excludes, amber adds. */
.afchip.req{border-color:#2f6b45;background:#16261d}
.afchip.exc{border-color:#7a3540;background:#26161a}
.afchip.emb{border-color:#7a6320;background:#241f12}
.afchip.mute{border-color:#4a4a4a;background:#1e1e1e;color:#9aa3ad}
.afchip.off{border-color:#7a3540;background:#26161a}
.afchip.num{border-color:#33506f;background:#152030}
.afclear{flex:none;background:none;border:1px solid #2d3a4d;color:#8b97a8;
  border-radius:5px;padding:4px 8px;font-size:11px;cursor:pointer}
.afclear:hover{color:#d5dce6;border-color:#3d4d66}
@media(max-width:820px){
  .afbar{flex-wrap:wrap;gap:6px;padding:7px 8px}
  .aflbl{padding-top:0}
  .afclear{margin-left:auto}
}

/* Breakpoint picker inside the trait sheet. Tiers sit on their own row so
   they read as a scale, with the wordier controls beneath them. */
.sheetfoot.trait{flex-direction:column;align-items:stretch}
.sheetbp{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-bottom:8px}
.sheetbp .sheetbtn.bp{flex:1 1 0;min-width:44px;padding:9px 4px;
  font-variant-numeric:tabular-nums;font-size:14px}
.sheetrow{display:flex;gap:6px;width:100%}
.sheetrow .sheetbtn{flex:1 1 auto}

/* The sheet borrows #card's content styles, but it is a full-width surface
   at phone size rather than a 290px floating panel, so the pieces that were
   tuned for that width need sheet-specific sizing. */
.sheetbody{font-size:13px;line-height:1.5;color:#c3cad6}
.sheetbody .chd{gap:10px;margin-bottom:9px}
.sheetbody .chd img{width:38px;height:38px}
.sheetbody .chd b{font-size:16px}
/* .csub is an inline span; without this it runs straight into the name. */
.sheetbody .csub{display:block;font-size:11px;margin-top:2px}
.sheetbody .clead,.sheetbody .tdetails{margin-bottom:9px}
/* Portraits stretched to fill the sheet and lost their cost border. */
.sheetbody .tunits{gap:7px;margin-top:10px;padding-top:9px}
.sheetbody .tunit{width:44px;height:44px;border-radius:6px;flex:none}
.sheetbody .cbp{min-width:22px;height:19px;font-size:11px}
.sheetbody .crow{padding:5px 0}
.sheetbody .tstar{width:26px;height:9px}

/* comp bar: the item plan for the carries you declared, above the results */
.compbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;
  padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--gold,#e0b756);
  border-radius:8px;background:#ffffff06;font-size:13px;line-height:1.35}
.compbar.warn{border-left-color:var(--red)}
.compbar .cb-l{color:var(--dim);text-transform:uppercase;font-size:10px;
  letter-spacing:.06em;margin-right:4px}
.compbar .cb-sep{color:var(--dim);opacity:.5;margin:0 2px}
.compbar .cb-w{color:var(--red)}