:root{
  --bg:#f8f8f8; --panel:#fff; --ink:#222; --ink-subtle:#2c3e50;
  --border:#e8e8e8; --shadow:0 0 10px rgba(0,0,0,.08);
  --league:#3498db; --nature:#27ae60; --horde:#e74c3c;
  --brand:#3498db; --brand-2:#2980b9;
  --alt-bg:#ecf0f1; --alt-border:#f1c40f; --alt-ink:#b9770e;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --radius-1:8px; --radius-2:10px; --radius-pill:999px;
}
html,body{height:100%}
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; margin:0; }
.container{ width:min(1100px,92%); margin-inline:auto; margin-block:var(--space-3);
  background:var(--panel); padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow); border-radius:var(--radius-2); }
h1{ color:var(--ink-subtle); border-bottom:2px solid var(--brand); padding-bottom:.6rem; margin-top:0; }
h2{ color:var(--brand-2); margin-top:var(--space-4); padding-bottom:.4rem; border-bottom:1px dashed #ddd; }
h3{ margin:0 0 .6rem 0; color:var(--ink-subtle); }

.faction-title{ display:block; margin:var(--space-4) 0 var(--space-2); padding:0.85rem 1.2rem;
  color:#fff; font-weight:700; font-size:1.1rem; text-align:center; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.faction-title.league{background:var(--league)} .faction-title.nature{background:var(--nature)} .faction-title.horde{background:var(--horde)}
section.faction{ background:transparent; padding-block:.5rem; }
section.faction + section.faction{ margin-top:var(--space-4); border-top:1px solid #eaeaea; padding-top:var(--space-3); }

.sets-overview{ display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:var(--space-3); }
@media (max-width:960px){ .sets-overview{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .sets-overview{ grid-template-columns:1fr; } }
.set-card{ border:1px solid var(--border); border-radius:10px; padding:1rem; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.04); display:flex; flex-direction:column; gap:.6rem; }
.set-card .set-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.set-name{ font-weight:800; color:var(--ink-subtle); }
.set-badge{ font-size:.75rem; padding:.2rem .5rem; border-radius:999px; border:1px solid #e6e6e6; background:#fafafa; }
.set-points{ margin:0; padding-left:1.1rem; }
.set-points li{ margin:.2rem 0; }
.set-bestfor{ font-size:.92rem; color:#444; }

.set-image{ display:flex; justify-content:center; align-items:center; margin-bottom:.2rem; }
.set-image img{ width:250px; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.14); border:1px solid #dde3ea; transition:transform .25s ease, box-shadow .25s ease; }
.set-image img:hover{ transform:scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,.18); }
@media (max-width:640px){ .set-image img{ width:180px; } }

.gear-set-section{ display:grid; gap:var(--space-2); margin-bottom:var(--space-4); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .gear-set-section{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .gear-set-section{ grid-template-columns:1fr; } }
.set-column{ background:#f9f9f9; padding:var(--space-2); border-radius:8px; border:1px solid #eee; }
.set-column h3{ border-bottom:2px solid #ccc; padding-bottom:.4rem; text-align:center; }

.hero-list{ list-style:none; padding:0; margin:0; }
.hero-card{ border:1px solid #ececec; border-radius:10px; background:#fff; padding:.7rem .75rem; display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.hero-card .hero-chip-row{ margin:0; }
.hero-card .rationale{ margin:0; font-size:.95rem; color:#333; }
.hero-card .badges{ display:flex; gap:.4rem; flex-wrap:wrap; }
.badge{ font-size:.72rem; padding:.15rem .45rem; border-radius:999px; border:1px solid #e6e6e6; background:#fafafa; color:#555; }

.hero-chip-row{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
.hero-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.28rem .6rem; border:1px solid #e6e6e6; border-radius:var(--radius-pill); background:#fff; text-decoration:none; color:inherit; line-height:1.2; transition: background-color .25s ease, color .25s ease, transform .1s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 1px 0 rgba(0,0,0,.03); }
.hero-chip img{ width:28px; height:28px; border-radius:50%; border:1px solid #dcdcdc; object-fit:cover; background:#fff; box-shadow:0 0 0 2px #fff inset, 0 1px 1px rgba(0,0,0,.06); image-rendering:auto; }
.hero-chip:hover, .hero-chip:focus-visible{ transform:translateY(-1px); color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.hero-chip:hover img, .hero-chip:focus-visible img{ border-color:#fff; }
.hero-chip:hover, .hero-chip:focus-visible{ background:var(--brand); border-color:var(--brand-2); }
section.faction.nature .hero-chip:hover, section.faction.nature .hero-chip:focus-visible{ background:var(--nature); border-color:#1e8449; }
section.faction.horde  .hero-chip:hover, section.faction.horde  .hero-chip:focus-visible{ background:var(--horde);  border-color:#c0392b; }
section.faction.league .hero-chip:hover, section.faction.league .hero-chip:focus-visible{ background:var(--league); border-color:#21618c; }

.alternative-gear{ background:var(--alt-bg); padding:var(--space-2); border-left:5px solid var(--alt-border); margin-top:var(--space-3); border-radius:4px; }
.alternative-gear h3{ color:var(--alt-ink); border-bottom:1px solid var(--alt-border); padding-bottom:.3rem; margin-top:0; }
.alt-list{ margin:0; }
.alt-list dl{ display:grid; grid-template-columns: minmax(220px, 1fr) 2.3fr; gap:.6rem 1rem; align-items:start; margin:0; }
@media (max-width:720px){ .alt-list dl{ grid-template-columns:1fr; } }
.alt-list dt{ margin:0; padding:0; }
.alt-list dd{ margin:0; padding:.2rem 0 0 0; color:#333; }
.alt-list .hero-chip-row{ justify-content:flex-start; }

.disclaimer{ background:#fef9e7; border:1px solid var(--alt-border); color:#333; padding:.75rem; border-radius:6px; font-style:italic; text-align:center; font-size:.95rem; margin-bottom:var(--space-3); }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }