/* =========================================================================
   BUFF MY CLASS — WoW Armory theme
   Stone + etched gold + Horde red. Class colors for names, item-quality
   colors for gear. No glassmorphism, no glow, no gradient headlines.
   Type: Cinzel (engraved display) / Marcellus (classical labels) / Spectral (body)
   ========================================================================= */

:root {
  /* Stone substrate (warm near-black) */
  --stone-900: #0e0b07;
  --stone-850: #14100a;
  --stone-800: #191309;
  --panel: #17120b;
  --panel-2: #1f1810;
  --panel-hi: #271e12;

  /* Etched gold */
  --gold: #c9a227;
  --gold-bright: #e8cd6b;
  --gold-dim: #7c661f;
  --line: rgba(201,162,39,0.30);
  --line-soft: rgba(201,162,39,0.14);

  /* Horde accent */
  --horde: #9b2620;
  --horde-bright: #c8412f;

  /* Ink on stone */
  --parchment: #ece3cb;
  --bone: #cabf9f;
  --muted: #8c8064;
  --faint: #6b6048;

  /* Item quality */
  --q-poor: #9d9d9d; --q-common: #ffffff; --q-uncommon: #1eff00;
  --q-rare: #0070dd; --q-epic: #a335ee; --q-legendary: #ff8000; --q-artifact: #e6cc80;

  --maxw: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Spectral", Georgia, serif;
  color: var(--parchment);
  background: var(--stone-900);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- Atmosphere: stone texture + vignette (no glow) -------------------- */
.bg-texture {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 5px),
    radial-gradient(120% 80% at 50% -10%, #1a140c 0%, #0e0b07 60%);
}
.bg-texture::after {
  content: ""; position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  box-shadow: inset 0 0 240px 40px rgba(0,0,0,0.8);
  background: radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---- Top bar ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: linear-gradient(to bottom, #0e0b07 0%, rgba(14,11,7,0.92) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 1px 0 var(--gold-dim) inset;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--parchment); }
.brand-crest { display: flex; align-items: center; }
.brand-crest svg { width: 42px; height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--gold-bright); }
.brand-realm { font-family: "Marcellus", serif; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a {
  font-family: "Marcellus", serif; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--bone); padding: 9px 18px; position: relative; transition: color 0.2s;
}
.nav a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.nav a:hover { color: var(--gold-bright); }
.nav a.active { color: var(--gold-bright); }
.nav a.active::after { transform: scaleX(1); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--gold); font-size: 1.2rem; padding: 4px 12px; cursor: pointer; }

/* ---- Layout helpers ---------------------------------------------------- */
main { display: block; min-height: 60vh; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.section { padding: clamp(48px, 7vw, 96px) 0; position: relative; }
.eyebrow {
  font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--horde-bright); display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--horde); }
.section-title {
  font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08; margin: 12px 0 8px; letter-spacing: 0.02em; color: var(--gold-bright);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.section-lead { color: var(--bone); max-width: 62ch; font-size: 1.06rem; }
.title-note { font-family: "Marcellus", serif; font-size: 0.42em; letter-spacing: 0.05em; color: var(--muted); text-transform: none; vertical-align: middle; }
.section-lead b { color: var(--gold-bright); font-weight: 600; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Framed panel: double gold hairline "tooltip" frame ---------------- */
.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); position: relative;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,235,180,0.05);
}
.panel::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid var(--line-soft); pointer-events: none;
}
/* gold corner brackets */
.framed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 0/2px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/2px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/2px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 14px no-repeat;
  opacity: 0.7;
}

/* Buttons — etched gold, no gradient */
.btn {
  font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px;
  color: var(--gold-bright); background: #140f08; border: 1px solid var(--gold-dim); cursor: pointer;
  transition: all 0.2s var(--ease); position: relative;
}
.btn:hover { background: var(--gold); color: #140f08; border-color: var(--gold-bright); }
.btn-primary { background: var(--horde); color: #f4e6c8; border-color: var(--horde-bright); }
.btn-primary:hover { background: var(--horde-bright); color: #fff; }
.btn-ghost { background: transparent; }

/* =========================================================================
   HERO — heraldic hall
   ========================================================================= */
.hero { position: relative; padding: clamp(70px, 10vw, 130px) 0 clamp(44px, 6vw, 74px); overflow: hidden; min-height: clamp(560px, 78vh, 780px); display: flex; align-items: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.55;
  background: radial-gradient(55% 65% at 80% 45%, rgba(155,38,32,0.22), transparent 62%), radial-gradient(50% 50% at 14% 22%, rgba(201,162,39,0.08), transparent 60%);
}
.hero-embers { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-figures { position: absolute; inset: 0; z-index: 0; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; pointer-events: none; }
.hero-figures img { height: 90%; width: 15.5%; object-fit: cover; object-position: center 16%; opacity: 0.4; filter: contrast(1.05) saturate(0.9); flex: 0 0 auto; }
.hero-figures img.gm { height: 100%; width: 21%; opacity: 0.62; filter: contrast(1.1) saturate(1.05) drop-shadow(0 6px 34px rgba(255,120,40,0.18)); }
.hero-figures::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(135% 100% at 26% 44%, rgba(14,11,7,0.62) 0%, rgba(14,11,7,0.2) 42%, transparent 66%),
  linear-gradient(to bottom, rgba(14,11,7,0.3), transparent 20%, transparent 52%, #0e0b07); }
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px,4vw,40px); position: relative; z-index: 2; width: 100%; }
.hero-crest-lg { display: inline-block; margin-bottom: 22px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)); }
.hero-crest-lg svg { width: clamp(120px, 18vw, 180px); height: auto; }
.tabard { position: relative; overflow: hidden; border: 2px solid var(--gold-dim); box-shadow: 0 0 0 1px #0a0704, inset 0 0 12px rgba(0,0,0,0.5); }
.tab-layer { position: absolute; inset: 0; }
.tabard-frame { display: inline-block; padding: 7px; background: linear-gradient(180deg, #1c1710, #100c07); border: 2px solid var(--gold-dim); box-shadow: inset 0 0 0 1px var(--line-soft), 0 10px 24px -10px rgba(0,0,0,0.85); }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px;
  border: 1px solid var(--line); background: #140f08;
  font-family: "Marcellus", serif; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--gold);
}
.hero-title {
  font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 0.98; margin: 18px 0 16px; letter-spacing: 0.02em; color: var(--gold-bright);
  text-shadow: 0 3px 0 rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.9);
}
.hero-title .l2 { color: var(--parchment); }
.hero-title .l1 {
  background: linear-gradient(105deg, var(--gold-bright) 0%, var(--gold) 34%, #fff8e2 48%, var(--gold) 54%, var(--gold-bright) 78%, var(--gold-bright) 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; animation: heroSheen 6s ease-in-out infinite;
  text-shadow: none;
}
@keyframes heroSheen { 0% { background-position: 150% 0; } 55%, 100% { background-position: -50% 0; } }
.hero-rule { width: 120px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin: 0 0 18px; }
.hero-tag { font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--bone); max-width: 46ch; font-style: italic; }
.hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; border: 1px solid var(--line); }
.hstat { padding: 22px 20px; text-align: center; border-right: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.hstat:last-child { border-right: none; }
.hstat-num { font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1; color: var(--gold-bright); }
.hstat-label { font-family: "Marcellus", serif; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.68rem; color: var(--muted); margin-top: 9px; }

/* =========================================================================
   HOME sections
   ========================================================================= */
.feature-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 36px; }
.progress-card { padding: 30px; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.raid-name { font-family: "Cinzel", serif; font-size: 1.35rem; color: var(--gold-bright); }
.raid-sub { font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.74rem; color: var(--muted); margin-top: 4px; }
.diff-chip { font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; padding: 5px 13px; border: 1px solid; }
.diff-mythic { color: var(--horde-bright); border-color: var(--horde); }
.diff-heroic { color: var(--gold-bright); border-color: var(--gold-dim); }
.big-progress { margin: 22px 0 10px; height: 16px; background: #0c0906; border: 1px solid var(--line-soft); overflow: hidden; }
.big-progress > i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--gold-dim) 8px 16px); width: 0; transition: width 1.2s var(--ease); }
.progress-meta { display: flex; justify-content: space-between; font-family: "Marcellus", serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.76rem; color: var(--bone); }

/* Raid progression list (WoW guild-profile style) */
.rprog { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rprog:last-of-type { border-bottom: none; }
.rprog-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; color: var(--parchment); margin-bottom: 8px; }
.rprog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rprog-head .rprog-name { margin-bottom: 0; }
.rprog-sum { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.8rem; color: var(--gold-bright); white-space: nowrap; }
.rprog-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-pill { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 11px; border: 1px solid var(--line-soft); color: var(--faint); }
.rp-pill b { color: inherit; }
.rp-pill.rp-m { color: #ff8a5c; border-color: rgba(255,138,92,0.4); }
.rp-pill.rp-h { color: var(--gold-bright); border-color: var(--gold-dim); }
.rp-pill.rp-n { color: var(--bone); border-color: var(--line); }

.activity-card { padding: 26px 30px; }
.activity-card h3 { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 16px; color: var(--gold-bright); }
.feed-item { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.feed-item:last-child { border-bottom: none; }
.feed-mark { color: var(--gold); flex-shrink: 0; font-size: 0.8rem; }
.feed-text { font-size: 0.94rem; color: var(--bone); }
.feed-text b { color: var(--parchment); font-weight: 600; }
.feed-time { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }

/* Champions of the guild — featured member cards */
.hero-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.hero-card { position: relative; padding: 26px 18px 22px; text-align: center; cursor: pointer; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; overflow: hidden; }
.hero-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cc, var(--gold)); opacity: 0.9; }
.hero-card:hover { transform: translateY(-5px); border-color: var(--cc, var(--gold-dim)); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.85); }
.hc-badge { font-family: "Marcellus", serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.64rem; color: var(--gold-bright); margin-bottom: 16px; }
.hc-portrait { width: 92px; height: 92px; margin: 0 auto 14px; }
.hc-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.15rem; }
.hc-sub { font-family: "Marcellus", serif; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.hc-stat { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: "Cinzel", serif; font-weight: 700; font-size: 1.6rem; color: var(--gold-bright); }
.hc-stat small { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
/* combined "tie" champion card */
.hero-card-multi .hc-faces { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.hc-face { display: flex; align-items: center; gap: 10px; justify-content: flex-start; cursor: pointer; padding: 5px 8px; border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; }
.hc-face:hover { border-color: var(--cc, var(--gold-dim)); background: rgba(201,162,39,0.06); }
.hc-mini { width: 40px; height: 40px; flex-shrink: 0; }
.hc-fname { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mythic+ ladder */
.ladder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-top: 34px; }
.lrow { display: flex; align-items: center; gap: 14px; padding: 11px 16px; cursor: pointer; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); transition: border-color 0.2s, transform 0.15s; }
.lrow:hover { border-color: var(--cc, var(--gold-dim)); transform: translateX(3px); }
.lrank { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; color: var(--muted); width: 26px; text-align: center; }
.lrank.gold { color: var(--gold-bright); }
.lportrait { width: 38px; height: 38px; flex-shrink: 0; }
.lmid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lname { font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lspec { font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--muted); }
.lscore { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem; color: var(--gold-bright); text-align: right; }
.lscore small { display: block; font-family: "Marcellus", serif; font-weight: 400; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Rotating ranks showcase (Officers / Raiders) */
.showcase-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.sc-card { width: 122px; text-align: center; cursor: pointer; padding: 13px 8px; border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: transform 0.2s var(--ease), border-color 0.2s; }
.sc-card:hover { transform: translateY(-4px); border-color: var(--cc, var(--gold-dim)); }
.sc-face { width: 62px; height: 62px; margin: 0 auto 10px; }
.sc-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sub { font-family: "Marcellus", serif; font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tenets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.tenet { padding: 30px 26px; border-right: 1px solid var(--line-soft); }
.tenet:last-child { border-right: none; }
.tenet .num { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.6rem; color: var(--gold-dim); }
.tenet h3 { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; margin: 8px 0; color: var(--gold-bright); }
.tenet p { color: var(--bone); font-size: 0.94rem; }

/* =========================================================================
   ROSTER — armory table
   ========================================================================= */
.filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 22px; }
.search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #0f0b06; border: 1px solid var(--line); }
.search input { flex: 1; background: none; border: none; outline: none; color: var(--parchment); font-family: "Spectral", serif; font-size: 0.98rem; }
.search input::placeholder { color: var(--faint); }
.select { font-family: "Marcellus", serif; letter-spacing: 0.06em; font-size: 0.85rem; padding: 11px 14px; background: #0f0b06; color: var(--bone); border: 1px solid var(--line); cursor: pointer; outline: none; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: "Marcellus", serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; padding: 7px 13px; border: 1px solid var(--line-soft); background: transparent; color: var(--bone); cursor: pointer; transition: all 0.15s; }
.chip:hover { border-color: var(--line); color: var(--gold-bright); }
.chip.active { background: var(--gold); border-color: var(--gold); color: #140f08; }

.roster-layout { display: grid; grid-template-columns: 1fr 260px; gap: 26px; align-items: start; }
.roster-main { min-width: 0; }
.roster-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }
.side-card { padding: 20px; }
.side-card h4 { font-family: "Marcellus", serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; color: var(--muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.classbar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 0.84rem; }
.classbar .cname { font-family: "Marcellus", serif; width: 96px; flex-shrink: 0; }
.classbar .ctrack { flex: 1; height: 8px; background: #0c0906; border: 1px solid var(--line-soft); overflow: hidden; }
.classbar .ctrack > i { display: block; height: 100%; width: 0; transition: width 0.9s var(--ease); }
.classbar .ccount { font-family: "Cinzel", serif; font-weight: 700; color: var(--bone); width: 26px; text-align: right; }

.roledonut { display: flex; align-items: center; gap: 16px; }
.donut { width: 104px; height: 104px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-family: "Marcellus", serif; font-size: 0.84rem; }
.donut-legend span { display: flex; align-items: center; gap: 8px; color: var(--bone); }
.donut-legend .sw { width: 11px; height: 11px; }

/* the table itself */
.rtable-wrap { border: 1px solid var(--line); overflow-x: auto; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.rtable { width: 100%; border-collapse: collapse; min-width: 640px; }
.rtable thead th {
  text-align: left; font-family: "Marcellus", serif; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.7rem; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line);
  cursor: pointer; white-space: nowrap; user-select: none; background: #140f08;
}
.rtable thead th:hover { color: var(--gold-bright); }
.rtable thead th.num, .rtable td.num { text-align: right; }
.rtable thead th .arrow { color: var(--gold); margin-left: 4px; }
.rtable tbody tr { border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background 0.12s; }
.rtable tbody tr:hover { background: rgba(201,162,39,0.07); }
.rtable td { padding: 9px 14px; font-size: 0.92rem; vertical-align: middle; }
.rt-face { display: flex; align-items: center; gap: 12px; }
.rt-portrait { width: 36px; height: 36px; flex-shrink: 0; }
.rt-portrait .por img, .rt-portrait .por-fallback svg { border-radius: 3px !important; }
.rt-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; color: var(--cc, var(--parchment)); }
.rt-title { font-family: "Spectral", serif; font-style: italic; font-size: 0.76rem; color: var(--faint); }
.rt-spec { color: var(--bone); }
.rt-role { font-family: "Marcellus", serif; letter-spacing: 0.06em; font-size: 0.78rem; }
.rt-ilvl { font-family: "Cinzel", serif; font-weight: 700; color: var(--gold-bright); font-size: 1.02rem; }
.rank-tag { font-family: "Marcellus", serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; padding: 3px 10px; border: 1px solid var(--line-soft); color: var(--bone); white-space: nowrap; }
.rank-tag.gm { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(201,162,39,0.10); }
.rt-seen { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--bone); white-space: nowrap; }
.rt-seen.stale { color: var(--faint); font-style: italic; }
.roster-count { font-family: "Marcellus", serif; letter-spacing: 0.1em; color: var(--muted); font-size: 0.8rem; }
.empty-note { text-align: center; padding: 50px; color: var(--faint); font-style: italic; }

/* portraits (square, gold-framed) */
.por { position: relative; width: 100%; height: 100%; }
.por img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; border: 1px solid var(--gold-dim); background: var(--stone-800); }
.por-fallback { position: absolute; inset: 0; }
.por-fallback svg { width: 100%; height: 100%; }

/* =========================================================================
   CHARACTER PAGE
   ========================================================================= */
.char-page { --cc: var(--gold); }
.char-hero { position: relative; padding: clamp(36px, 5vw, 60px) 0 30px; }
.char-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.4; background: radial-gradient(60% 80% at 16% 0%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 60%); }
.char-back { display: inline-flex; align-items: center; gap: 8px; font-family: "Marcellus", serif; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; color: var(--bone); text-decoration: none; margin-bottom: 24px; transition: color 0.2s, gap 0.2s; }
.char-back:hover { color: var(--gold-bright); gap: 12px; }
.char-top { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: center; }
.char-figure { width: 260px; display: flex; align-items: flex-end; justify-content: center; }
.char-render { height: 400px; width: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.75)); }
.char-guild { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-family: "Marcellus", serif; letter-spacing: 0.06em; color: var(--gold-bright); font-size: 0.98rem; }
.char-portrait { width: 180px; height: 180px; position: relative; border: 2px solid var(--gold-dim); padding: 5px; background: #100c07; }
.char-portrait::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--line-soft); pointer-events: none; }
.char-portrait .por img { border: none; border-radius: 2px; }
.char-id .rank { font-family: "Marcellus", serif; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.8rem; color: var(--cc); }
.char-id .cname { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1; margin: 6px 0; color: var(--parchment); text-shadow: 0 2px 0 rgba(0,0,0,0.6); }
.char-id .title { font-style: italic; font-size: 1.15rem; color: var(--bone); }
.char-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.meta-pill { font-family: "Marcellus", serif; letter-spacing: 0.06em; font-size: 0.82rem; padding: 6px 14px; border: 1px solid var(--line-soft); background: #140f08; color: var(--bone); }
.meta-pill b { color: var(--parchment); }
.meta-pill.spec { border-color: var(--cc); color: var(--cc); }
.meta-pill.gold { border-color: var(--gold-dim); color: var(--gold-bright); }

.char-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; margin-top: 36px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; border: 1px solid var(--line); }
.statbox { padding: 18px 14px; text-align: center; border-right: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.statbox:last-child { border-right: none; }
.statbox .v { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.5rem; color: var(--gold-bright); }
.statbox .k { font-family: "Marcellus", serif; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.66rem; color: var(--muted); margin-top: 5px; }

.card-h { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 18px; color: var(--gold-bright); display: flex; align-items: center; gap: 12px; }
.card-h::before { content: ""; width: 4px; height: 20px; background: var(--horde); }
.bio-card { padding: 28px; }
.bio-card p { color: var(--bone); margin-bottom: 14px; }
.bio-card p:last-child { margin-bottom: 0; }

/* Combat statistics */
.stats-card { padding: 24px 26px; }
.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 18px; }
.statrow { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.statrow .sk { font-family: "Marcellus", serif; letter-spacing: 0.05em; color: var(--bone); font-size: 0.86rem; }
.statrow .sv { font-family: "Cinzel", serif; font-weight: 700; color: var(--parchment); }
.secgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.secstat { text-align: center; padding: 13px 6px; background: #100c07; border: 1px solid var(--line-soft); }
.secstat .secv { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.35rem; color: var(--gold-bright); }
.secstat .secv small { font-size: 0.58em; color: var(--muted); }
.secstat .seck { font-family: "Marcellus", serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; color: var(--muted); margin-top: 4px; }

/* Mythic+ best runs */
.mplus-runs { display: flex; flex-direction: column; gap: 6px; }
.mrun { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #100c07; border: 1px solid var(--line-soft); }
.mrun .md { font-family: "Marcellus", serif; color: var(--bone); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrun .ml { font-family: "Cinzel", serif; font-weight: 700; color: var(--parchment); }
.mrun .ms { font-family: "Cinzel", serif; font-weight: 700; color: var(--gold-bright); width: 46px; text-align: right; }

/* 3D model viewer */
.mv-panel { padding: 26px; }
.mv-stage { position: relative; width: 100%; height: 560px; background: radial-gradient(120% 90% at 50% 20%, #1a140c, #0b0805); border: 1px solid var(--line-soft); display: grid; place-items: center; overflow: hidden; }
.mv-stage canvas { display: block; max-width: 100%; }
.mv-stage.loading::after { content: "Summoning model…"; font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold-bright); }
.mv-load { z-index: 2; }
.mv-fail { text-align: center; color: var(--muted); font-family: "Marcellus", serif; }
.mv-note { font-family: "Marcellus", serif; color: var(--muted); font-size: 0.78rem; margin-top: 12px; text-align: center; }

/* character page CTA + roster note */
.char-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.roster-note { font-family: "Marcellus", serif; color: var(--muted); font-size: 0.82rem; line-height: 1.6; margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--gold-dim); background: rgba(201,162,39,0.04); }
.roster-note b { color: var(--bone); }

/* gear name is now a Wowhead link (real icon injected before the text) */
.gear-name { text-decoration: none; display: block; }
.gear-name:hover { text-decoration: underline; }
.gear-info a ins, .gear-info a .icontiny, .gear-info a .iconsmall, .gear-info a .iconmedium, .gear-info a .iconlarge { vertical-align: middle; margin-right: 7px; }

.gear-card { padding: 26px; }
.gear-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gear-slot { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #100c07; border: 1px solid var(--line-soft); }
.gear-icon { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid; background: #0c0906; }
.gear-info { min-width: 0; }
.gear-name { font-family: "Spectral", serif; font-weight: 600; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-slotname { font-family: "Marcellus", serif; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.gear-ilvl { margin-left: auto; font-family: "Cinzel", serif; font-weight: 700; font-size: 0.94rem; color: var(--gold-bright); }
.q-legendary { color: var(--q-legendary); border-color: var(--q-legendary) !important; }
.q-epic { color: var(--q-epic); border-color: var(--q-epic) !important; }
.q-rare { color: var(--q-rare); border-color: var(--q-rare) !important; }
.q-uncommon { color: var(--q-uncommon); border-color: var(--q-uncommon) !important; }
.q-common { color: var(--q-common); border-color: #cbcbcb !important; }
.q-artifact { color: var(--q-artifact); border-color: var(--q-artifact) !important; }
.q-poor { color: var(--q-poor); border-color: var(--q-poor) !important; }

/* =========================================================================
   ACHIEVEMENTS
   ========================================================================= */
.ach-top { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; margin: 24px 0 28px; }
.ach-points { display: flex; align-items: center; gap: 18px; padding: 20px 28px; }
.ach-points .pts { font-family: "Cinzel", serif; font-weight: 900; font-size: 2.6rem; color: var(--gold-bright); }
.ach-points .lbl { font-family: "Marcellus", serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); }
.ach-shield { width: 52px; height: 52px; flex-shrink: 0; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ach { display: flex; gap: 16px; padding: 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); position: relative; }
.ach.done { border-color: var(--line); }
.ach-medal { width: 48px; height: 48px; flex-shrink: 0; }
.ach-medal svg { width: 100%; height: 100%; }
.ach.locked .ach-medal { opacity: 0.35; filter: grayscale(1); }
.ach-info { flex: 1; min-width: 0; }
.ach-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; color: var(--parchment); display: flex; align-items: baseline; gap: 8px; }
.ach-name .apts { margin-left: auto; font-family: "Cinzel", serif; font-weight: 700; font-size: 0.82rem; color: var(--gold-bright); }
.ach-desc { font-size: 0.86rem; color: var(--bone); margin: 5px 0 10px; }
.ach-track { height: 8px; background: #0c0906; border: 1px solid var(--line-soft); overflow: hidden; }
.ach-track > i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--gold) 0 6px, var(--gold-dim) 6px 12px); transition: width 1s var(--ease); }
.ach-prog { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 6px; }
.ach-done-tag { font-family: "Marcellus", serif; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright); }

/* =========================================================================
   CAMPAIGN / RAIDS
   ========================================================================= */
.raid-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin: 26px 0 40px; align-items: start; }
.boss-list { display: flex; flex-direction: column; }
.boss { display: flex; align-items: center; gap: 16px; padding: 15px 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); border-bottom: none; }
.boss:last-child { border-bottom: 1px solid var(--line-soft); }
.boss.killed { border-left: 3px solid var(--gold); }
.boss.progress { border-left: 3px solid var(--horde-bright); }
.boss.locked { opacity: 0.6; }
.boss-idx { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; color: var(--faint); width: 26px; }
.boss-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.02rem; color: var(--parchment); }
.boss-sub { font-family: "Marcellus", serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.boss-status { margin-left: auto; font-family: "Marcellus", serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; padding: 5px 13px; border: 1px solid; }
.st-killed { color: var(--gold-bright); border-color: var(--gold-dim); }
.st-prog { color: var(--horde-bright); border-color: var(--horde); }
.st-locked { color: var(--faint); border-color: var(--line-soft); }

.sched-card { padding: 26px; }
.sched-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sched-row:last-child { border-bottom: none; }
.sched-day { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.82rem; width: 52px; color: var(--gold-bright); text-transform: uppercase; }
.sched-info { flex: 1; }
.sched-info .t { font-family: "Marcellus", serif; color: var(--parchment); }
.sched-info .s { font-size: 0.78rem; color: var(--muted); }
.sched-time { font-family: "Marcellus", serif; color: var(--bone); font-size: 0.82rem; }
.tier-row { margin-bottom: 14px; }
.tier-row .th { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.tier-row .tn { font-family: "Marcellus", serif; font-size: 0.86rem; color: var(--parchment); }
.tier-row .ts { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.78rem; color: var(--gold-bright); white-space: nowrap; }

.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.event { padding: 22px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-soft); position: relative; }
.event .date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--horde); border: 1px solid var(--horde-bright); color: #f4e6c8; float: right; margin-left: 12px; }
.event .date .d { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.5rem; line-height: 1; }
.event .date .m { font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.62rem; }
.event .etype { font-family: "Marcellus", serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; color: var(--horde-bright); }
.event .etitle { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.15rem; margin: 6px 0 8px; color: var(--gold-bright); }
.event .edesc { font-size: 0.88rem; color: var(--bone); margin-bottom: 16px; }
.signup { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signup .count { font-family: "Marcellus", serif; font-size: 0.78rem; color: var(--muted); }
.signup button { font-family: "Marcellus", serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; padding: 8px 16px; cursor: pointer; border: 1px solid var(--gold-dim); background: #140f08; color: var(--gold-bright); transition: all 0.2s; }
.signup button:hover { background: var(--gold); color: #140f08; }
.signup button.joined { background: transparent; border-color: var(--horde); color: var(--horde-bright); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--line); margin-top: 60px; background: #0c0906; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 36px clamp(16px,4vw,40px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-crest { display: flex; align-items: center; }
.footer-crest svg { width: 44px; height: 44px; }
.footer-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; color: var(--gold-bright); }
.footer-sub { font-family: "Marcellus", serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); }
.footer-note { margin-left: auto; max-width: 42ch; font-size: 0.72rem; color: var(--faint); font-style: italic; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; background: var(--stone-850); border-bottom: 1px solid var(--line); padding: 10px; }
  .nav.open a { padding: 12px 18px; }
  .nav-toggle { display: block; }
  .feature-grid, .char-body, .raid-hero, .char-top, .roster-layout, .tenets, .ladder { grid-template-columns: 1fr; }
  .hero-cards { grid-template-columns: repeat(2, 1fr); }
  .hero-figures { display: none; }
  .roster-side { position: static; order: -1; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hstat:nth-child(2) { border-right: none; }
  .char-top { text-align: center; justify-items: center; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .statbox:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
  .search { flex-basis: 100%; }
  .filterbar .select { flex: 1 1 45%; }
}
@media (max-width: 520px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .gear-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}