.race-layout { display: grid; gap: var(--s5); grid-template-columns: 260px 1fr; align-items: stretch; } /* card spans the menu height: its edge stays put between races */
.race-card { align-content: start; }

/* ---------- menu ---------- */
.race-menu { display: grid; gap: var(--s2); }
.race-menu h3 {
  font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fc); filter: brightness(1.35); margin: var(--s2) 0 0;
}
.race-menu h3:first-child { margin-top: 0; }
.race-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 50px; padding: var(--s1) var(--s3) var(--s1) var(--s1);
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-1); color: var(--muted);
  font: 600 16px var(--font-body); text-align: left; cursor: pointer; box-shadow: var(--shadow-1);
  -webkit-user-select: none; user-select: none;
  transition: transform .25s var(--spring), border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.race-thumb {
  flex: none; width: 42px; height: 42px; border-radius: var(--r1); overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fc) 45%, #1a1f2b), #0d1017 75%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
}
.race-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.35); transform-origin: 50% 20%; }
.race-thumb.is-icon img { transform: none; object-position: center; }
.race-item:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
.race-item:active { transform: scale(.98); }
.race-item[aria-current="true"] {
  color: var(--text); border-color: var(--fc);
  background: color-mix(in srgb, var(--fc) 14%, var(--surface-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 40%, transparent) inset, var(--shadow-2);
}
[data-faction="Horde"] { --fc: var(--horde); }
[data-faction="Alliance"] { --fc: var(--alliance); }

/* ---------- detail card ---------- */
.race-card {
  display: grid; gap: var(--s5); padding: var(--s5); grid-template-columns: 160px 1fr;
  position: relative; overflow: hidden;
}
.race-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%);
}
.race-portrait {
  width: 160px; height: 182px; border-radius: var(--r3); overflow: hidden; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(120px 110px at 50% 38%, color-mix(in srgb, var(--fc) 55%, transparent), transparent 75%),
    linear-gradient(180deg, #1b2130, #0c0f16);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2);
}
.race-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.race-portrait::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11,13,18,.55), transparent 35%); }
.race-portrait.is-icon { flex-direction: column; justify-content: center; gap: var(--s3); text-align: center; }
.race-portrait.is-icon img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--r2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 0 28px color-mix(in srgb, var(--fc) 45%, transparent); }
.race-portrait.is-icon span { font-size: 11px; line-height: 1.3; color: var(--muted); padding: 0 var(--s3); position: relative; z-index: 1; }
.race-main { display: grid; gap: var(--s5); min-width: 0; position: relative; }
.race-title h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em; }
.race-title .fac { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fc); filter: brightness(1.35); }
.race-cols { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.race-cols h3 { font: 700 15px var(--font-body); color: var(--muted); margin-bottom: var(--s3); }
.race-side { display: grid; gap: var(--s5); }

.abilities { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.abilities li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: start; }
.abilities img { width: 36px; height: 36px; }
.abilities b, .abilities .ab-name { display: block; font-weight: 700; line-height: 1.3; color: var(--text); width: fit-content; }
.abilities .ab-name { text-decoration: underline; text-decoration-color: rgba(242, 201, 110, .3); text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.abilities .ab-name:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.abilities .ab-name:active { opacity: .8; }
.ab-icon { display: block; border-radius: var(--r1); transition: transform .25s var(--spring); }
a.ab-icon:hover { transform: scale(1.06); }
a.ab-icon:active { transform: scale(.96); }
.abilities span { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; }

.cls-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cls-chip {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3) 0 var(--s2);
  border-radius: var(--r1); border: 1px solid var(--line); background: var(--surface-2);
  font-weight: 600; font-size: 14px; color: var(--c);
}
.cls-chip img { width: 22px; height: 22px; border-radius: 4px; }
.cls-chip .new { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--gold-ink); background: var(--gold-hi); border-radius: 4px; padding: 1px 5px; }

.whats-new {
  padding: var(--s4); border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent);
  background: color-mix(in srgb, var(--fc) 9%, var(--surface-1));
}
.whats-new h3 { color: var(--text); margin-bottom: var(--s2); }
.whats-new p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.whats-new p + p { margin-top: var(--s2); }

.class-spells { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2); }
.class-spells summary {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; border-radius: var(--r2); -webkit-user-select: none; user-select: none;
  transition: background-color .2s var(--ease);
}
.class-spells summary::-webkit-details-marker { display: none; }
.class-spells summary img { width: 22px; height: 22px; border-radius: 4px; }
.class-spells summary .num { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; }
.class-spells summary::after { content: ''; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 2px 0 var(--s2); transition: transform .3s var(--spring); }
.class-spells[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.class-spells summary:hover { background: var(--surface-3); }
.class-spells summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.class-spells > p { color: var(--faint); font-size: 13px; padding: 0 var(--s4); margin-bottom: var(--s3); }
.class-spells .abilities { padding: 0 var(--s4) var(--s4); }

/* ---------- matrix ---------- */
.matrix-wrap { margin-top: var(--s5); padding: var(--s5); }
.matrix-scroll { overflow-x: auto; margin-top: var(--s3); }
.matrix { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.matrix th, .matrix td { padding: var(--s2); text-align: center; border-bottom: 1px solid var(--line); }
.matrix thead th { color: var(--muted); font-weight: 600; }
.matrix thead img { width: 26px; height: 26px; margin: 0 auto 2px; border-radius: 6px; }
.matrix tbody th { text-align: left; white-space: nowrap; font-weight: 600; }
.matrix tbody th i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s2); background: var(--fc); }
.matrix tbody tr { cursor: pointer; transition: background-color .15s var(--ease); }
.matrix tbody tr:hover { background: var(--surface-2); }
.matrix tbody tr[aria-current="true"] { background: rgba(217, 164, 65, .08); }
.matrix .yes { color: var(--gold-hi); font-weight: 700; }
.matrix .yes.new { color: var(--green); }
.matrix .no { color: var(--faint); }
.matrix tfoot td { color: var(--muted); font-weight: 700; }
.matrix-note { margin-top: var(--s3); font-size: 13px; color: var(--faint); }
.matrix-note b { color: var(--green); }

/* ---------- narrow ---------- */
@media (max-width: 859px) {
  .race-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .race-menu { display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--s2); padding-bottom: 2px; }
  .race-menu::-webkit-scrollbar { display: none; }
  .race-menu h3 { display: none; }
  .race-item { flex: none; width: auto; min-height: 44px; font-size: 15px; }
  .race-thumb { width: 34px; height: 34px; }
  .race-cols { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .race-card { grid-template-columns: 1fr; padding: var(--s4); }
  .race-portrait { width: 120px; height: 137px; }
}

/* racial title row: name + NEW badge; per-class variants */
.ab-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.abilities .badge-new {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px;
  font: 800 10px/1 var(--font-body); letter-spacing: .1em; color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 8px rgba(217,164,65,.3);
}
.ab-variants { display: inline-flex !important; align-items: center; gap: 4px; margin-left: 2px; }
.ab-variants > span { margin-right: 2px; }
.ab-variant { display: block; border-radius: 5px; transition: transform .25s var(--spring), box-shadow .2s var(--ease); }
.ab-variant img { width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.ab-variant:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 2px var(--gold-hi); }
.ab-variant:active { transform: scale(.94); }

/* racial description, split: stat chips · effect · Classic note */
.ab-body { display: grid; gap: 6px; min-width: 0; }
.ab-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-meta i {
  font-style: normal; font-size: 12px; font-weight: 600; line-height: 20px; padding: 0 7px;
  border-radius: 5px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line);
}
.ab-text { font-size: 14.5px; line-height: 1.55; color: #cfc8b8; }
.ab-classic { font-size: 13px; line-height: 1.5; color: var(--faint); }
.abilities .badge-changed {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px;
  font: 800 10px/1 var(--font-body); letter-spacing: .1em; color: var(--gold-hi);
  border: 1px solid rgba(242, 201, 110, .45);
}
.abilities li { align-items: start; }

/* Skyborne uses an in-game screenshot framed wider than Blizzard's renders: zoom to match their scale */
.race-portrait.is-shot img { transform: scale(1.3); transform-origin: 50% 12%; }
.race-thumb.is-shot img { transform: scale(2.1); transform-origin: 48% 26%; }

/* flavour text under the race name */
.race-lore { max-width: 68ch; margin-top: calc(var(--s3) * -1); color: #cfc8b8; font-size: 15.5px; line-height: 1.65; font-style: italic; }

/* compact ability rows: icon + name/badges only; details live in the Wowhead tooltip */
.abilities { gap: var(--s3); }
.abilities li { grid-template-columns: 36px 1fr; align-items: center; }
.abilities li .ab-text { grid-column: 2; margin-top: -6px; font-size: 14px; color: var(--muted); }
.ab-group {
  display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s3);
  font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ab-group img { width: 18px; height: 18px; border-radius: 4px; }
.ab-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }