/* wgf-pvp-hall-of-fame.css - the Blizzard-asset layer of the Reckful tribute (/pvp/reckful/).
   2026-09-03. Owned by pvp_hall_of_fame_app; linked through that module's asset seam.

   Scope: only the .wgf-hofx-* blocks that pvp_hall_of_fame_render emits (identity plate, facts
   ledger, Stormwind map figure, interlink rail, art credit). The older .wgf-hof-* blocks keep
   living in assets/wgf-hall-of-fame.css and are untouched here.

   Palette: docs/ui-ux/17-blizzard-palette.md tokens only - near-black slate plates, bronze and
   gold rules, parchment text. No green, no gradient, no glow. The one colour literal is the
   Blizzard rogue class colour behind var(--class-rogue), the same fallback assets/
   wgf-result-rows.css already uses. Art comes from the markup (real client icons, the achievement
   icon ring via .wgf-tex-icon-frame, the UiMap 84 composite); this sheet paints no texture. */

/* ── identity plate ──────────────────────────────────────────────────────────────────── */

.wgf-hofx-id {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: 14px 16px;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2));
  border-left: 3px solid var(--wgf-gold-accent, #b7912f);
  border-radius: 4px;
}

.wgf-hofx-id__frame {
  flex: 0 0 auto;
}

.wgf-hofx-id__body {
  min-width: 0;
}

.wgf-hofx-id__name {
  margin: 0 0 .2rem;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--wgf-gold-primary, #ffd100);
}

.wgf-hofx-id__name a {
  color: inherit;
  text-decoration: none;
}

.wgf-hofx-id__name a:hover,
.wgf-hofx-id__name a:focus-visible {
  color: var(--wgf-gold-bright, #ffe375);
  text-decoration: underline;
}

.wgf-hofx-id__dates {
  margin: 0 0 .35rem;
  font-size: .9rem;
  color: var(--wgf-muted, #b3a88f);
}

.wgf-hofx-id__class {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: .95rem;
}

.wgf-hofx-id__class a {
  color: var(--class-rogue, #fff468);
  text-decoration: none;
}

.wgf-hofx-id__class a:hover,
.wgf-hofx-id__class a:focus-visible {
  text-decoration: underline;
}

.wgf-hofx-id__spec {
  display: block;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 2px;
}

.wgf-hofx-id__realm {
  color: var(--wgf-neutral-text, #9b9384);
  font-size: .85rem;
}

.wgf-hofx-id__realm::before {
  content: "\00b7";
  margin-right: 8px;
  color: var(--wgf-metal, #6e5a2a);
}

/* ── facts ledger ────────────────────────────────────────────────────────────────────── */

.wgf-hofx-facts {
  margin: 1.4rem 0;
}

.wgf-hofx-facts__grid {
  border: 1px solid var(--wgf-border, rgba(255, 209, 0, .2));
  border-radius: 4px;
  background: var(--wgf-well, #08090c);
  overflow: hidden;
}

.wgf-hofx-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--wgf-border-neutral-soft, #202229);
}

.wgf-hofx-facts__row:first-child {
  border-top: 0;
}

.wgf-hofx-facts__label {
  flex: 0 0 11rem;
  color: var(--wgf-neutral-text, #9b9384);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wgf-hofx-facts__value {
  flex: 1 1 14rem;
  color: var(--wgf-text, #f4ecd8);
}

.wgf-hofx-facts__value a {
  color: var(--wgf-gold-link, #ffe375);
}

/* ── Stormwind map figure ────────────────────────────────────────────────────────────── */

.wgf-hofx-loc {
  margin: 1.4rem 0;
}

.wgf-hofx-map {
  margin: 0;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 4px;
  overflow: hidden;
}

.wgf-hofx-loc__cap {
  margin: .5rem 0 0;
  color: var(--wgf-muted, #b3a88f);
  font-size: .9rem;
}

/* ── interlink rail ──────────────────────────────────────────────────────────────────── */

.wgf-hofx-rail {
  margin: 1.6rem 0;
}

.wgf-hofx-rail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.wgf-hofx-rail__card {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--wgf-panel-1, #14161c);
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  border-radius: 4px;
  text-decoration: none;
}

.wgf-hofx-rail__card:hover,
.wgf-hofx-rail__card:focus-visible {
  border-color: var(--wgf-border-strong, rgba(255, 209, 0, .38));
  background: var(--wgf-panel-2, #1a1d24);
}

.wgf-hofx-rail__icon {
  grid-row: 1 / span 2;
  display: block;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 2px;
}

.wgf-hofx-rail__card strong {
  color: var(--wgf-gold-primary, #ffd100);
  font-weight: 600;
}

.wgf-hofx-rail__card em {
  color: var(--wgf-muted, #b3a88f);
  font-size: .85rem;
  font-style: normal;
}

/* ── art credit ──────────────────────────────────────────────────────────────────────── */

.wgf-hofx-credit {
  margin: 1.2rem 0 0;
  color: var(--wgf-neutral-text, #9b9384);
  font-size: .8rem;
}

@media (max-width: 560px) {
  .wgf-hofx-facts__label {
    flex: 1 1 100%;
  }

  .wgf-hofx-id {
    gap: 10px;
    padding: 12px;
  }
}

/* ── inline ability icon (a spell the sourced copy already names) ─────────────────────── */

.wgf-hofx-inline-icon {
  display: inline-block;
  vertical-align: -.25em;
  margin-right: 4px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  border-radius: 2px;
}