/* Dota Buddy — dark by design. This is a tool you open next to the game. */

/* Design tokens live in the reskin layer below. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  background: rgba(11, 14, 20, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand-mark {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 3px 10px rgba(200,68,46,.35);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.brand-text em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.patch-chip {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2;
}
.patch-chip b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.patch-chip span { font-size: 11px; color: var(--text-faint); }

/* ---------- Tabs ---------- */

.tabs {
  position: sticky;
  /* Offset and z-index are set in the reskin layer, which decides whether the
     topbar above stays pinned. Don't hard-code a height-derived offset here. */
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 0 max(10px, env(safe-area-inset-left));
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  flex: none;
  padding: 12px 13px 10px;
  font-size: 14px;
  font-weight: 520;
  color: var(--text-faint);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s;
}
.tabs a:hover { color: var(--text-dim); }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Layout ---------- */

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px max(16px, env(safe-area-inset-left)) 60px max(16px, env(safe-area-inset-right));
}

.loading, .empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-faint);
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 34px 0 14px;
}
.section-head:first-child { margin-top: 6px; }
.section-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.section-head .hint { font-size: 12.5px; color: var(--text-faint); }

/* ---------- At a glance ---------- */

.glance {
  background: linear-gradient(158deg, #1a2131 0%, var(--bg-card) 60%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: var(--shadow);
}

.glance-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
/* Eyebrow stacks above; the number and date share a baseline row beneath it. */
.glance-patch { display: flex; flex-direction: column; align-items: flex-start; }
.glance-patch-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.glance-patch b {
  font-size: 27px; font-weight: 660; letter-spacing: -0.025em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.glance-patch span { font-size: 12px; color: var(--text-faint); }

.glance-counts { display: flex; gap: 22px; }
.glance-counts div { text-align: right; line-height: 1.1; }
.glance-counts b {
  display: block;
  font-size: 21px; font-weight: 640; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.glance-counts span { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }

.glance-tldr {
  margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.55; color: #dbe3f0;
  max-width: 68ch;
}

/* The buff/nerf split, read at a glance instead of counted. */
.split-bar {
  display: flex; gap: 3px;
  height: 26px;
  margin-bottom: 14px;
  border-radius: 6px;
  overflow: hidden;
}
.split-bar i {
  display: flex; align-items: center; justify-content: center;
  font-style: normal;
  font-size: 11px; font-weight: 600;
  color: #0b0e14;
  white-space: nowrap;
  min-width: 8px;
}
.split-bar .nerf  { background: var(--nerf); }
.split-bar .buff  { background: var(--buff); }
.split-bar .mixed { background: var(--mixed); }
.split-bar .qol   { background: var(--qol); }

.wl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.wl > div { min-width: 0; }
.wl span {
  display: block;
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 3px;
}
.wl .win span  { color: var(--buff); }
.wl .lose span { color: var(--nerf); }
.wl b { font-size: 14.5px; font-weight: 620; letter-spacing: -0.01em; }
.wl p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

/* ---------- Headline cards ---------- */

.headline {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 9px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.headline.top { border-left: 3px solid var(--accent); }
.headline[open] { background: var(--bg-card); }

/* The scan row: everything you need to decide whether to open it. */
.headline-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "rank title stats chev" ". bites bites bites";
  align-items: center;
  gap: 7px 11px;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .14s;
}
.headline-row .rank { grid-area: rank; }
.headline-row h3   { grid-area: title; }
.row-stats         { grid-area: stats; }
.headline-row .chev { grid-area: chev; }

/* The bite-sized facts: enough to know whether this one is worth opening. */
.bites {
  grid-area: bites;
  display: flex; flex-wrap: wrap; gap: 5px 7px;
  align-items: center;
}
.bite {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}
.bite + .bite::before {
  content: "·";
  margin-right: 7px;
  color: #3d4759;
}
/* The first fact is the headline number, coloured by direction. */
.bite.worse   { color: #e08872; font-weight: 560; }
.bite.better  { color: #6cbe8b; font-weight: 560; }
.bite.neutral { color: var(--text-dim); font-weight: 560; }
.headline-row::-webkit-details-marker { display: none; }
.headline-row:hover { background: var(--bg-hover); }

.headline-row h3 {
  min-width: 0;
  margin: 0;
  font-size: 16.5px; line-height: 1.35; font-weight: 620; letter-spacing: -0.015em;
}
.headline.top .headline-row h3 { font-size: 18px; }

/* The one number that makes the headline land, without reading a sentence. */
.punch {
  flex: none;
  font-size: 12px; font-weight: 640;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.punch.worse   { background: var(--nerf-bg); color: #ef7a63; border: 1px solid rgba(210,84,63,.3); }
.punch.better  { background: var(--buff-bg); color: #5cbb80; border: 1px solid rgba(75,163,106,.3); }
.punch.neutral { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--line); }

.row-stats { display: flex; align-items: center; gap: 8px; flex: none; }
.headline-row .pill { flex: none; }

/* The neutral restatement is context once you're in, not something to scan past. */
.headline-top .what {
  margin: 0 0 14px;
  padding-left: 11px;
  border-left: 2px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--text-faint);
}

/* A real affordance: this reads as a button you can press, not a stray glyph. */
.chev {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-dim);
  transition: transform .2s ease, background .14s, color .14s, border-color .14s;
}
.chev svg { width: 14px; height: 14px; display: block; }
.headline-row:hover .chev {
  background: var(--bg-hover);
  border-color: #3a4560;
  color: var(--text);
}
.headline[open] .chev {
  transform: rotate(180deg);
  border-color: rgba(200,68,46,.4);
  color: var(--accent-soft);
}

.expand-all {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
  transition: all .14s;
}
.expand-all:hover { background: var(--bg-hover); color: var(--text-dim); }

.headline-top { padding: 2px 17px 4px; }

.headline-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 13px;
}

.rank {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: var(--text-faint);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}

.pill {
  font-size: 10.5px; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.pill.major { background: var(--nerf-bg); color: #ef7a63; border: 1px solid rgba(210,84,63,.3); }
.pill.notable { background: var(--mixed-bg); color: #dcac4e; border: 1px solid rgba(201,146,47,.3); }
.pill.minor { background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--line); }

.tag {
  font-size: 11px; color: var(--text-faint);
  background: var(--bg-raised); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 2px 7px;
}

.headline h3 {
  margin: 0 0 10px;
  font-size: 21px; line-height: 1.28; font-weight: 640; letter-spacing: -0.015em;
}

/* *emphasis* written in the brief — a nudge, not a shout */
em { font-style: italic; color: var(--text); }

.why-label {
  font-size: 10.5px; font-weight: 660; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.why { margin: 0 0 16px; font-size: 15px; line-height: 1.66; color: #cfd8e6; }

.do-list {
  margin: 0 0 14px;
  padding: 13px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.do-list .why-label { color: var(--buff); }
.do-list ul { margin: 0; padding-left: 17px; }
.do-list li { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 6px; }
.do-list li:last-child { margin-bottom: 0; }

.watch {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.55; color: var(--text-faint);
  display: flex; gap: 8px;
}
.watch::before { content: "→"; color: var(--gold); flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 11px 3px 3px;
  font-size: 12.5px;
  color: var(--text-dim);
  transition: background .14s, border-color .14s, color .14s;
}
.chip:hover { background: var(--bg-hover); border-color: #33405a; color: var(--text); }
.chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); }
.chip.item { padding-left: 4px; }
.chip.item img { width: 26px; height: 20px; border-radius: 3px; }

/* Verbatim disclosure */
details.verbatim { border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.16); }
details.verbatim summary {
  padding: 11px 17px;
  font-size: 12.5px; font-weight: 560;
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 7px;
  user-select: none;
}
details.verbatim summary::-webkit-details-marker { display: none; }
details.verbatim summary::before {
  content: "▸"; font-size: 10px; transition: transform .18s; display: inline-block;
}
details.verbatim[open] summary::before { transform: rotate(90deg); }
details.verbatim summary:hover { color: var(--text-dim); }
details.verbatim .body { padding: 2px 17px 16px; }

.raw-line {
  font-size: 13px; line-height: 1.55;
  padding: 6px 0 6px 13px;
  border-left: 2px solid var(--line);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12.5px;
}
.raw-line b { color: var(--text-faint); font-weight: 600; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; font-family: var(--font); }

/* ---------- Filters ---------- */

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.search {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.search::placeholder { color: var(--text-faint); }
.search:focus { border-color: #3a4a6b; }

.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .14s;
}
.filter-btn:hover { background: var(--bg-hover); }
.filter-btn b {
  font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}
.filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 560; }

/* Same colour language as the cards: red is weaker, green is stronger. A colour
   swatch also survives being read at a glance, which a word alone doesn't. */
.filter-btn.nerf, .filter-btn.buff, .filter-btn.mixed, .filter-btn.qol, .filter-btn.rework {
  position: relative;
  padding-left: 26px;
}
.filter-btn.nerf::before, .filter-btn.buff::before, .filter-btn.mixed::before,
.filter-btn.qol::before, .filter-btn.rework::before {
  content: "";
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
}
.filter-btn.nerf   { color: #e08872; border-color: rgba(210,84,63,.32); }
.filter-btn.nerf::before   { background: var(--nerf); }
.filter-btn.buff   { color: #6cbe8b; border-color: rgba(75,163,106,.32); }
.filter-btn.buff::before   { background: var(--buff); }
.filter-btn.mixed  { color: #d6a84a; border-color: rgba(201,146,47,.32); }
.filter-btn.mixed::before  { background: var(--mixed); }
.filter-btn.qol    { color: #6ea3d6; border-color: rgba(74,134,196,.32); }
.filter-btn.qol::before    { background: var(--qol); }
.filter-btn.rework { color: var(--text-dim); }
.filter-btn.rework::before { background: var(--text-faint); }

.filter-btn.nerf.active   { background: var(--nerf);  color: #fff; border-color: var(--nerf); }
.filter-btn.buff.active   { background: var(--buff);  color: #08120c; border-color: var(--buff); }
.filter-btn.mixed.active  { background: var(--mixed); color: #1a1206; border-color: var(--mixed); }
.filter-btn.qol.active    { background: var(--qol);   color: #06121e; border-color: var(--qol); }
.filter-btn.active::before { background: currentColor !important; opacity: .55; }

/* ---------- Grids ---------- */

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

.entity {
  display: flex; gap: 13px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: background .14s, border-color .14s, transform .14s;
}
.entity:hover { background: var(--bg-hover); transform: translateY(-1px); }
.entity.buff { border-left-color: var(--buff); }
.entity.nerf { border-left-color: var(--nerf); }
.entity.mixed { border-left-color: var(--mixed); }
.entity.qol, .entity.rework { border-left-color: var(--qol); }

.entity img.portrait {
  width: 54px; height: 54px; flex: none;
  border-radius: 8px; object-fit: cover;
  background: var(--bg-raised);
}
.entity img.itemimg {
  width: 54px; height: 40px; flex: none;
  border-radius: 5px; object-fit: contain;
  background: var(--bg-raised);
  padding: 2px;
}

.entity-body { min-width: 0; flex: 1; }
.entity-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.entity-name strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.entity-summary {
  font-size: 13px; line-height: 1.48; color: var(--text-dim);
  margin: 0 0 6px;
}
.entity-stats {
  display: flex; gap: 12px; font-size: 11.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.entity-stats b { color: var(--text-dim); font-weight: 600; }

.verdict {
  font-size: 10px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}
.verdict.buff { background: var(--buff-bg); color: var(--buff); }
.verdict.nerf { background: var(--nerf-bg); color: var(--nerf); }
.verdict.mixed { background: var(--mixed-bg); color: var(--mixed); }
.verdict.qol, .verdict.rework { background: var(--qol-bg); color: var(--qol); }

.impact { display: inline-flex; gap: 2.5px; align-items: center; }
.impact i {
  width: 4.5px; height: 4.5px; border-radius: 50%;
  background: var(--line); display: block;
}
.impact i.on { background: var(--text-faint); }
.impact.hi i.on { background: var(--accent-soft); }

/* ---------- Detail view ---------- */

.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-faint);
  margin-bottom: 16px;
  transition: color .14s;
}
.back:hover { color: var(--text); }

.detail-head {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.detail-head img {
  width: 76px; height: 76px; flex: none;
  border-radius: 11px; object-fit: cover;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}
.detail-head img.item { width: 88px; height: 66px; object-fit: contain; padding: 4px; }
.detail-head h1 {
  margin: 0 0 7px;
  font-size: 27px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em;
}
.detail-head .badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.statline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px;
  margin-bottom: 22px;
}
.stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.stat span {
  display: block;
  font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 3px;
}
.stat b { font-size: 19px; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat small { font-size: 11px; color: var(--text-faint); margin-left: 3px; font-weight: 400; }

.block { margin-bottom: 22px; }
.block h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.block p { margin: 0; font-size: 15.5px; line-height: 1.66; color: #cfd8e6; }
.block.lead p { font-size: 17px; color: var(--text); font-weight: 480; }

.advice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
  margin-bottom: 22px;
}
.advice > div {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.advice h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 650; }
.advice .play h4 { color: var(--buff); }
.advice .counter h4 { color: var(--nerf); }
.advice ul { margin: 0; padding-left: 16px; }
.advice li { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin-bottom: 6px; }
.advice li:last-child { margin-bottom: 0; }

.ability-group {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 9px;
}
.ability-group .head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 8px;
}
.ability-group .head img {
  width: 28px; height: 28px; border-radius: 5px; flex: none;
  background: var(--bg-raised);
}
.ability-group .head strong { font-size: 14px; font-weight: 600; }
.ability-group ul { margin: 0; padding-left: 16px; }
.ability-group li {
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin-bottom: 5px;
}
.ability-group li:last-child { margin-bottom: 0; }
.ability-group li.indent { margin-left: 14px; color: var(--text-faint); font-size: 13px; }

/* ---------- Full notes ---------- */

.notes-group { margin-bottom: 28px; }
.notes-group > h3 {
  font-size: 15px; font-weight: 620; margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}

.callout {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 17px;
  margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-dim);
}
.callout strong { color: var(--text); }

/* ---------- Footer ---------- */

.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 16px 40px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}
.footer p { margin: 0 0 5px; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  main { padding-top: 18px; }
  .headline h3 { font-size: 19px; }
  .headline-top { padding: 16px 16px 4px; }
  details.verbatim summary { padding: 11px 16px; }
  details.verbatim .body { padding: 2px 16px 14px; }
  .tldr { padding: 18px 17px 17px; }
  .tldr p { font-size: 15.5px; }
  .advice { grid-template-columns: 1fr; }
  .detail-head img { width: 60px; height: 60px; }
  .detail-head h1 { font-size: 22px; }
  .grid { grid-template-columns: 1fr; }
  .why { font-size: 14.5px; }
  .block p { font-size: 15px; }
  .block.lead p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .entity:hover, .post:hover { transform: none; }
}

/* ---------- Welcome / progress ---------- */

.welcome {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.welcome strong { color: var(--text); font-weight: 600; }
.welcome.new { border-left: 3px solid var(--accent); }
.welcome.done { border-left: 3px solid var(--buff); }

.head-actions { display: flex; align-items: center; gap: 10px; }
.progress {
  font-size: 12px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.aside {
  margin: 10px 0 0;
  font-size: 12.5px; color: var(--text-faint);
}

/* Unread headlines get a quiet dot, not a shout. */
.headline.unread .rank::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-soft);
  margin-right: 5px;
  vertical-align: 1px;
}

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 17px;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .14s, transform .1s;
}
.btn-primary:hover { background: #d64f37; }
.btn-primary:active { transform: translateY(1px); }

.link-btn {
  background: none; border: 0;
  color: var(--text-faint);
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 2px;
  transition: color .14s;
}
.link-btn:hover { color: var(--text-dim); }

.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s;
}
.icon-btn-label { font-size: 12.5px; }
/* On a phone the star alone carries it — the label would crowd the patch chip. */
@media (max-width: 560px) {
  .icon-btn { width: 30px; padding: 0; justify-content: center; border-radius: 8px; }
  .icon-btn-label { display: none; }
}
.icon-btn:hover { color: var(--gold); border-color: #3a4560; }
.icon-btn.on { color: var(--gold); border-color: rgba(217,164,65,.4); }

.top-actions { display: flex; align-items: center; gap: 11px; flex: none; }

.yours { color: var(--gold); font-size: 12px; }
.entity.mine { box-shadow: inset 0 0 0 1px rgba(217,164,65,.18), var(--shadow); }

/* ---------- Vote / card footer ---------- */

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 17px;
  border-top: 1px solid var(--line-soft);
  background: rgba(0,0,0,.14);
}
.vote { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vote span { font-size: 12.5px; color: var(--text-faint); }
.vote.voted span { color: var(--buff); }

.vote-btn {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .14s;
}
.vote-btn:hover { background: var(--bg-hover); color: var(--text); border-color: #33405a; }

/* ---------- Join ---------- */

.join {
  background: linear-gradient(150deg, #1c2436 0%, var(--bg-card) 62%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 30px;
}
.join.done { border-left: 3px solid var(--buff); }
.join h3 { margin: 0 0 6px; font-size: 18px; font-weight: 620; letter-spacing: -0.015em; }
.join p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--text-dim); max-width: 60ch; }
.join .join-form { display: flex; gap: 8px; flex-wrap: wrap; }
.join .join-email {
  flex: 1 1 220px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.join .join-email:focus { border-color: #3a4a6b; }
.join .note {
  margin: 12px 0 0;
  font-size: 12px; color: var(--text-faint); line-height: 1.5;
}

/* ---------- Hero picker modal ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 6, 10, .74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(720px, 100%);
  max-height: min(76vh, 700px);
  display: flex; flex-direction: column;
  padding: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head h3 { margin: 0 0 3px; font-size: 18px; font-weight: 620; letter-spacing: -0.015em; }
.modal-head p { margin: 0; font-size: 13px; color: var(--text-faint); }
.modal-close {
  background: none; border: 0; color: var(--text-faint);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 7px;
}
.modal-close:hover { color: var(--text); background: var(--bg-hover); }

.picker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 7px;
  margin-top: 12px;
  padding-right: 4px;
}
.picker-hero {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 5px 7px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: all .12s;
}
.picker-hero:hover { background: var(--bg-hover); }
.picker-hero img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.picker-hero span {
  font-size: 10.5px; line-height: 1.25; color: var(--text-faint);
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.picker-hero.on {
  border-color: var(--accent);
  background: rgba(200,68,46,.13);
}
.picker-hero.on span { color: var(--text); }
.picker-hero .dot {
  position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}

.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 15px; margin-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.modal-foot span { font-size: 13px; color: var(--text-faint); }

@media (max-width: 640px) {
  .modal { max-height: 86vh; padding: 16px; }
  .picker-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .card-foot { padding: 10px 16px; }
  .join { padding: 18px; }
}

.filter-btn.gold { color: var(--gold); border-color: rgba(217,164,65,.28); }
.filter-btn.gold.active { background: var(--gold); color: #1a1206; border-color: var(--gold); }

@media (max-width: 620px) {
  /* A fixed two-row shape, so every card reads the same regardless of title length. */
  /* Rank and severity share one thin meta line; title and facts get full width. */
  .headline-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "rank stats chev" "title title title" "bites bites bites";
    gap: 7px 9px;
    padding: 11px 14px;
  }
  .headline-row h3    { font-size: 16.5px; }
  .headline-row .chev { justify-self: end; }
  .row-stats          { justify-self: start; }
  .bite { font-size: 11.5px; }
  .glance-counts { gap: 16px; }
  .glance-counts b { font-size: 18px; }
  .wl { grid-template-columns: 1fr; gap: 12px; }
}

/* Opening a card should feel like it responded, not just reflowed. */
@media (prefers-reduced-motion: no-preference) {
  .headline[open] .headline-top { animation: reveal .22s ease-out; }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Signup riding inside the "you're caught up" banner. */
.join-inline {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.join-inline p {
  margin: 0 0 9px;
  font-size: 13.5px; color: var(--text-dim);
}
.join-inline .join-form { display: flex; gap: 8px; flex-wrap: wrap; }
.join-inline .join-email {
  flex: 1 1 200px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}
.join-inline .join-email:focus { border-color: #3a4a6b; }
.join-inline .btn-primary { padding: 8px 15px; font-size: 13px; }
.join-inline .note { margin: 9px 0 0; font-size: 11.5px; color: var(--text-faint); }


/* ═══════════════════════════════════════════════════════════════════════════
   RESKIN LAYER — "more like Dota 2" (design_handoff_dota_reskin)

   Everything above is structure: the grids, flex containers and template areas
   that decide where things sit. Everything below is the visual system — tokens,
   type, colour, panel treatment — and it deliberately loads last so it wins on
   the cascade.

   The handoff was written against these exact class names and assumes the
   structure above stays put (its own responsive block says as much: "keep the
   existing three-row reflow"). Folding the two together in one file, rather
   than shipping a second stylesheet, keeps it to one request and one place to
   look.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #07090c;
  --panel: linear-gradient(180deg, #131a1f, #0e1215);
  --panel-hover: linear-gradient(180deg, #1a2229, #121719);
  --inset: rgba(0, 0, 0, .36);
  --inset-deep: rgba(0, 0, 0, .42);

  --line: #23292e;
  --line-soft: #1b1f23;
  --line-strong: #3d4449;

  --text: #e8e4dc;
  --text-bright: #f2eee2;
  --text-dim: #a5aaac;
  --text-faint: #6b7176;
  --text-label: #b9ad8e;

  --accent: #c9a227;          /* gold — the primary accent */
  --accent-soft: #e3c469;
  --accent-line: rgba(201, 162, 39, .5);
  --accent-hair: rgba(201, 162, 39, .09);
  --dire: #b03a2b;            /* destructive / primary button */

  --buff: #8fb03f;   --buff-bg: rgba(143, 176, 63, .13);  --buff-bd: rgba(143, 176, 63, .40);
  --nerf: #c04a34;   --nerf-bg: rgba(192, 74, 52, .14);   --nerf-bd: rgba(192, 74, 52, .42);
  --mixed: #c8862c;  --mixed-bg: rgba(200, 134, 44, .13); --mixed-bd: rgba(200, 134, 44, .40);
  --qol: #4a8fa8;    --qol-bg: rgba(74, 143, 168, .13);   --qol-bd: rgba(74, 143, 168, .40);

  --worse: #d4826c;  --better: #a6c25c;  --neither: #b7bcbe;

  --radius: 0;
  --radius-sm: 0;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 6px 18px rgba(0, 0, 0, .35);
  --maxw: 1120px;

  --font: "Barlow Semi Condensed", Barlow, Helvetica, Arial, sans-serif;
  --display: Cinzel, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* angular notches, used instead of border-radius */
  --notch-card: polygon(0 0, 100% 0, 100% 76%, 84% 100%, 0 100%);
  --notch-detail: polygon(0 0, 100% 0, 100% 82%, 88% 100%, 0 100%);
  --notch-icon: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

/* ---------- page ---------- */

body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(154, 116, 44, .13), transparent 72%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .013) 0 2px, transparent 2px 7px),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: rgba(201, 162, 39, .3); }

/* ---------- top bar ---------- */

/* The bar spans the window for its background, but its contents line up with the
   content column below. On a wide screen the brand was sitting 365px outside it. */
.topbar {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 13, 16, .96), rgba(8, 10, 13, .9));
  border-bottom: 1px solid var(--line-soft);
  padding: 11px max(18px, env(safe-area-inset-right), calc((100% - var(--maxw)) / 2))
           11px max(18px, env(safe-area-inset-left), calc((100% - var(--maxw)) / 2));
}
/* the gold rule under the header */
.topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, .4), transparent);
}

.brand-mark {
  border-radius: 0;
  box-shadow: 0 0 22px rgba(201, 162, 39, .2);
}
.brand-text strong {
  font-family: var(--display);
  font-size: 16px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: #efe8d6;
}
.brand-text em { font-size: 12px; letter-spacing: .04em; }

.top-actions { gap: 12px; }

.patch-chip {
  padding-left: 14px;
  border-left: 1px solid #23282c;
  line-height: 1.05;
}
.patch-chip b { font-size: 19px; font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.patch-chip span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.icon-btn {
  height: 32px;
  border-radius: 0;
  padding: 0 13px;
  font-size: 13px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(201, 162, 39, .16), rgba(201, 162, 39, .05));
  border: 1px solid rgba(201, 162, 39, .42);
  color: #dcc78a;
}
.icon-btn:hover, .icon-btn.on {
  background: rgba(201, 162, 39, .24);
  border-color: rgba(201, 162, 39, .55);
  color: #f0e2b4;
}
@media (max-width: 560px) { .icon-btn { width: 32px; border-radius: 0; } }

/* ---------- tabs ---------- */

/* The brand bar scrolls away (position: relative above) and the tabs take over
   the top of the viewport, so they pin at 0 — not at the topbar's height. These
   two rules have to move together; that coupling is what broke the first time. */
.tabs {
  top: 0;
  z-index: 60;
  background: rgba(8, 10, 13, .94);
  border-bottom: 1px solid var(--line-soft);
  gap: 4px;
  /* Same alignment as the topbar — first tab sits on the content column's edge. */
  padding: 0 max(14px, env(safe-area-inset-right), calc((100% - var(--maxw)) / 2))
           0 max(14px, env(safe-area-inset-left), calc((100% - var(--maxw)) / 2));
}
.tabs a {
  padding: 13px 15px 11px;
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 2px solid transparent;
}
/* Five tabs need 523px and a phone gives 375, so Method sat entirely off-screen
   with nothing to say it was there. Tighten the tracking and padding until they
   fit rather than relying on a horizontal scroll nobody can see. */
@media (max-width: 560px) {
  .tabs { gap: 0; padding-left: 6px; padding-right: 6px; }
  .tabs a { padding: 13px 8px 11px; font-size: 11px; letter-spacing: .06em; }
}

.tabs a:hover { color: #c8c2b4; }
.tabs a.active {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(201, 162, 39, .02), rgba(201, 162, 39, .11));
  text-shadow: 0 0 18px rgba(201, 162, 39, .35);
}

/* ---------- layout ---------- */

main { padding: 24px 18px 64px; }

.section-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 13px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-label);
}
/* the accent diamond before every section heading */
.section-head h2::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--accent);
}
.section-head .hint { font-size: 12.5px; }

/* ---------- at a glance ---------- */

.glance {
  position: relative;
  padding: 24px 26px 20px;
  border: 1px solid #262d33;
  border-radius: 0;
  background: linear-gradient(168deg, #182027 0%, #101519 58%, #0d1114 100%);
  box-shadow:
    inset 0 0 0 1px var(--accent-hair),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 14px 34px rgba(0, 0, 0, .55);
}
/* ornamental corner ticks (two corners; add spans for four) */
.glance::before, .glance::after, .join::before, .join::after, .modal::before, .modal::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
}
.glance::before, .join::before, .modal::before {
  top: 6px; left: 6px;
  border-top: 1px solid var(--accent-line);
  border-left: 1px solid var(--accent-line);
}
.glance::after, .join::after, .modal::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid var(--accent-line);
  border-right: 1px solid var(--accent-line);
}

.glance-top { align-items: flex-end; gap: 18px; margin-bottom: 14px; }

/* eyebrow above the patch number — add <span class="glance-eyebrow">The patch at a glance</span> */
.glance-eyebrow {
  display: block;
  font-family: var(--display);
  font-size: 10.5px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase;
  color: #7d8082;
  margin-bottom: 2px;
}
.glance-patch { gap: 12px; }
.glance-patch b {
  font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.01em;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(201, 162, 39, .28);
}
.glance-patch span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }

.glance-counts { gap: 2px; }
.glance-counts div {
  text-align: center;
  min-width: 82px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid #22282d;
  line-height: 1.05;
}
.glance-counts b { font-size: 26px; font-weight: 700; color: var(--text); }
.glance-counts span { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; }

.glance-tldr {
  font-size: 17px; line-height: 1.5;
  color: #d6d1c6;
  max-width: 70ch;
  text-wrap: pretty;
  margin-bottom: 16px;
}

.split-bar {
  height: 30px;
  gap: 2px;
  border-radius: 0;
  margin-bottom: 16px;
}
.split-bar i {
  font-family: var(--display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(8, 10, 12, .82);
  min-width: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.split-bar .nerf  { background: linear-gradient(180deg, #c04a34, #863424); }
.split-bar .buff  { background: linear-gradient(180deg, #8fb03f, #647b2c); }
.split-bar .mixed { background: linear-gradient(180deg, #c8862c, #8c5e1f); }
.split-bar .qol   { background: linear-gradient(180deg, #4a8fa8, #346475); }

.wl { gap: 20px; padding-top: 15px; border-top: 1px solid #23282c; }
.wl span {
  font-family: var(--display);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  margin-bottom: 5px;
}
.wl b { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--text); }
.wl p { font-size: 13.5px; color: #7d8286; }

/* ---------- headline cards ---------- */

.headline {
  margin-bottom: 2px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.headline.top {
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(100deg, rgba(201, 162, 39, .07), rgba(0, 0, 0, 0) 34%),
    linear-gradient(180deg, #141b21, #0e1215);
}
.headline-row { gap: 8px 13px; }
.headline-row:hover { background: rgba(255, 255, 255, .022); }

.headline-row h3 {
  font-family: var(--display);
  font-size: 16.5px; line-height: 1.3; font-weight: 600; letter-spacing: .01em;
  color: #efeade;
  text-wrap: pretty;
}
.headline.top .headline-row h3 { font-size: 19px; }

.rank {
  font-family: var(--font);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #7d8286;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #262c31;
  border-radius: 0;
  padding: 2px 7px;
}
.headline.unread .rank::before {
  width: 4px; height: 4px;
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--accent);
  margin-right: 6px;
}

.bite { font-size: 13px; }
.bite + .bite::before { content: "/"; margin-right: 8px; color: #3a4045; }
.bite.worse   { color: var(--worse);   font-weight: 600; }
.bite.better  { color: var(--better);  font-weight: 600; }
.bite.neutral { color: var(--neither); font-weight: 600; }

.pill {
  font-family: var(--display);
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  border-radius: 0;
  padding: 3px 8px;
}
.pill.major   { background: var(--nerf-bg);  color: #d4614a; border: 1px solid var(--nerf-bd); }
.pill.notable { background: var(--mixed-bg); color: #d29a3d; border: 1px solid var(--mixed-bd); }
.pill.minor   { background: var(--inset);    color: var(--text-faint); border: 1px solid #2a3035; }

.chev {
  width: 24px; height: 24px;
  border-radius: 0;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #262c31;
  color: #7d8286;
}
.headline-row:hover .chev { border-color: var(--line-strong); color: var(--text-bright); }
.headline[open] .chev { border-color: var(--accent-line); color: var(--accent); }

.headline-top { padding: 4px 18px 6px; border-top: 1px solid #1e2429; }

.why-label {
  font-family: var(--display);
  font-size: 10px; font-weight: 700; letter-spacing: .24em;
  color: var(--accent);
  margin: 14px 0 7px;
}
.why {
  font-size: 16px; line-height: 1.62;
  color: #cdc8bd;
  max-width: 76ch;
  text-wrap: pretty;
  margin-bottom: 18px;
}

.do-list {
  padding: 14px 17px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid #1f252a;
  border-left: 2px solid var(--buff);
  border-radius: 0;
  margin-bottom: 16px;
}
.do-list .why-label { color: var(--buff); margin: 0 0 8px; }
.do-list li { font-size: 14.5px; line-height: 1.5; margin-bottom: 7px; }

/* diamond bullets everywhere a list appears */
.do-list ul, .advice ul, .ability-group ul, .notes-group ul { list-style: none; padding-left: 16px; }
.do-list li, .advice li, .ability-group li, .notes-group li { position: relative; }
.do-list li::before, .advice li::before, .ability-group li::before, .notes-group li::before {
  content: "";
  position: absolute; left: -16px; top: .55em;
  width: 4px; height: 4px;
  transform: rotate(45deg);
  background: #454b50;
}
.do-list li::before { background: #5e6d3c; }

.watch { font-size: 13.5px; margin-bottom: 16px; }
.watch::before { content: "→"; color: var(--accent); }

.chip {
  border-radius: 0;
  background: rgba(0, 0, 0, .36);
  border: 1px solid #262c31;
  padding: 3px 11px 3px 3px;
  font-size: 13px;
  gap: 7px;
}
.chip:hover { border-color: var(--line-strong); color: #efeade; background: rgba(201, 162, 39, .09); }
.chip img { width: 26px; height: 26px; border-radius: 0; background: #0a0d10; }
.chip.item img { width: 30px; height: 24px; border-radius: 0; }

details.verbatim { border-top: 1px solid #1e2429; background: rgba(0, 0, 0, .28); }
details.verbatim summary {
  padding: 11px 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
}
details.verbatim summary::before { content: "▶"; font-size: 9px; }
details.verbatim .body { padding: 2px 18px 16px; }

.raw-line { padding: 7px 0 7px 14px; border-left: 2px solid #262c31; }
.raw-line b {
  font-family: var(--display);
  font-size: 10px; letter-spacing: .16em;
  margin-bottom: 3px;
}

.card-foot { padding: 10px 18px; border-top: 1px solid #1e2429; background: rgba(0, 0, 0, .22); }
.vote span { font-size: 12.5px; letter-spacing: .06em; }
.vote-btn, .expand-all {
  border-radius: 0;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #262c31;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.expand-all { background: transparent; border-color: #2a3035; color: #7d8286; padding: 5px 12px; }
.vote-btn:hover, .expand-all:hover { border-color: var(--line-strong); color: #efeade; }
.link-btn { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.progress { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- filters & search ---------- */

.search {
  border-radius: 0;
  background: rgba(0, 0, 0, .42);
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-size: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  margin-bottom: 8px;
}
.search:focus { border-color: var(--accent-line); }

.filters { gap: 6px; }
.filter-btn {
  border-radius: 0;
  background: rgba(0, 0, 0, .34);
  border: 1px solid #262c31;
  padding: 7px 13px;
  font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.filter-btn b { font-size: 11.5px; font-weight: 700; opacity: .6; }
.filter-btn:hover { border-color: var(--line-strong); color: #efeade; }

/* diamond swatches instead of round dots */
.filter-btn.nerf::before, .filter-btn.buff::before, .filter-btn.mixed::before,
.filter-btn.qol::before, .filter-btn.rework::before {
  width: 7px; height: 7px;
  border-radius: 0;
  transform: translateY(-50%) rotate(45deg);
}
.filter-btn.nerf  { color: var(--nerf);  border-color: var(--nerf-bd); }
.filter-btn.buff  { color: var(--buff);  border-color: var(--buff-bd); }
.filter-btn.mixed { color: var(--mixed); border-color: var(--mixed-bd); }
.filter-btn.qol   { color: var(--qol);   border-color: var(--qol-bd); }
.filter-btn.gold  { color: #d8bc63; border-color: rgba(201, 162, 39, .42); background: rgba(201, 162, 39, .09); }

.filter-btn.active {
  background: linear-gradient(180deg, #e5e0d2, #c2bdaf);
  color: #12161a; border-color: #e5e0d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.filter-btn.nerf.active  { background: linear-gradient(180deg, #c04a34, #8a3526); color: #fff;    border-color: #c04a34; }
.filter-btn.buff.active  { background: linear-gradient(180deg, #8fb03f, #677f2d); color: #0b1206; border-color: #8fb03f; }
.filter-btn.mixed.active { background: linear-gradient(180deg, #c8862c, #906020); color: #1a1206; border-color: #c8862c; }
.filter-btn.qol.active   { background: linear-gradient(180deg, #4a8fa8, #356778); color: #04121a; border-color: #4a8fa8; }
.filter-btn.gold.active  { background: linear-gradient(180deg, #c9a227, #8f7119); color: #12161a; border-color: #c9a227; }
.filter-btn.active::before { background: rgba(0, 0, 0, .45) !important; opacity: 1; }

/* ---------- entity cards ---------- */

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

.entity {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 0;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.entity:hover { background: var(--panel-hover); transform: none; }
.entity.mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 0 1px rgba(201, 162, 39, .16); }

/* hero cards use the crop art from data (h.portrait), not the square icon */
.entity img.portrait {
  width: 86px; height: 58px;
  border-radius: 0;
  object-fit: cover;
  background: #0a0d10;
  clip-path: var(--notch-card);
}
.entity img.itemimg {
  width: 58px; height: 44px;
  border-radius: 0;
  padding: 3px;
  background: #0a0d10;
}

.entity-name strong {
  font-family: var(--display);
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
}
.entity-summary { font-size: 13.5px; line-height: 1.44; color: #969b9e; margin-bottom: 7px; }
.entity-stats { gap: 14px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.entity-stats b { font-size: 13px; font-weight: 700; color: #d6d1c6; }

.yours { color: var(--accent); font-size: 10px; }   /* the glyph becomes ◆ in markup */

.verdict {
  font-family: var(--display);
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  border-radius: 0;
  padding: 2px 6px;
}
.verdict.buff  { background: var(--buff-bg);  color: var(--buff);  border: 1px solid var(--buff-bd); }
.verdict.nerf  { background: var(--nerf-bg);  color: var(--nerf);  border: 1px solid var(--nerf-bd); }
.verdict.mixed { background: var(--mixed-bg); color: var(--mixed); border: 1px solid var(--mixed-bd); }
.verdict.qol, .verdict.rework { background: var(--qol-bg); color: var(--qol); border: 1px solid var(--qol-bd); }

/* diamond impact pips */
.impact { gap: 3px; }
.impact i {
  width: 4px; height: 4px;
  border-radius: 0;
  transform: rotate(45deg);
  background: #2d3338;
}
.impact i.on { background: #7d8286; }
.impact.hi i.on { background: var(--accent); }

/* ---------- detail ---------- */

.back { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.detail-head {
  gap: 20px;
  padding: 16px 18px;
  margin-bottom: 22px;
  border: 1px solid #262d33;
  border-bottom: 1px solid #262d33;
  background: linear-gradient(120deg, #182027 0%, #0f1418 70%);
  box-shadow: inset 0 0 0 1px var(--accent-hair);
}
.detail-head img {
  width: 150px; height: 100px;
  border-radius: 0;
  object-fit: cover;
  background: #0a0d10;
  clip-path: var(--notch-detail);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
.detail-head img.item {
  width: 124px; height: 94px;
  object-fit: contain;
  padding: 6px;
  clip-path: none;
}
.detail-head h1 {
  font-family: var(--display);
  font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: .03em;
  color: var(--text-bright);
}
.tag {
  border-radius: 0;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(0, 0, 0, .4);
  border: 1px solid #262c31;
  padding: 2px 8px;
}

.statline { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px; margin-bottom: 26px; }
.stat {
  border-radius: 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid #22282d;
}
.stat span {
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em;
  margin-bottom: 4px;
}
.stat b { font-size: 24px; font-weight: 700; }
.stat small { font-size: 12px; font-weight: 500; }

.block h4 {
  font-family: var(--display);
  font-size: 10px; font-weight: 700; letter-spacing: .24em;
  color: #7d8286;
  margin-bottom: 9px;
}
.block.lead h4 { color: var(--accent); }
.block p { font-size: 16px; line-height: 1.62; color: #cdc8bd; max-width: 76ch; text-wrap: pretty; }
.block.lead p { font-size: 19px; line-height: 1.5; color: #eae5d9; font-weight: 400; max-width: 70ch; }

.advice { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; margin-bottom: 26px; }
.advice > div {
  border-radius: 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid #22282d;
}
.advice .play    { border-top: 2px solid var(--buff); }
.advice .counter { border-top: 2px solid var(--nerf); }
.advice h4 { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.advice li { font-size: 14.5px; line-height: 1.5; }
.advice .play li::before    { background: var(--buff); opacity: .6; }
.advice .counter li::before { background: var(--nerf); opacity: .6; }

.ability-group {
  margin-bottom: 2px;
  padding: 14px 16px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ability-group .head { gap: 10px; margin-bottom: 9px; }
.ability-group .head img {
  width: 30px; height: 30px;
  border-radius: 0;
  background: #0a0d10;
  border: 1px solid #262c31;
}
.ability-group .head strong {
  font-family: var(--display);
  font-size: 13.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: #d6d1c6;
}
.ability-group li { font-size: 14px; line-height: 1.5; }
.ability-group li.indent { margin-left: 16px; font-size: 13.5px; }

/* ---------- full notes ---------- */

.notes-group { margin-bottom: 30px; }
.notes-group > h3 {
  font-family: var(--display);
  font-size: 15px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  color: #d6d1c6;
  padding-bottom: 8px;
  border-bottom: 1px solid #23282c;
  margin-bottom: 12px;
}

.callout {
  border-radius: 0;
  border: 1px solid #22272b;
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, #12171c, #0e1216);
  padding: 15px 18px;
  margin-bottom: 20px;
  font-size: 14.5px;
}
.callout a { color: var(--accent); border-bottom: 1px solid rgba(201, 162, 39, .35); }

/* ---------- welcome / join / buttons ---------- */

.welcome {
  border-radius: 0;
  border: 1px solid #22272b;
  border-left: 2px solid var(--accent);
  background: linear-gradient(180deg, #12171c, #0e1216);
  padding: 10px 15px;
  font-size: 14px;
}
.welcome.new  { border-left-color: var(--accent); }
.welcome.done { border-left-color: var(--buff); }
.welcome strong { color: var(--text); }

.join {
  position: relative;
  border-radius: 0;
  padding: 26px;
  margin-top: 34px;
  border: 1px solid #262d33;
  background: linear-gradient(160deg, #1a222a 0%, #101519 62%);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .08);
}
.join h3 {
  font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: .05em;
  color: #efeade;
}
.join p { font-size: 15px; }
.join .join-form { gap: 2px; }
.join .join-email {
  border-radius: 0;
  background: rgba(0, 0, 0, .45);
  border: 1px solid #262c31;
  padding: 10px 14px;
  font-size: 15px;
}
.join .join-email:focus { border-color: var(--accent-line); }

.btn-primary {
  border-radius: 0;
  padding: 10px 20px;
  font-family: var(--display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #b23a2e, #8e2a20);
  border: 1px solid #c0463a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { background: linear-gradient(180deg, #c44435, #9c3025); }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line-soft); padding: 24px 18px 44px; font-size: 12.5px; }

/* ---------- hero picker ---------- */

.modal-overlay { background: rgba(3, 5, 7, .8); }
.modal {
  position: relative;
  width: min(760px, 100%);
  max-height: min(78vh, 720px);
  border-radius: 0;
  padding: 22px;
  border: 1px solid #2a3137;
  background: linear-gradient(168deg, #161d23, #0d1114);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .1), 0 30px 80px rgba(0, 0, 0, .7);
}
.modal-head h3 {
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: .06em;
  color: #efeade;
}
.modal-head p { font-size: 13.5px; }
.modal-close { border: 1px solid #2a3035; border-radius: 0; font-size: 18px; padding: 4px 10px; }
.modal-close:hover { color: #efeade; border-color: var(--line-strong); background: none; }

.picker-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 2px; }
.picker-hero {
  border-radius: 0;
  background: rgba(0, 0, 0, .34);
  border: 1px solid #242a2f;
  padding: 8px 5px 7px;
  gap: 6px;
}
.picker-hero:hover { background: rgba(255, 255, 255, .05); }
.picker-hero img { width: 44px; height: 44px; border-radius: 0; clip-path: var(--notch-icon); }
.picker-hero span { font-size: 11px; letter-spacing: .03em; }
.picker-hero.on {
  border-color: rgba(201, 162, 39, .6);
  background: linear-gradient(180deg, rgba(201, 162, 39, .2), rgba(201, 162, 39, .06));
}
.picker-hero.on span { color: var(--text-bright); }
.picker-hero .dot {
  width: 4px; height: 4px;
  border-radius: 0;
  transform: rotate(45deg);
  background: var(--accent);
  top: 5px; right: 5px;
}
.modal-foot { padding-top: 16px; margin-top: 14px; border-top: 1px solid #23282c; }
.modal-foot span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .glance { padding: 18px 16px 16px; }
  .glance-patch b { font-size: 34px; }
  .detail-head { gap: 14px; padding: 14px; }
  .detail-head img { width: 110px; height: 74px; }
  .detail-head img.item { width: 96px; height: 72px; }
  .detail-head h1 { font-size: 24px; }
  .block.lead p { font-size: 17px; }
  .why { font-size: 15.5px; }
}

@media (max-width: 620px) {
  /* keep the existing three-row reflow; just don't scale the top-3 title up */
  .headline.top .headline-row h3 { font-size: 16.5px; }
}

/* Who wrote the analysis — visible without shouting, expandable for the method. */
.provenance {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.provenance summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-faint);
  display: flex; align-items: center; gap: 7px;
}
.provenance summary::-webkit-details-marker { display: none; }
.provenance summary::before {
  content: "◆";
  font-size: 7px;
  color: var(--accent);
}
.provenance summary::after {
  content: "▶";
  font-size: 7px;
  transition: transform .18s;
}
.provenance[open] summary::after { transform: rotate(90deg); }
.provenance summary:hover { color: var(--text-dim); }
.provenance p {
  margin: 9px 0 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text-dim);
  max-width: 78ch;
}

/* Pointers to other people's work — a card that reads as a link, not a claim. */
.creator {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.creator-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.creator-head strong {
  font-family: var(--display);
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-bright);
}
.creator-who { margin: 0 0 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.creator-what { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
.creator-status {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  font-size: 12.5px; line-height: 1.45; color: var(--text-faint);
}
.creator-extra {
  display: inline-block; margin-top: 9px;
  font-size: 12px; letter-spacing: .04em;
  color: var(--accent-soft);
  border-bottom: 1px solid rgba(227, 196, 105, .3);
}
.creator-extra:hover { color: var(--accent); }

/* How well a conclusion held up against independent coverage. */
.agreement {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--inset);
  border-left: 2px solid var(--line-strong);
  font-size: 12.5px; line-height: 1.5;
}
.agreement b {
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.agreement span { color: var(--text-faint); }
.agreement.corroborated { border-left-color: var(--buff); }
.agreement.corroborated b { color: var(--buff); }
.agreement.partial { border-left-color: var(--mixed); }
.agreement.partial b { color: var(--mixed); }
.agreement.ours { border-left-color: var(--accent); }
.agreement.ours b { color: var(--accent); }
.agreement.disputed { border-left-color: var(--nerf); }
.agreement.disputed b { color: var(--nerf); }
.agreement.standalone {
  flex-direction: column; gap: 4px;
  margin: 0; padding: 13px 15px;
  border: 1px solid var(--line);
  border-left-width: 3px;
}
.agreement.standalone span { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* Shipped with the patch but outside the gameplay notes. */
.beyond {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--qol);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.beyond strong {
  font-family: var(--display);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-bright);
  display: block; margin-bottom: 6px;
}
.beyond p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
.beyond-why { color: var(--text-faint) !important; font-size: 12.5px !important; }
.beyond-src {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
}

/* Method page */
.method-steps { margin: 0; padding-left: 20px; }
.method-steps li {
  font-size: 14.5px; line-height: 1.6; color: var(--text-dim);
  margin-bottom: 11px;
}
.method-steps b { color: var(--text); font-weight: 600; }

/* "How our analysis compares" — four cards, each opening a short list of points.
   Fixed two columns so the four sit as a balanced 2x2 rather than 3 + an orphan. */
.compare-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }

.agreement.card {
  display: block;
  margin: 0; padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 3px;
  box-shadow: var(--shadow);
}
.agreement.card > summary {
  display: flex; align-items: baseline; gap: 8px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}
/* Let the label take the room it needs; the count and chevron never get crushed. */
.agreement.card > summary b { flex: 1 1 auto; min-width: 0; }
.agreement.card > summary::-webkit-details-marker { display: none; }
.agreement.card > summary:hover { background: rgba(255, 255, 255, .02); }
.agreement.card > summary span {
  margin-left: auto;
  font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.chev-sm { font-size: 8px; color: var(--text-faint); transition: transform .18s; flex: none; }
.agreement.card[open] .chev-sm { transform: rotate(90deg); }

.compare-list {
  margin: 0; padding: 0 15px 13px 30px;
  list-style: none;
}
.compare-list li {
  position: relative;
  padding: 5px 0;
  font-size: 13px; line-height: 1.45;
}
.compare-list li::before {
  content: "";
  position: absolute; left: -13px; top: 11px;
  width: 4px; height: 4px;
  background: var(--line-strong);
  transform: rotate(45deg);
}
.compare-list a { color: var(--accent-soft); border-bottom: 1px solid rgba(227, 196, 105, .25); }
.compare-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.compare-list span { color: var(--text-faint); }

/* First-visit strip: what this is, and the one thing nobody else does. */
.intro {
  position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 2px;
  padding: 12px 16px;
  background: linear-gradient(100deg, rgba(201,162,39,.09), rgba(0,0,0,0) 46%), var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
}
.intro p { margin: 0; flex: 1 1 320px; font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.intro b { color: var(--text-bright); font-weight: 600; }
.intro .btn-primary { flex: none; }
.intro .dismiss {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0;
  color: var(--text-faint);
  font-size: 19px; line-height: 1;
  cursor: pointer; padding: 3px 7px;
}
.intro .dismiss:hover { color: var(--text); }

/* Key for the split bar. The two narrow segments can't hold a label, and a
   tooltip is useless on a phone — so every segment is named here instead. */
.split-key {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 14px; padding: 0;
  list-style: none;
}
.split-key li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.split-key li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
}
.split-key .nerf::before { background: var(--nerf); }
.split-key .buff::before { background: var(--buff); }
.split-key .mixed::before { background: var(--mixed); }
.split-key .qol::before { background: var(--qol); }
.split-key b { color: var(--text); font-weight: 600; }
.split-key span { color: var(--text-faint); }

/* Narrow segments carry just the number; the legend supplies the word. */
.split-bar i.narrow { font-size: 10.5px; letter-spacing: 0; }

/* Clearing your list is deliberate, so it reads as destructive without shouting. */
.modal-foot { gap: 14px; }
.modal-foot #picker-count { margin-right: auto; }
.link-btn.danger { color: var(--text-faint); }
.link-btn.danger:hover { color: var(--dire); }

/* The tagline is longer than a phone header can hold on one line. Wrapping to
   two beats an ellipsis that cuts it mid-word. */
@media (max-width: 560px) {
  .brand-text em {
    white-space: normal;
    line-height: 1.25;
    font-size: 11px;
  }
  .brand-text { max-width: 46vw; }
}

/* "What this means for your build" — items people actually buy on this hero. */
.build-item {
  /* Top-aligned: these cards vary from two lines to eight, and a centred icon
     floats away from the name it belongs to. */
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  box-shadow: var(--shadow);
  padding: 12px 15px;
  margin-bottom: 2px;
  transition: background .14s;
}
.build-item:hover { background: var(--panel-hover); }
.build-item.nerf { border-left-color: var(--nerf); }
.build-item.buff { border-left-color: var(--buff); }
.build-item.mixed { border-left-color: var(--mixed); }
.build-item.qol { border-left-color: var(--qol); }
.build-item img {
  width: 54px; height: 40px; flex: none;
  object-fit: contain;
  background: var(--inset);
  padding: 3px;
}
.bi-body { min-width: 0; flex: 1; }
.bi-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
.bi-head strong {
  font-family: var(--display);
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-bright);
}
.bi-freq {
  margin-left: auto;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* Summary states the change, why answers "so what", do says what to buy instead.
   Three jobs, three weights — the eye should be able to stop after any one of them. */
.bi-sum { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.bi-why { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 72ch; }
.bi-do {
  margin: 8px 0 0; padding: 7px 10px;
  background: var(--inset); border-left: 2px solid var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 72ch;
}
.bi-do b {
  font-family: var(--display);
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-right: 7px;
}

/* The untouched rest of the build — as useful as the changes, quieter. */
.rest { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.rest li {
  display: flex; align-items: center; gap: 8px;
  background: var(--inset);
  border: 1px solid var(--line-soft);
  padding: 6px 11px 6px 6px;
  font-size: 12.5px; color: var(--text-faint);
}
.rest img { width: 32px; height: 24px; object-fit: contain; }

@media (max-width: 640px) {
  .bi-freq { margin-left: 0; flex-basis: 100%; }
}