/* wgf-hall-of-fame.css - the /pvp/hall-of-fame/ page frame.
   The champion plaques themselves are the shared component from wgf-leaderboards.css (.wgf-lb-card);
   this file owns ONLY the page-specific frame: the gallery grid the plaques sit in and the "about"
   prose block. Composes the locked tokens (_tokens.css) + the shared Hall skin (wgf-hall.css).
   Scoped under .wgf-hof so it never leaks into the other Hall surfaces. */

.wgf-hof{margin:0 0 var(--space-6);}

/* ── Champion gallery grid (the five PvP plaques) ── */
.wgf-hof-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr);
  margin-top:var(--space-4);}

@media(max-width:880px){.wgf-hof-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.wgf-hof-grid{grid-template-columns:1fr;}}

/* ── About block: indexable prose under the gallery, on a quiet Hall panel ── */
.wgf-hof-about{margin:var(--space-6) 0 var(--space-4);
  padding:var(--space-4) var(--space-4) var(--space-2);
  border:1px solid var(--wgf-border-neutral);border-radius:var(--radius-card);
  background:linear-gradient(160deg,var(--wgf-panel-2),var(--wgf-panel-1) 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);}
.wgf-hof-about .section-heading{margin:0 0 var(--space-3);}
.wgf-hof-about p{margin:0 0 var(--space-3);color:var(--wgf-text-muted);
  line-height:1.62;max-width:74ch;}
.wgf-hof-about a{color:var(--wgf-gold-accent);text-decoration:none;}
.wgf-hof-about a:hover{text-decoration:underline;}

/* The legend's real name sits under the handle, not run into it (owner screenshot 2026-07-30:
   "ReckfulByron Bernstein" run-on). */
.wgf-hof-legend-real {
  display: block;
  font-size: 0.62em;
  font-weight: 400;
  color: var(--wgf-muted, #b5a98c);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ---- Reckful one-page tribute: datamined UI reading panels ---- */
.wgf-hof-tribute {
  max-width: 1080px;
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-3) var(--space-5);
  color: var(--wgf-text, #ece7dd);
}
.wgf-hof-tribute h2 {
  color: var(--wgf-gold, #e8c56e);
  margin: 0 0 var(--space-2);
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0,0,0,.92), 0 0 4px rgba(0,0,0,.6));
}
.wgf-hof-t-intro,
.wgf-hof-rerun,
.wgf-hof-links,
.wgf-hof-sources,
.wgf-hof-t-section,
.wgf-hof-t-resources {
  position: relative;
  margin: var(--space-4) auto;
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid rgba(180, 151, 82, .46);
  border-radius: 4px;
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png) top left / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png) top right / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png) bottom left / 34px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png) bottom right / 34px auto no-repeat,
    linear-gradient(180deg, rgba(10, 11, 13, .94), rgba(16, 17, 18, .96)),
    url(/assets/ui/classhall-stone-tile.png) center / 256px repeat;
  box-shadow:
    0 22px 52px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 0 42px rgba(0,0,0,.42);
}
.wgf-hof-t-intro::before,
.wgf-hof-rerun::before,
.wgf-hof-links::before,
.wgf-hof-sources::before,
.wgf-hof-t-section::before,
.wgf-hof-t-resources::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 10px;
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) left top / auto 100% repeat-x;
  opacity: .42;
  pointer-events: none;
}
.wgf-hof-tribute p,
.wgf-hof-tribute li {
  color: var(--wgf-text, #ece7dd);
  font-size: clamp(1rem, .4vw + .95rem, 1.12rem);
  line-height: 1.72;
  text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 0 5px rgba(0,0,0,.72);
}
.wgf-hof-t-dates {
  color: var(--wgf-muted, #b5a98c);
  letter-spacing: 0.08em;
  margin: -4px 0 var(--space-2);
  text-transform: uppercase;
}
.wgf-hof-t-section ul { list-style: none; line-height: 1.65; padding: 0; margin: var(--space-2) 0 0; }
.wgf-hof-t-section li { position: relative; margin-bottom: 0.7em; padding-left: 1.35em; }
.wgf-hof-t-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 218, 112, .72);
  background: #c9912f;
  box-shadow: 0 0 8px rgba(255, 197, 64, .55);
  transform: rotate(45deg);
}
.wgf-hof-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(180, 151, 82, .58);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.38);
}
.wgf-hof-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wgf-hof-rerun-note { color: var(--wgf-muted, #b5a98c); margin: 0 0 var(--space-2); }
.wgf-hof-rerun--index { max-width: 1040px; margin: var(--space-4) auto var(--space-5); padding: var(--space-3); border: 1px solid rgba(232, 197, 110, 0.24); background: linear-gradient(180deg, rgba(16,14,11,.82), rgba(26,20,13,.9)); box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035); }
.wgf-hof-rerun--index h2 { margin-top: 0; }
.wgf-hof-t-resources {
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png) top left / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png) top right / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png) bottom left / 34px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png) bottom right / 34px auto no-repeat,
    linear-gradient(180deg, rgba(34, 21, 7, .94), rgba(13, 9, 5, .95)),
    url(/assets/ui/questbg-parchment.png) center / cover no-repeat;
}
.wgf-hof-t-support {
  background:
    url(/assets/ui/ui-frame-metal-cornertopleft-2x.png) top left / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png) top right / 44px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png) bottom left / 34px auto no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png) bottom right / 34px auto no-repeat,
    linear-gradient(180deg, rgba(22, 18, 10, .95), rgba(10, 11, 12, .96)),
    url(/assets/ui/questbg-parchment.png) center / cover no-repeat;
}
.wgf-hof-t-support p:first-of-type {
  border-left: 3px solid var(--wgf-gold, #e8c56e);
  padding-left: 14px;
}
.wgf-hof-tribute-link { color: var(--wgf-gold, #e8c56e); text-underline-offset: 3px; }
.wgf-hof-tribute-link:hover { color: #ffe39b; }
.wgf-hof-tribute h2 .wgf-hof-tribute-link { color: inherit; text-decoration: none; }
.wgf-hof-tribute h2 .wgf-hof-tribute-link:hover { text-decoration: underline; }
.wgf-hof-legend-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.wgf-hof-rerun-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: var(--space-2) 0 0; }
.wgf-hof-rerun-fallback { margin: 8px 0 0; font-size: 0.92em; }
.wgf-hof-rerun-fallback a,
.wgf-hof-links a { color: var(--wgf-gold, #e8c56e); text-decoration: none; }
.wgf-hof-rerun-fallback a:hover,
.wgf-hof-links a:hover { text-decoration: underline; }
.wgf-hof-link-grid,
.wgf-hof-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-3); }
.wgf-hof-link-card,
.wgf-hof-source-card {
  min-height: 126px;
  padding: 14px;
  border: 1px solid rgba(145, 117, 62, .54);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, .9), rgba(12, 12, 14, .96)),
    url(/assets/ui/auctionhouse-rowstripe-2.png) left top / auto 100% repeat-x;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 0 18px rgba(0,0,0,.38);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wgf-hof-link-card span { color: var(--wgf-muted, #b5a98c); font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.08em; }
.wgf-hof-source-card span { color: var(--wgf-muted, #b5a98c); font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.08em; }
.wgf-hof-link-card strong,
.wgf-hof-source-card strong { color: var(--wgf-gold, #e8c56e); line-height: 1.18; }
.wgf-hof-link-card em { color: var(--wgf-text-muted, #cfc3a4); font-style: normal; line-height: 1.42; }
.wgf-hof-source-note { color: var(--wgf-muted, #b5a98c); margin: var(--space-3) 0 0; font-size: .95rem; }

@media(max-width:760px){
  .wgf-hof-link-grid,
  .wgf-hof-source-grid { grid-template-columns: 1fr; }
  .wgf-hof-legend-actions { flex-direction: column; align-items: flex-start; }
  .wgf-hof-tribute { padding-left: var(--space-2); padding-right: var(--space-2); }
  .wgf-hof-t-intro,
  .wgf-hof-rerun,
  .wgf-hof-links,
  .wgf-hof-sources,
  .wgf-hof-t-section,
  .wgf-hof-t-resources { padding: 18px 14px; }
}