.hero-archive {
  --a-ink: var(--war-ink, #edf3ef);
  --a-muted: var(--war-muted, #91a29e);
  --a-gold: var(--war-amber, var(--gold, #e5b641));
  --a-green: var(--war-green, #75d69c);
  --a-line: var(--line, rgba(116,157,157,.22));
  --a-panel: var(--war-panel, var(--panel, #0d1718));
  display:grid;
  gap:1rem;
}
.hero-archive-heading,.hero-matches-embedded-head {
  padding:clamp(1.1rem,2.6vw,2rem);
  border:1px solid var(--a-line);
  background:linear-gradient(105deg,color-mix(in srgb,var(--a-gold) 9%,transparent),transparent 52%),var(--a-panel);
}
.hero-archive-heading h1 { margin:.18rem 0 .45rem;color:var(--a-ink);font-size:clamp(1.8rem,4vw,3.6rem); }
.hero-archive-heading p:last-child,.hero-matches-embedded-head p:last-child { margin:.35rem 0 0;color:var(--a-muted); }
.hero-archive-search {
  display:grid;grid-template-columns:minmax(14rem,.7fr) minmax(16rem,1fr);gap:.75rem 1.2rem;
  padding:1.15rem;border:1px solid var(--a-line);border-left:3px solid var(--a-gold);
  background:linear-gradient(90deg,rgba(229,182,65,.07),transparent 45%),rgba(5,10,11,.62);
}
.hero-archive-search>div:first-child { grid-row:1 / 3;align-self:center; }
.hero-archive-search h2 { margin:.15rem 0;color:var(--a-ink);font-size:1.2rem; }
.hero-archive-search p:last-child { margin:.25rem 0 0;color:var(--a-muted);font-size:.78rem; }
.hero-archive-search>label { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.hero-archive-search>input {
  min-height:48px;border:1px solid var(--a-line);padding:.7rem .85rem;color:var(--a-ink);
  background:#071011;font:inherit;outline:none;
}
.hero-archive-search>input:focus { border-color:var(--a-gold);box-shadow:0 0 0 2px rgba(229,182,65,.12); }
.hero-archive-search-results { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem; }
.hero-archive-search-results button {
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:.55rem;
  min-height:54px;border:1px solid var(--a-line);padding:.38rem;color:var(--a-ink);
  background:rgba(255,255,255,.018);text-align:left;cursor:pointer;
}
.hero-archive-search-results button:hover,.hero-archive-search-results button[aria-current="true"] { border-color:var(--a-gold);background:rgba(229,182,65,.08); }
.hero-archive-search-results img { width:42px;height:42px;object-fit:cover; }
.hero-archive-search-results span { display:grid;min-width:0; }
.hero-archive-search-results strong,.hero-archive-search-results small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hero-archive-search-results small { color:var(--a-muted);font-size:.67rem; }
.hero-archive-search-results i { color:var(--a-gold);font-style:normal; }
.hero-archive-search-empty { grid-column:1 / -1;margin:0;padding:.7rem;border:1px dashed var(--a-line);color:var(--a-muted);font-size:.75rem; }
.hero-matches-embedded-head h2 { margin:.2rem 0;color:var(--a-ink); }
.hero-archive .item-archive-layout {
  display:grid;
  grid-template-columns:minmax(250px,.34fr) minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--a-line);
  background:rgba(5,10,11,.46);
}
.hero-archive .item-archive-hero-panel { border-right:1px solid var(--a-line);background:rgba(5,10,11,.62); }
.hero-archive .item-archive-hero-panel>header {
  display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:.75rem;
  min-height:94px;padding:1rem;border-bottom:1px solid var(--a-line);
}
.hero-archive .item-archive-hero-panel>header>img,.hero-archive .item-archive-hero-panel>header>i {
  display:grid;width:58px;height:58px;place-items:center;border:1px solid var(--a-gold);
  object-fit:cover;color:var(--a-gold);font-style:normal;
}
.hero-archive .item-archive-hero-panel>header div { display:grid;gap:.12rem;min-width:0; }
.hero-archive .item-archive-hero-panel>header span,.hero-archive .item-archive-hero-panel>header small { color:var(--a-muted);font-size:.72rem; }
.hero-archive .item-archive-hero-panel>header strong { color:var(--a-ink);font-size:1.05rem; }
.hero-archive .item-archive-positions { display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-positions button {
  min-width:0;min-height:42px;border:0;border-right:1px solid var(--a-line);padding:.25rem;
  color:var(--a-muted);background:transparent;cursor:pointer;
}
.hero-archive .item-archive-positions button.is-selected { color:#091011;background:var(--a-gold); }
.hero-archive .item-archive-heroes { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:34rem;overflow:auto;padding:.5rem; }
.hero-archive .item-archive-heroes button {
  display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:.5rem;min-height:52px;
  border:1px solid transparent;padding:.4rem;color:var(--a-muted);text-align:left;background:transparent;cursor:pointer;
}
.hero-archive .item-archive-heroes button:hover { border-color:var(--a-line);background:rgba(97,198,210,.05); }
.hero-archive .item-archive-heroes button.is-selected { border-color:var(--a-gold);color:var(--a-ink);background:rgba(229,182,65,.09); }
.hero-archive .item-archive-heroes img,.hero-archive .item-archive-heroes i { width:38px;height:38px;object-fit:cover;font-style:normal; }
.hero-archive .item-archive-heroes span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hero-archive .item-archive-build { min-width:0; }
.hero-archive .item-archive-build-head {
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.25rem;
  min-height:142px;padding:1.5rem;border-bottom:1px solid var(--a-line);
}
.hero-archive .item-archive-build-head h3 { margin:.15rem 0;color:var(--a-ink);font-size:clamp(1.35rem,2.5vw,2.2rem); }
.hero-archive .item-archive-build-head>div>p:last-child { max-width:42rem;color:var(--a-muted);font-size:.8rem; }
.hero-archive .item-archive-source { display:inline-flex;margin-top:.55rem;border:1px solid var(--a-line);padding:.25rem .45rem;color:#61c6d2;font-size:.68rem;font-weight:800; }
.hero-archive .item-archive-source.is-backup { border-color:var(--a-gold);color:var(--a-gold); }
.hero-archive .item-archive-build-head dl { display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));margin:0;border:1px solid var(--a-line); }
.hero-archive .item-archive-build-head dl div { min-width:104px;padding:.65rem .75rem;border-right:1px solid var(--a-line); }
.hero-archive .item-archive-build-head dl div:last-child { border-right:0; }
.hero-archive .item-archive-build-head dt { color:var(--a-muted);font-size:.68rem; }
.hero-archive .item-archive-build-head dd { margin:.25rem 0 0;color:var(--a-gold);font-weight:850; }
.hero-archive .item-archive-status { display:grid;min-height:28rem;place-content:center;gap:.45rem;padding:2rem;text-align:center; }
.hero-archive .item-archive-status strong { color:var(--a-ink); }
.hero-archive .item-archive-status span,.hero-archive .item-archive-empty { color:var(--a-muted); }
.hero-archive .item-archive-section { padding:1.35rem 1.5rem;border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-section-title { display:flex;align-items:baseline;gap:.65rem;margin-bottom:.85rem; }
.hero-archive .item-archive-section-title span { color:var(--a-gold);font-size:.7rem;font-weight:900; }
.hero-archive .item-archive-section-title h3 { margin:0;color:var(--a-ink);font-size:1rem; }
.hero-archive .item-archive-section-note { margin:-.45rem 0 1rem;color:var(--a-muted);font-size:.75rem; }
.hero-archive .item-archive-starters { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem; }
.hero-archive .item-archive-starter { border:1px solid var(--a-line);padding:.8rem;background:rgba(255,255,255,.018); }
.hero-archive .item-archive-starter.is-highlight { border-color:var(--a-green); }
.hero-archive .item-archive-starter>header { display:flex;justify-content:space-between;gap:.65rem;margin-bottom:.7rem; }
.hero-archive .item-archive-starter>header strong { color:var(--a-green); }
.hero-archive .item-archive-starter>header span { color:var(--a-muted);font-size:.72rem; }
.hero-archive .item-archive-starter>div { display:flex;flex-wrap:wrap;gap:.5rem; }
.hero-archive .item-archive-item { display:inline-grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:.5rem;min-width:118px;min-height:46px; }
.hero-archive .item-archive-item img,.hero-archive .item-archive-item>i { width:38px;height:30px;object-fit:cover;font-style:normal; }
.hero-archive .item-archive-item>span { display:grid;gap:.15rem; }
.hero-archive .item-archive-item strong { color:var(--a-ink);font-size:.75rem; }
.hero-archive .item-archive-item small { color:var(--a-muted);font-size:.66rem;line-height:1.35; }
.hero-archive .item-archive-timeline-tracks { display:grid;grid-template-columns:minmax(270px,.42fr) minmax(360px,1fr);gap:.75rem;align-items:start; }
.hero-archive .item-archive-timeline-track { min-width:0;border:1px solid var(--a-line);background:rgba(5,10,11,.5); }
.hero-archive .item-archive-timeline-track>header { display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .8rem;border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-timeline-track>header div { display:grid;gap:.12rem; }
.hero-archive .item-archive-timeline-track>header span,.hero-archive .item-archive-timeline-track>header small { color:var(--a-muted);font-size:.62rem; }
.hero-archive .item-archive-timeline-track>header h4 { margin:0;color:var(--a-ink); }
.hero-archive .item-archive-timeline-track.is-core { border-color:var(--a-green); }
.hero-archive .item-archive-timeline-track.is-core h4 { color:var(--a-green); }
.hero-archive .item-archive-timeline { display:grid;margin:0;padding:.25rem 0;list-style:none; }
.hero-archive .item-archive-timeline li { display:grid;grid-template-columns:72px 10px minmax(0,1fr);align-items:center;gap:.75rem;min-height:58px;padding:.4rem .85rem;border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-timeline li:last-child { border-bottom:0; }
.hero-archive .item-archive-timeline time { color:var(--a-gold);font-size:.72rem;text-align:right; }
.hero-archive .item-archive-timeline-marker { width:7px;height:7px;border:1px solid var(--a-gold);background:var(--a-panel);transform:rotate(45deg); }
.hero-archive .item-archive-skill-builds { display:grid;gap:.7rem; }
.hero-archive .item-archive-skill-build { border:1px solid var(--a-line);background:rgba(255,255,255,.018); }
.hero-archive .item-archive-skill-build>header { display:flex;justify-content:space-between;gap:1rem;padding:.75rem .85rem;border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-skill-build>header strong { color:var(--a-green); }
.hero-archive .item-archive-skill-build>header span { color:var(--a-muted);font-size:.75rem; }
.hero-archive .item-archive-skill-build ol { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none; }
.hero-archive .item-archive-skill-build li { display:grid;gap:.25rem;min-height:4.4rem;padding:.7rem;border-right:1px solid var(--a-line);border-bottom:1px solid var(--a-line); }
.hero-archive .item-archive-skill-build li b { color:var(--a-gold);font-size:.66rem; }
.hero-archive .item-archive-skill-build li span { color:var(--a-ink);font-size:.74rem; }
.hero-archive-matches { display:grid;gap:.85rem; }
.hero-archive .hero-match-list { display:grid;gap:.75rem; }
.hero-archive .hero-match-card { padding:1rem;border:1px solid var(--a-line);background:var(--a-panel); }
.hero-archive .hero-match-title { display:flex;justify-content:space-between;gap:1rem; }
.hero-archive .hero-match-title h2 { margin:0;font-size:1rem; }
.hero-archive .hero-match-title a { color:var(--a-gold);text-decoration:none; }
.hero-archive .hero-match-title .is-win { color:var(--a-green); }
.hero-archive .hero-match-title .is-loss { color:#ffaaa0; }
.hero-archive .hero-match-facts { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin:1rem 0; }
.hero-archive .hero-match-facts dt { color:var(--a-muted);font-size:.7rem; }
.hero-archive .hero-match-facts dd { margin:.2rem 0 0;color:var(--a-ink);overflow-wrap:anywhere; }
.hero-archive .hero-match-capabilities { display:flex;flex-wrap:wrap;gap:.45rem; }
.hero-archive .hero-match-capabilities span { border:1px solid var(--a-line);padding:.28rem .55rem;color:var(--a-muted);font-size:.72rem; }
@media (max-width:980px) {
  .hero-archive .item-archive-layout { grid-template-columns:1fr; }
  .hero-archive .item-archive-hero-panel { border-right:0;border-bottom:1px solid var(--a-line); }
  .hero-archive .item-archive-heroes { grid-template-columns:repeat(4,minmax(0,1fr));max-height:17rem; }
  .hero-archive .item-archive-build-head { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .hero-archive-search { grid-template-columns:1fr; }
  .hero-archive-search>div:first-child { grid-row:auto; }
  .hero-archive-search-results { grid-template-columns:1fr; }
  .hero-archive .item-archive-heroes,.hero-archive .item-archive-starters,.hero-archive .item-archive-timeline-tracks { grid-template-columns:1fr; }
  .hero-archive .item-archive-build-head dl { grid-template-columns:1fr; }
  .hero-archive .item-archive-skill-build ol,.hero-archive .hero-match-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
}