/* =========================================================================
   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; overflow-x: hidden; }

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: fixed; top: var(--anno-h, 0px); left: 0; right: 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: 2px; }
.nav a {
  font-family: "Marcellus", serif; font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--bone); padding: 9px 13px; position: relative; transition: color 0.2s; white-space: nowrap;
}
.nav a::after { content: ""; position: absolute; left: 13px; right: 13px; 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; }

/* Auth: gold login button / account chip (lives at the end of the nav) */
.nav-auth { display: flex; align-items: center; margin-left: 10px; }
.btn-login {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; padding: 9px 18px; border-radius: 3px;
  color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold-bright);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-login:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-login .btn-ico { flex-shrink: 0; }
.btn-account {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer; padding: 8px 14px; border-radius: 3px;
  color: var(--gold-bright); background: #140f08; border: 1px solid var(--gold-dim);
  transition: border-color 0.2s, color 0.2s;
}
.btn-account:hover { border-color: var(--gold); color: #fff8e2; }
.btn-account.is-officer { border-color: var(--gold); }
.acct-badge {
  font-family: "Marcellus", serif; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* Account page */
.acct-view { padding: clamp(28px, 5vw, 64px) 0; }
.acct-wrap { width: min(1000px, 92vw); margin: 0 auto; }
.acct-title { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold-bright); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; }
.acct-badge-lg { font-size: 0.72rem; padding: 4px 10px; }
.acct-titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; }
.acct-titlerow .acct-title { margin: 0; }
.acct-dc { margin-left: auto; }
.acct-dc + .btn-signout { margin-left: 0; }
.btn-signout { display: inline-flex; align-items: center; gap: 8px; font-family: "Marcellus", serif; font-size: 0.84rem; letter-spacing: 0.03em; color: var(--bone); background: #140f08; border: 1px solid var(--gold-dim); border-radius: 4px; padding: 8px 14px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.btn-signout:hover { color: var(--horde-bright); border-color: var(--horde-bright); background: rgba(155,38,32,0.08); }
.btn-signout .btn-ico { flex-shrink: 0; }
.acct-dc-link { padding: 8px 14px; font-size: 0.8rem; }
.acct-dc-on { display: inline-flex; align-items: center; gap: 8px; font-family: "Marcellus", serif; font-size: 0.84rem; letter-spacing: 0.03em; color: var(--bone); background: #140f08; border: 1px solid var(--gold-dim); border-radius: 4px; padding: 7px 8px 7px 13px; }
.acct-dc-logo { display: inline-flex; align-items: center; color: #5865f2; }
.acct-dc-unlink { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 3px; }
.acct-dc-unlink:hover { color: var(--horde-bright); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.modal-actions .btn { min-width: 110px; }
.acct-note { font-family: "Spectral", serif; color: var(--bone); margin-bottom: 8px; padding: 14px 18px; border-left: 2px solid var(--gold-dim); background: rgba(201,162,39,0.05); }
.acct-note-officer { border-left-color: var(--gold); }
.acct-note b { color: var(--gold-bright); }
.acct-section { margin-top: 32px; }
.acct-h2 { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem; color: var(--gold-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.acct-count { font-family: "Marcellus", serif; font-size: 0.8rem; color: #1a1206; background: var(--gold); border-radius: 10px; padding: 1px 9px; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.acct-card { position: relative; text-align: center; padding: 18px 12px 14px; background: linear-gradient(180deg, #17110a, #100c07); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: transform 0.2s var(--ease), border-color 0.2s; }
.acct-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cc, var(--gold)); opacity: 0.85; border-radius: 4px 4px 0 0; }
.acct-card:hover { transform: translateY(-4px); border-color: var(--cc, var(--gold-dim)); }
.acct-face { width: 54px; height: 54px; margin: 0 auto 10px; }
.acct-cname { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; }
.acct-csub { font-family: "Marcellus", serif; font-size: 0.72rem; color: var(--muted); margin-top: 3px; text-transform: capitalize; }
.acct-empty { font-family: "Spectral", serif; color: var(--muted); font-style: italic; margin-bottom: 14px; }
.acct-cta { margin-top: 30px; }
.acct-cta .btn-discord, .acct-cta .btn-login { margin-top: 0; }
/* Guild ladders */
.lad-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lad-tab { font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--bone); background: #140f08; border: 1px solid var(--line); border-radius: 3px; padding: 8px 16px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.lad-tab:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.lad-tab.on { color: #140f08; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); }
/* Hub: your standing */
.acct-h2-link { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gold); text-decoration: none; margin-left: auto; font-weight: 400; }
.acct-h2-link:hover { color: var(--gold-bright); }
.acct-h2-note { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: auto; font-weight: 400; }

/* Mythic+ season deep-dive (character page) */
.md-panel { padding: 22px 24px; }
.md-season { font-family: "Marcellus", serif; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
.md-summary { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.md-score { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.md-score-v { font-family: "Cinzel", serif; font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--gold-bright); text-shadow: 0 0 14px rgba(201,162,39,0.4); }
.md-score-k { font-family: "Marcellus", serif; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.md-meta { min-width: 0; }
.md-line { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--bone); margin-bottom: 5px; }
.md-line:last-child { margin-bottom: 0; }
.md-line b { color: var(--gold-bright); font-weight: 700; }
.md-role { margin-right: 12px; }
.md-sub { color: var(--muted); font-size: 0.78rem; }
.md-runs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.md-run { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.md-run-d { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.82rem; color: var(--parchment); width: 46px; flex-shrink: 0; }
.md-run-lvl { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.86rem; }
.md-run.timed .md-run-lvl { color: var(--gold-bright); }
.md-run.depleted .md-run-lvl { color: var(--muted); }
.md-run-t { margin-left: auto; font-family: "Marcellus", serif; font-size: 0.72rem; color: var(--bone); }
.md-run-t i { color: #7fae6a; font-style: normal; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }
.md-run.depleted .md-run-t i { color: var(--horde-bright); }
@media (max-width: 560px) { .md-runs { grid-template-columns: 1fr; } }

/* Raid deep-dive (all current raids, per-difficulty progress) */
.rd-panel { padding: 22px 24px; }
.rd-list { display: flex; flex-direction: column; gap: 16px; }
.rd-list.rd-compact { gap: 12px; }
.rd-compact .rd-raid { padding-bottom: 12px; }
.rd-compact .rprog-head { margin-bottom: 7px; }
.rp-pill.rp-lfr { color: var(--muted); border-color: var(--line-soft); }
.rd-raid { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.rd-raid:last-child { padding-bottom: 0; border-bottom: none; }
.rd-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.rd-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; color: var(--parchment); }
.rd-sum { margin-left: auto; font-family: "Marcellus", serif; font-size: 0.78rem; color: var(--gold-bright); }
.rd-diff { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rd-diff:last-child { margin-bottom: 0; }
.rd-diff-l { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); width: 58px; flex-shrink: 0; }
.rd-bar { flex: 1; height: 7px; background: rgba(0,0,0,0.4); border: 1px solid var(--line-soft); overflow: hidden; }
.rd-bar span { display: block; height: 100%; }
.rd-lfr .rd-bar span { background: linear-gradient(90deg, #5a5147, #857a6a); }
.rd-lfr { opacity: 0.72; }
.rd-normal .rd-bar span { background: linear-gradient(90deg, #4a7a3e, #7fae6a); }
.rd-heroic .rd-bar span { background: linear-gradient(90deg, #2f6f8c, #4aa6c8); }
.rd-mythic .rd-bar span { background: linear-gradient(90deg, #7a4bbd, #b07be0); }
.rd-diff-v { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.78rem; color: var(--bone); width: 42px; text-align: right; flex-shrink: 0; }

/* Weekly Vault — styled after the in-game Great Vault (compact cards, 2 per row) */
.gv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gv-panel { background: linear-gradient(180deg, #1a140c, #100b06); border: 1px solid var(--gold-dim); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,235,180,0.06), 0 12px 30px -16px rgba(0,0,0,0.9); padding: 14px 16px; }
.gv-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; margin-bottom: 8px; }
.gv-row { display: grid; grid-template-columns: 74px 1fr; gap: 9px; align-items: stretch; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.gv-row:first-of-type { border-top: none; }
.gv-cat { display: flex; align-items: center; font-family: "Cinzel", serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; color: var(--gold-bright); padding-left: 11px; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.gv-cat-raid { background: linear-gradient(100deg, rgba(155,38,32,0.5), rgba(155,38,32,0.06) 70%); }
.gv-cat-dungeon { background: linear-gradient(100deg, rgba(51,120,140,0.4), rgba(51,120,140,0.05) 70%); }
.gv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gv-card { position: relative; min-height: 68px; padding: 7px 9px 16px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.6); background: linear-gradient(180deg, #2a2114, #17110a); box-shadow: inset 0 1px 0 rgba(255,235,180,0.05), inset 0 0 0 1px rgba(201,162,39,0.08); }
.gv-card.on { background: linear-gradient(180deg, #38290f, #241802); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim), 0 0 14px -5px rgba(201,162,39,0.5); }
.gv-desc { font-family: "Spectral", serif; font-weight: 600; font-size: 0.78rem; line-height: 1.25; color: var(--bone); }
.gv-card.on .gv-desc { color: var(--parchment); }
.gv-center { position: absolute; left: 0; right: 0; top: 24px; bottom: 14px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gv-lock { width: 22px; height: 22px; color: #6b5c3c; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.gv-reward { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.12rem; color: var(--gold-bright); text-shadow: 0 0 10px rgba(201,162,39,0.6), 0 1px 2px rgba(0,0,0,0.7); }
.gv-prog { position: absolute; right: 8px; bottom: 5px; font-family: "Cinzel", serif; font-weight: 700; font-size: 0.7rem; color: var(--muted); }
.gv-card.on .gv-prog { color: var(--gold-bright); }
/* hover popup: what the slot rewards */
.gv-card[data-tip] { cursor: help; }
.gv-card[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); width: max-content; max-width: 220px; white-space: normal; text-align: center; z-index: 20; background: #0c0906; border: 1px solid var(--gold-dim); color: var(--parchment); font-family: "Marcellus", serif; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.02em; padding: 8px 11px; box-shadow: 0 12px 26px -8px rgba(0,0,0,0.9); pointer-events: none; }
.gv-card[data-tip]:hover::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--gold-dim); z-index: 20; }
@media (max-width: 900px) { .gv-list { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .gv-row { grid-template-columns: 1fr; gap: 7px; }
  .gv-cat { padding: 6px 11px; }
  .gv-reward { font-size: 1rem; }
}
.acct-stand { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; }
.stand-wrap { display: flex; flex-direction: column; gap: 16px; }
.stand-charlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.stand-char { border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #17110a, #100c07); padding: 14px 16px; }
.stand-acct { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.15); }
.stand-char-h { font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; margin-bottom: 11px; color: var(--gold-bright); }
.stand-char-h small { font-family: "Spectral", serif; font-style: italic; font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.stand-char-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.stand-char-body .stand-card { padding: 12px 8px; }
.stand-card.stand-none { opacity: 0.5; }
.stand-card.stand-none .stand-rank { color: var(--muted); font-size: 1.3rem; }
.stand-card.stand-none .stand-of { font-style: italic; }
.stand-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; background: linear-gradient(180deg, #17110a, #100c07); border: 1px solid var(--line); border-radius: 5px; }
.stand-rank { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.7rem; color: var(--gold-bright); line-height: 1; }
.stand-cat { font-family: "Marcellus", serif; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--bone); margin-top: 6px; }
.stand-of { font-family: "Marcellus", serif; font-size: 0.66rem; color: var(--muted); margin-top: 2px; }
/* Buff Check — armory panels, gold/crimson coverage (no app-like green) */
.buff-comp, .buff-cover, .buff-prep { padding: 22px 24px; }
.buff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.buff-comp-head { display: flex; align-items: center; justify-content: space-between; }
.buff-clear { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--line-soft); padding: 5px 11px; cursor: pointer; transition: all 0.15s; }
.buff-clear:hover { color: var(--horde-bright); border-color: var(--horde-bright); }
.buff-add { position: relative; margin: 16px 0; }
.buff-input { width: 100%; box-sizing: border-box; font-family: "Spectral", serif; font-size: 0.94rem; color: var(--parchment); background: #0c0906; border: 1px solid var(--line); padding: 11px 13px; }
.buff-input::placeholder { color: var(--muted); }
.buff-input:focus { outline: none; border-color: var(--gold-dim); }
.buff-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #100c07; border: 1px solid var(--gold-dim); overflow: hidden; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.9); }
.buff-results:empty { display: none; }
.buff-res { display: block; width: 100%; text-align: left; font-family: "Spectral", serif; font-size: 0.9rem; color: var(--parchment); background: none; border: none; border-bottom: 1px solid var(--line-soft); padding: 9px 13px; cursor: pointer; }
.buff-res:hover { background: rgba(201,162,39,0.08); }
.buff-res small { color: var(--muted); }
.buff-res-empty { padding: 9px 13px; color: var(--muted); font-family: "Spectral", serif; font-style: italic; }
.buff-members { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.buff-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.22); border: 1px solid var(--line-soft); border-left: 3px solid var(--cc, var(--gold)); padding: 6px 8px 6px 11px; }
.buff-cn { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.86rem; }
.buff-gen { font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.buff-x { background: none; border: none; color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.buff-x:hover { color: var(--horde-bright); }
.buff-qc-label { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.buff-qc-row { display: flex; flex-wrap: wrap; gap: 7px; }
.buff-qc { font-family: "Marcellus", serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: var(--bone); background: transparent; border: 1px solid var(--line-soft); border-left: 2px solid var(--cc, var(--line-soft)); padding: 7px 12px; cursor: pointer; transition: all 0.15s; }
.buff-qc:hover { color: var(--cc, var(--gold-bright)); border-color: var(--cc, var(--line)); border-left-color: var(--cc, var(--gold)); }
.buff-score { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.85rem; color: var(--gold-bright); background: #140f08; border: 1px solid var(--gold-dim); padding: 2px 11px; }
.buff-score.full { color: #140f08; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); }
.buff-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.buff-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-dim); background: rgba(0,0,0,0.18); }
.buff-row.ok { border-left-color: var(--gold); }
.buff-row.miss { border-left-color: var(--horde); background: rgba(155,38,32,0.08); }
.buff-ico { flex-shrink: 0; width: 18px; text-align: center; font-weight: 700; font-size: 0.9rem; }
.buff-row.ok .buff-ico { color: var(--gold-bright); }
.buff-row.miss .buff-ico { color: var(--horde-bright); }
.buff-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.9rem; color: var(--parchment); flex: 1; }
.buff-by { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); text-align: right; }
.buff-row.miss .buff-by { color: var(--horde-bright); opacity: 0.85; }
.prep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.prep-item { display: flex; align-items: baseline; gap: 9px; font-family: "Spectral", serif; color: var(--bone); }
.prep-item b { color: var(--parchment); font-weight: 600; }
.prep-note { font-size: 0.82rem; color: var(--muted); }
.prep-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; transform: translateY(-1px); }
.prep-dot.off { background: var(--horde); }
@media (max-width: 780px) { .buff-grid { grid-template-columns: 1fr; } }

/* Professions — guild crafter directory */
.prof-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.prof-tabs .chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-n { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.66rem; line-height: 1; padding: 2px 6px; border: 1px solid var(--line-soft); color: var(--gold-bright); background: rgba(0,0,0,0.28); }
.chip.active .chip-n { color: #140f08; border-color: rgba(20,15,8,0.35); background: rgba(20,15,8,0.14); }
.prof-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.prof-sections.prof-single { grid-template-columns: 1fr; }
.prof-panel { padding: 20px 22px; }
.prof-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.prof-ico { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--gold-dim); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
.prof-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.14rem; color: var(--gold-bright); }
.prof-kind { font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-soft); padding: 3px 7px; }
.prof-kind.kind-gathering { color: #7fae6a; border-color: rgba(127,174,106,0.35); }
.prof-kind.kind-secondary { color: var(--bone); }
.prof-count { margin-left: auto; font-family: "Marcellus", serif; font-size: 0.78rem; color: #140f08; background: var(--gold); padding: 1px 9px; border-radius: 10px; }
.prof-crafters { display: flex; flex-direction: column; }
.prof-panel:not(.expanded) .prof-crafter.prof-hidden { display: none; }
.prof-crafter { display: flex; align-items: center; gap: 11px; padding: 8px 8px 8px 10px; border-left: 2px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.prof-crafter:hover { background: rgba(201,162,39,0.06); border-left-color: var(--cc, var(--gold)); }
.pc-por { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.pc-por .sc-roleicon { width: 15px; height: 15px; bottom: -3px; right: -3px; }
.pc-por .sc-roleicon svg { width: 9px; height: 9px; }
.pc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-name { display: inline-flex; align-items: center; gap: 6px; font-family: "Cinzel", serif; font-weight: 700; font-size: 0.9rem; }
.pc-cls { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted); }
.pc-skill { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-shrink: 0; }
.pc-bar { width: 60px; height: 4px; background: rgba(0,0,0,0.5); border: 1px solid var(--line-soft); overflow: hidden; }
.pc-bar span { display: block; height: 100%; background: var(--gold-dim); }
.pc-bar span.maxed { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.pc-num { font-family: "Marcellus", serif; font-size: 0.76rem; color: var(--bone); min-width: 52px; text-align: right; }
.pc-num small { color: var(--muted); }
.pc-num.max { color: var(--gold-bright); }
.pc-num.pc-none { color: var(--muted); font-style: italic; font-size: 0.7rem; }
.prof-more { width: 100%; margin-top: 10px; font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); background: transparent; border: 1px solid var(--line-soft); padding: 8px; cursor: pointer; transition: all 0.15s; }
.prof-more:hover { border-color: var(--gold-dim); background: rgba(201,162,39,0.06); }
@media (max-width: 780px) { .prof-sections { grid-template-columns: 1fr; } }

/* Character-page professions panel */
.prof-card { padding: 24px 26px; }
.cprof-list { display: flex; flex-direction: column; }
.cprof { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.cprof:last-child { border-bottom: none; padding-bottom: 0; }
.cprof:first-child { padding-top: 0; }
.cprof-ico { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--gold-dim); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6); }
.cprof-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cprof-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.92rem; color: var(--parchment); }
.cprof-xpac { font-family: "Marcellus", serif; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cprof-skill { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-shrink: 0; }
.btn-discord {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer; padding: 9px 18px; border-radius: 3px;
  color: #fff; background: #5865f2; border: 1px solid #6b78f5;
  transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-discord:hover { filter: brightness(1.08); transform: translateY(-1px); }
.acct-linked { font-family: "Spectral", serif; color: var(--bone); display: flex; align-items: center; gap: 10px; }
.acct-linked b { color: #fff8e2; }
.acct-dot { width: 9px; height: 9px; border-radius: 50%; background: #43b581; box-shadow: 0 0 8px #43b581; flex-shrink: 0; }
.acct-unlink { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.acct-unlink:hover { color: var(--horde-bright); border-color: var(--horde-bright); }

/* Login modal */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6,4,2,0.74); backdrop-filter: blur(3px); }
.modal-overlay.open { display: flex; animation: modalFade 0.2s var(--ease); }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card { position: relative; width: min(400px, 100%); text-align: center; padding: 34px 30px 26px; border-radius: 6px; background: linear-gradient(180deg, #17110a, #0d0a06); border: 1px solid var(--gold-dim); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9), inset 0 1px 0 rgba(232,205,107,0.15); }
.modal-x { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color 0.2s; }
.modal-x:hover { color: var(--gold-bright); }
.modal-crest { display: flex; justify-content: center; margin-bottom: 8px; }
.modal-title { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.6rem; color: var(--gold-bright); }
.modal-sub { font-family: "Spectral", serif; color: var(--bone); margin: 6px 0 20px; }
.modal-note { font-family: "Spectral", serif; font-size: 0.9rem; color: #f0d9a0; background: rgba(201,162,39,0.1); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 11px 13px; margin-bottom: 18px; text-align: left; }
.modal-provider { width: 100%; justify-content: center; margin-bottom: 12px; padding: 12px; font-size: 0.86rem; box-sizing: border-box; }
.modal-fine { font-family: "Spectral", serif; font-style: italic; font-size: 0.76rem; color: var(--muted); margin-top: 8px; }
.modal-join { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--muted); margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.modal-join a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.modal-join a:hover { color: var(--gold); }

/* ===================== Admin panel ===================== */
.adm { width: min(1200px, 94vw); margin: 0 auto; padding: clamp(24px, 4vw, 48px) 0; }
.adm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.adm-title { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--gold-bright); }
.adm-whoami { font-family: "Marcellus", serif; color: var(--bone); display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.adm-grid { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
.adm-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 84px; }
.adm-tab { text-align: left; font-family: "Marcellus", serif; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--bone); background: none; border: none; border-left: 2px solid transparent; padding: 10px 14px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.adm-tab:hover { color: var(--gold-bright); background: rgba(201,162,39,0.05); }
.adm-tab.on { color: var(--gold-bright); border-left-color: var(--gold); background: rgba(201,162,39,0.08); }
.adm-body { min-width: 0; }
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-body h2 { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.4rem; color: var(--gold-bright); }
.adm-body h3 { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; color: var(--gold-bright); margin-bottom: 6px; }
.adm-sub { font-family: "Spectral", serif; color: var(--muted); font-size: 0.9rem; margin-top: 3px; max-width: 60ch; }
.adm-actions { display: flex; gap: 10px; }
.adm-btn { font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--gold-bright); background: #140f08; border: 1px solid var(--gold-dim); border-radius: 3px; padding: 9px 16px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.adm-btn:hover { background: var(--gold); color: #140f08; border-color: var(--gold-bright); }
.adm-btn.adm-save { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #1a1206; border-color: var(--gold-bright); }
.adm-btn.adm-save:hover { filter: brightness(1.08); }
.adm-btn:disabled { opacity: 0.55; cursor: default; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.adm-card { background: linear-gradient(180deg, #17110a, #100c07); border: 1px solid var(--line); border-radius: 5px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.adm-k { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.adm-v { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.7rem; color: var(--gold-bright); line-height: 1.1; }
.adm-note { font-family: "Spectral", serif; font-size: 0.8rem; color: var(--faint); }
.adm-refresh { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line); border-radius: 5px; background: rgba(201,162,39,0.04); }
.adm-refresh .adm-btn { white-space: nowrap; }
.adm-msg { font-family: "Spectral", serif; font-size: 0.88rem; margin: 12px 0; min-height: 1em; }
.adm-msg.ok { color: #7fc99a; }
.adm-msg.err { color: var(--horde-bright); }
.adm-list { display: flex; flex-direction: column; gap: 12px; }
.adm-item { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(180deg, #16100a, #100c07); border: 1px solid var(--line); border-radius: 5px; padding: 14px; }
.adm-fields { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; min-width: 0; }
.adm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-field.adm-wide { grid-column: 1 / -1; }
.adm-field span { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.adm-field input, .adm-field textarea, .adm-field select { font-family: "Spectral", serif; font-size: 0.92rem; color: var(--parchment); background: #0c0906; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.adm-field input:focus, .adm-field textarea:focus { outline: none; border-color: var(--gold-dim); }
.adm-field textarea { resize: vertical; }
.adm-del { flex-shrink: 0; width: 30px; height: 30px; border-radius: 3px; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.adm-del:hover { color: var(--horde-bright); border-color: var(--horde-bright); }
.adm-empty, .adm-loading { font-family: "Spectral", serif; color: var(--muted); font-style: italic; padding: 8px 0; }
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-family: "Spectral", serif; font-size: 0.9rem; }
.adm-table th { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gold-dim); white-space: nowrap; }
.adm-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--bone); vertical-align: top; }
.adm-muted { color: var(--faint); }
.adm-audit { display: flex; flex-direction: column; gap: 2px; }
.adm-arow { display: flex; gap: 12px; align-items: flex-start; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.adm-adot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 6px rgba(201,162,39,0.5); }
.adm-atext { font-family: "Spectral", serif; color: var(--parchment); font-size: 0.92rem; }
.adm-ameta { font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
/* events: embedded calendar + archivable accordion */
.adm-cal { margin-bottom: 24px; }
.adm-cal.cal-wrap { grid-template-columns: 1fr; }   /* full-width month grid (beats .cal-wrap) */
.adm-cal .cal-list { display: none; }               /* accordion below is the list */
.adm-evlist { display: flex; flex-direction: column; gap: 6px; }
.adm-ev { background: linear-gradient(180deg, #16100a, #100c07); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.adm-ev.is-open { border-color: var(--gold-dim); }
.adm-ev.is-arch { opacity: 0.66; }
.adm-ev-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.adm-ev-head:hover { background: rgba(201,162,39,0.05); }
.adm-ev-caret { color: var(--gold); font-size: 0.7rem; flex-shrink: 0; width: 10px; }
.adm-ev-date { font-family: "Marcellus", serif; font-size: 0.78rem; color: var(--gold-bright); white-space: nowrap; flex-shrink: 0; min-width: 92px; }
.adm-ev-title { font-family: "Spectral", serif; color: var(--parchment); font-size: 0.95rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ev-title em { color: var(--muted); }
.adm-ev-type { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; }
.adm-ev-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-mini { font-family: "Marcellus", serif; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--gold-bright); background: none; border: 1px solid var(--gold-dim); border-radius: 3px; padding: 3px 9px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.adm-mini:hover { background: var(--gold); color: #140f08; }
.adm-mini-del { color: var(--muted); border-color: var(--line); font-size: 1rem; line-height: 1; padding: 1px 8px; }
.adm-mini-del:hover { background: none; color: var(--horde-bright); border-color: var(--horde-bright); }
.adm-ev-body { padding: 6px 12px 14px; border-top: 1px solid var(--line); }
.adm-arch-toggle { margin-top: 16px; font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--muted); background: none; border: none; cursor: pointer; padding: 6px 0; display: block; }
.adm-arch-toggle:hover { color: var(--gold-bright); }
.adm-archived { margin-top: 8px; }
@media (max-width: 620px) {
  .adm-ev-head { flex-wrap: wrap; gap: 6px 10px; }
  .adm-ev-title { flex-basis: 100%; order: 3; }
  .adm-ev-type { display: none; }
}
@media (max-width: 760px) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .adm-tab { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .adm-tab.on { border-left: none; border-bottom-color: var(--gold); }
}

/* ===================== Calendar ===================== */
.cal-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
.cal-list { display: flex; flex-direction: column; gap: 10px; }
.cal-list-head { font-family: "Marcellus", serif; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cal-grp { margin-top: 16px; }
.cal-grp:first-of-type { margin-top: 10px; }
.cal-grp-h { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 7px; }
.cal-grp-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.cal-grp-g { color: var(--gold-bright); }
.cal-grp-g::before { background: var(--gold-bright); }
.cal-grp-w { color: var(--horde-bright); }
.cal-grp-w::before { background: var(--horde-bright); }
.cal-clear { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: none; border: 1px solid var(--gold-dim); border-radius: 3px; padding: 3px 8px; cursor: pointer; }
.cal-clear:hover { color: var(--gold-bright); border-color: var(--gold); }
.cal-li { display: flex; gap: 12px; background: linear-gradient(180deg, #16100a, #100c07); border: 1px solid var(--line); border-radius: 5px; padding: 11px 13px; }
.cal-li-date { flex-shrink: 0; min-width: 42px; text-align: center; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); padding-right: 10px; white-space: nowrap; }
.cal-li-date .d { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.3rem; color: var(--gold-bright); line-height: 1; white-space: nowrap; }
.cal-li-date .m { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.cal-li-multi .cal-li-date .d { font-size: 1.05rem; }
.cal-li-body { min-width: 0; }
.cal-li-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.cal-li-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.94rem; color: var(--parchment); }
.cal-li-when { font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--gold); margin-top: 2px; }
.cal-li-wh { display: inline-block; margin-top: 6px; font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.cal-li-wh:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.cal-empty { font-family: "Spectral", serif; font-style: italic; color: var(--muted); }
.cal-grid-wrap { min-width: 0; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-nav-group { display: flex; align-items: center; gap: 12px; }
.cal-mon { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.25rem; color: var(--gold-bright); min-width: 9.5em; text-align: center; }
.cal-filter { font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--gold-bright); background: #140f08; border: 1px solid var(--gold-dim); border-radius: 3px; padding: 7px 10px; cursor: pointer; }
.cal-filter:focus { outline: none; border-color: var(--gold); }
.cal-legend { display: flex; align-items: center; gap: 6px; font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--muted); }
.cal-legend .cd { width: 8px; height: 8px; border-radius: 50%; }
.cal-legend .cd-w { margin-left: 8px; }
.cal-li-multi .cal-li-date .rng { font-size: 0.8rem; }
.cal-nav { width: 34px; height: 34px; border-radius: 3px; background: #140f08; border: 1px solid var(--gold-dim); color: var(--gold-bright); font-size: 1.1rem; cursor: pointer; transition: background 0.2s, color 0.2s; }
.cal-nav:hover { background: var(--gold); color: #140f08; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); }
.cal-weeks { display: flex; flex-direction: column; gap: 6px; }
.cal-week { position: relative; }
.cal-week-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: calc(60px + var(--lanes, 0) * 19px); padding: 6px 8px; background: linear-gradient(180deg, #140f09, #0e0a06); border: 1px solid var(--line); border-radius: 4px; color: var(--bone); font: inherit; text-align: left; cursor: default; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.cal-day.cal-has { cursor: pointer; }
.cal-day.cal-has:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.cal-day.cal-out { opacity: 0.32; }
.cal-num { font-family: "Marcellus", serif; font-size: 0.9rem; }
.cal-day.cal-today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.cal-day.cal-today .cal-num { color: var(--gold-bright); }
.cal-day.cal-sel { background: linear-gradient(180deg, rgba(201,162,39,0.18), rgba(201,162,39,0.06)); border-color: var(--gold); }
.cal-dots { display: flex; gap: 3px; margin-top: auto; padding-top: 4px; }
.cal-dots .cd { width: 6px; height: 6px; border-radius: 50%; }
.cal-dots .cd-g { background: var(--gold); }
.cal-dots .cd-w { background: var(--horde-bright); }
.cal-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 6px; grid-auto-rows: 17px; align-content: start; padding-top: 27px; pointer-events: none; }
.cal-evbar { display: block; height: 16px; line-height: 15px; font-family: "Marcellus", serif; font-size: 0.64rem; letter-spacing: 0.01em; padding: 0 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 3px; cursor: pointer; pointer-events: auto; box-sizing: border-box; }
.cal-evbar.bar-w { background: linear-gradient(180deg, #6e1f2a, #4f141d); color: #f5dcc6; border: 1px solid #83313c; }
.cal-evbar.bar-g { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); color: #1a1206; border: 1px solid var(--gold-bright); }
.cal-evbar:not(.bar-start) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-evbar:not(.bar-end) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 780px) {
  .cal-wrap { grid-template-columns: 1fr; gap: 18px; }
  .cal-grid-wrap { order: -1; }
  .cal-day { min-height: calc(48px + var(--lanes, 0) * 17px); padding: 4px 5px; }
  .cal-num { font-size: 0.8rem; }
  .cal-evbar { font-size: 0.56rem; padding: 0 4px; }
  .cal-bars { padding-top: 23px; }
  .cal-legend { display: none; }                 /* free up the top row on phones */
  .cal-mon { min-width: 0; font-size: 1.05rem; }
  .cal-filter { font-size: 0.74rem; padding: 6px 8px; }
  .cal-nav-group { gap: 8px; }
}

/* ---- Layout helpers ---------------------------------------------------- */
main { display: block; min-height: 60vh; padding-top: calc(var(--nav-h, 68px) + var(--anno-h, 0px)); }
/* Site-wide announcement banner — minimal slim bar above the topbar */
.anno-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: #0d0a06; border-bottom: 1px solid var(--gold-dim); }
.anno-inner { display: flex; align-items: center; gap: 14px; max-width: 1200px; margin: 0 auto; padding: 7px clamp(16px, 4vw, 40px); }
.anno-text { font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--parchment); flex: 1; min-width: 0; }
.anno-text::before { content: "◆"; color: var(--gold); font-size: 0.6rem; margin-right: 9px; vertical-align: middle; }
.anno-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.anno-cta, .anno-signin { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 4px 12px; border: 1px solid var(--gold-dim); color: var(--gold-bright); background: transparent; border-radius: 3px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; white-space: nowrap; }
.anno-cta:hover, .anno-signin:hover { background: rgba(201,162,39,0.12); border-color: var(--gold); }
.anno-x { background: none; border: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; }
.anno-x:hover { color: var(--gold-bright); }
@media (max-width: 620px) { .anno-inner { flex-wrap: wrap; gap: 6px 12px; padding: 7px 16px; } .anno-text { flex-basis: 100%; font-size: 0.78rem; } }
.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; overflow: hidden; pointer-events: none; }
.hero-figures img { flex: 1 1 0; min-width: 0; height: 90%; object-fit: cover; object-position: center 16%; opacity: 0.4; filter: contrast(1.05) saturate(0.9); }
.hero-figures img.gm { flex: 1.5 1 0; height: 100%; 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-name { font-family: "Cinzel", serif; font-weight: 700; text-decoration: none; }
.feed-name:hover { text-decoration: underline; }
.feed-ach { color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.feed-ach:hover { text-decoration: underline; }

/* Join / recruitment form */
.nav .nav-join { color: var(--gold-bright); }
.nav .nav-join::after { background: var(--gold-bright); }
.join-wrap { max-width: 840px; }
.join-banner { font-family: "Spectral", serif; color: var(--parchment); font-size: 1rem; line-height: 1.55; background: linear-gradient(180deg, rgba(201,162,39,0.10), rgba(201,162,39,0.03)); border: 1px solid var(--gold-dim); border-left: 3px solid var(--gold); padding: 14px 18px; margin-bottom: 22px; }
.join-banner b { color: var(--gold-bright); }
.join-card { padding: 26px 28px; }
.join-toggle { display: flex; border: 1px solid var(--line); margin-bottom: 22px; }
.join-seg { flex: 1; font-family: "Marcellus", serif; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--bone); background: transparent; border: none; padding: 12px 10px; cursor: pointer; transition: color 0.15s, background 0.15s; }
.join-seg + .join-seg { border-left: 1px solid var(--line); }
.join-seg:hover { color: var(--gold-bright); }
.join-seg.on { color: #140f08; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.join-grid-4 { grid-template-columns: repeat(4, 1fr); }
.join-grid-3 { grid-template-columns: repeat(3, 1fr); }
.join-f span small { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.join-apply, .join-contact { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.join-apply[hidden], .join-contact[hidden] { display: none; }
.join-f { display: flex; flex-direction: column; gap: 6px; }
.join-f.join-wide { margin-top: 14px; }
.join-f > span { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.join-f i { color: var(--horde-bright); font-style: normal; }
.join-f input, .join-f select, .join-f textarea { font-family: "Spectral", serif; font-size: 0.94rem; color: var(--parchment); background: #0c0906; border: 1px solid var(--line); padding: 10px 12px; width: 100%; }
.join-f textarea { resize: vertical; min-height: 96px; }
.join-f input:focus, .join-f select:focus, .join-f textarea:focus { outline: none; border-color: var(--gold-dim); }
.join-f input::placeholder, .join-f textarea::placeholder { color: var(--muted); }
.join-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.join-note { font-family: "Spectral", serif; font-size: 0.9rem; color: var(--bone); }
.join-note.err { color: var(--horde-bright); }
.join-submit { flex-shrink: 0; }
.join-done { text-align: center; padding: 34px 12px; }
.join-done-mark { width: 58px; height: 58px; margin: 0 auto 16px; border: 2px solid var(--gold); border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: var(--gold-bright); }
.join-done h2 { font-family: "Cinzel", serif; font-weight: 700; color: var(--gold-bright); font-size: 1.5rem; margin-bottom: 10px; }
.join-done p { color: var(--bone); max-width: 48ch; margin: 0 auto 20px; }
@media (max-width: 640px) { .join-grid, .join-grid-4, .join-grid-3 { grid-template-columns: 1fr; } }

/* Admin inbox */
.adm-card-link { cursor: pointer; transition: border-color 0.15s; }
.adm-card-link:hover { border-color: var(--gold-dim); }
.adm-badge-new { font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: #140f08; background: var(--horde-bright); border-radius: 10px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.adm-fchip { display: inline-flex; align-items: center; gap: 7px; font-family: "Marcellus", serif; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--bone); background: #140f08; border: 1px solid var(--line); border-radius: 3px; padding: 7px 13px; cursor: pointer; }
.adm-fchip span { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.66rem; color: var(--muted); }
.adm-fchip.on { color: #140f08; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); }
.adm-fchip.on span { color: rgba(20,15,8,0.6); }
.ib-list { display: flex; flex-direction: column; gap: 12px; }
.ib-card { border: 1px solid var(--line); border-left: 3px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 14px 16px; }
.ib-card.ib-new { border-left-color: var(--horde); }
.ib-card.ib-handled { border-left-color: var(--gold-dim); }
.ib-card.ib-arch { opacity: 0.6; }
.ib-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ib-type { font-family: "Marcellus", serif; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 2px; }
.ib-type.ib-apply { color: #140f08; background: var(--gold); }
.ib-type.ib-contact { color: #eef; background: #445486; }
.ib-type.ib-feature { color: #140f08; background: #8fbf72; }
.ib-type.ib-bug { color: #fff; background: #b3543f; }
.ib-who.ib-anon { color: var(--muted); font-style: italic; }
.ib-status { font-family: "Marcellus", serif; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 2px; }
.ib-status.ib-new { color: var(--horde-bright); border-color: var(--horde-bright); }
.ib-time { margin-left: auto; font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--muted); }
.ib-who { font-size: 1rem; color: var(--parchment); }
.ib-who b { color: var(--gold-bright); }
.ib-contact { color: var(--bone); margin-left: 10px; font-size: 0.9rem; }
.ib-meta { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--bone); margin-top: 5px; }
.ib-meta a { color: var(--gold-bright); }
.ib-subject { color: var(--parchment); font-weight: 600; margin-top: 8px; }
.ib-msg { color: var(--bone); margin-top: 6px; white-space: pre-wrap; font-size: 0.94rem; padding-left: 12px; border-left: 2px solid var(--line-soft); }
.ib-fields { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.ib-row { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; }
.ib-k { font-family: "Marcellus", serif; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 132px; flex-shrink: 0; }
.ib-v { font-family: "Spectral", serif; font-size: 0.92rem; color: var(--parchment); word-break: break-word; }
.ib-v a { color: var(--gold-bright); }
.ib-v.ib-anon { font-style: italic; color: var(--muted); }
.ib-msgrow { flex-direction: column; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.ib-msgrow .ib-msg { margin-top: 0; }
@media (max-width: 560px) { .ib-row { flex-direction: column; gap: 1px; } .ib-k { min-width: 0; } }
.ib-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Guild jukebox — persistent music player, bottom-left corner */
.jukebox { position: fixed; left: 20px; bottom: 20px; z-index: 44; font-family: "Marcellus", serif; }
.jb-fab { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; position: relative; cursor: pointer;
  background: linear-gradient(180deg, #1c1710, #100c07); border: 1px solid var(--gold-dim); color: var(--gold-bright);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.85), inset 0 0 0 1px var(--line-soft); transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.jukebox.collapsed .jb-fab { display: inline-flex; }
.jb-fab:hover { color: #fff8e2; border-color: var(--gold); transform: translateY(-2px); }
.jb-fab svg { width: 24px; height: 24px; }
.jb-fab-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.jukebox.playing .jb-fab-dot { background: #7fd68a; box-shadow: 0 0 8px #7fd68a; animation: jb-pulse 1.4s ease-in-out infinite; }
@keyframes jb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.jb-panel { width: 264px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  box-shadow: 0 14px 40px -14px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,235,180,0.05); padding: 12px 14px; position: relative; }
.jb-panel::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--line-soft); pointer-events: none; }
.jukebox.collapsed .jb-panel { display: none; }
.jb-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.jb-now { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.jb-min { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; display: inline-flex; padding: 2px; }
.jb-min:hover { color: var(--gold-bright); }
.jb-min svg { width: 16px; height: 16px; }
.jb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.jb-eq i { width: 3px; height: 4px; background: var(--gold-dim); display: block; }
.jukebox.playing .jb-eq i { background: var(--gold-bright); animation: jb-eq 0.9s ease-in-out infinite; }
.jukebox.playing .jb-eq i:nth-child(2) { animation-delay: 0.2s; }
.jukebox.playing .jb-eq i:nth-child(3) { animation-delay: 0.4s; }
.jukebox.playing .jb-eq i:nth-child(4) { animation-delay: 0.1s; }
@keyframes jb-eq { 0%, 100% { height: 4px; } 50% { height: 13px; } }
.jb-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.9rem; color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; }
.jb-row { display: flex; align-items: center; gap: 6px; }
.jb-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 1px solid var(--line-soft); color: var(--bone); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.jb-btn:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.jb-btn svg { width: 17px; height: 17px; }
.jb-btn.jb-play { width: 38px; height: 38px; color: #140f08; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); }
.jb-btn.jb-play:hover { color: #140f08; filter: brightness(1.08); }
.jb-btn.jb-play svg { width: 20px; height: 20px; }
.jb-vol { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
.jb-vol svg { width: 16px; height: 16px; flex-shrink: 0; }
.jb-vol input[type="range"] { -webkit-appearance: none; appearance: none; width: 68px; height: 3px; background: var(--line); outline: none; cursor: pointer; }
.jb-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-bright); border: 1px solid var(--gold-dim); }
.jb-vol input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-bright); border: 1px solid var(--gold-dim); }
.jb-queue { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: -6px 0 10px; }
.jb-btn.jb-shuffle.on { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(201,162,39,0.12); }
.jb-seek { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.jb-time { font-family: "Marcellus", serif; font-size: 0.62rem; color: var(--muted); min-width: 30px; font-variant-numeric: tabular-nums; }
.jb-seek .jb-time:last-child { text-align: right; }
.jb-prog { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--gold-bright) var(--pct, 0%), var(--line) var(--pct, 0%)); outline: none; cursor: pointer; }
.jb-prog::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-bright); border: 1px solid var(--gold-dim); cursor: pointer; }
.jb-prog::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--gold-bright); border: 1px solid var(--gold-dim); cursor: pointer; }
@media (max-width: 640px) { .jukebox { left: 12px; bottom: 12px; } .jb-panel { width: 232px; } }
.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 { position: relative; width: 92px; height: 92px; margin: 0 auto 14px; }
.hc-portrait .sc-roleicon { width: 25px; height: 25px; bottom: -3px; right: -3px; }
.hc-portrait .sc-roleicon svg { width: 14px; height: 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 { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.lportrait .sc-roleicon { width: 16px; height: 16px; bottom: -3px; right: -3px; }
.lportrait .sc-roleicon svg { width: 9px; height: 9px; }
.lmid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lname-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lbadge { flex-shrink: 0; font-family: "Marcellus", serif; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 1px 6px; border-radius: 2px; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.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) */
/* Leadership tier: GM + Co-GM above the officers */
.leaders-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 32px; }
.lead-card { position: relative; width: 220px; text-align: center; cursor: pointer; padding: 24px 18px 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); transition: transform 0.2s var(--ease), border-color 0.2s; }
.lead-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cc, var(--gold)); }
.lead-card:hover { transform: translateY(-5px); border-color: var(--cc, var(--gold-dim)); }
.lead-rank { font-family: "Marcellus", serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 14px; }
.lead-face { position: relative; width: 90px; height: 90px; margin: 0 auto 14px; }
.lead-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.2rem; }
.lead-sub { font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--muted); margin-top: 5px; }
.lead-officers-label { text-align: center; font-family: "Marcellus", serif; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.74rem; color: var(--muted); margin-top: 40px; position: relative; }
.lead-officers-label::before, .lead-officers-label::after { content: ""; position: absolute; top: 50%; width: 22%; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.lead-officers-label::before { left: 8%; } .lead-officers-label::after { right: 8%; background: linear-gradient(270deg, transparent, var(--line)); }
.showcase-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.sc-card { position: relative; 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 { position: relative; 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; }
.sc-roleicon { position: absolute; z-index: 3; bottom: -4px; right: -4px; width: 21px; height: 21px; border-radius: 50%; background: #0c0906; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.sc-roleicon svg { width: 12px; height: 12px; }
.lead-face .sc-roleicon { width: 26px; height: 26px; bottom: -2px; right: -2px; }
.lead-face .sc-roleicon svg { width: 15px; height: 15px; }
.sc-leadbadge { margin-top: 10px; font-family: "Marcellus", serif; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); padding: 3px 9px; border-radius: 2px; display: inline-block; }
.sc-card.sc-gold { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px -4px rgba(201,162,39,0.5); }
.sc-badge { position: absolute; z-index: 4; top: 6px; right: 6px; font-family: "Marcellus", serif; font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: 2px; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sc-rank { margin-top: 7px; font-family: "Marcellus", serif; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); padding: 2px 8px; border-radius: 2px; display: inline-block; }
.sc-card.sc-gm { border-color: var(--gold-dim); box-shadow: inset 0 2px 0 rgba(201,162,39,0.5); }

/* Armory panels (Achievements / PvP / Reputation / Collections) */
.armory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: start; }
.armory-panel { padding: 22px 24px; }
.pvp-honor { font-family: "Marcellus", serif; color: var(--bone); margin-bottom: 16px; font-size: 0.92rem; }
.pvp-honor b { color: var(--gold-bright); font-size: 1.1rem; }
.pvp-brackets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pvp-b { border: 1px solid var(--line-soft); padding: 14px 8px; text-align: center; background: var(--panel-2); }
.pvp-r { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.5rem; color: var(--gold-bright); line-height: 1; }
.pvp-k { font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.rep-stats { display: flex; gap: 24px; margin-bottom: 16px; font-family: "Marcellus", serif; color: var(--bone); font-size: 0.92rem; }
.rep-stats b { color: var(--gold-bright); font-size: 1.25rem; font-family: "Cinzel", serif; }
.rep-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chip { font-family: "Spectral", serif; font-size: 0.8rem; color: var(--parchment); border: 1px solid var(--line); background: var(--panel-2); padding: 4px 10px; border-radius: 2px; }
.coll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coll-item { border: 1px solid var(--line-soft); padding: 20px 8px; text-align: center; background: var(--panel-2); }
.coll-n { font-family: "Cinzel", serif; font-weight: 900; font-size: 1.9rem; color: var(--gold-bright); line-height: 1; }
.coll-k { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.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 is a single column so the table always has full width and never has to
   scroll on desktop; the two charts sit in a row below it. */
.roster-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.roster-main { min-width: 0; }
.roster-side { display: grid; grid-template-columns: 1fr 1fr; 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-hint { display: none; font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--gold); text-align: right; margin-bottom: 8px; animation: hintPulse 1.8s ease-in-out infinite; }
.rtable-hint.show { display: block; }
@keyframes hintPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.rtable-scroll { position: relative; }
.rtable-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46px; background: linear-gradient(to right, transparent, rgba(14,10,6,0.94)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.rtable-scroll.scrollable::after { opacity: 1; }
.rtable-scroll.scrollable.at-end::after { opacity: 0; }
.rtable-wrap { border: 1px solid var(--line); overflow-x: visible; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.rtable { width: 100%; border-collapse: collapse; }
.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; }
.role-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #0c0906; border: 1px solid var(--line); }
.role-glyph svg { width: 15px; height: 15px; }
.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: 380px 1fr; gap: 40px; align-items: center; }
/* Armory-style diorama: a framed backdrop with a class-colored stage glow; the
   character (transparent PNG) stands in it and the render's empty margins reveal
   the backdrop instead of blank page. main-raw renders are wide (1600x1200) so
   object-fit:cover crops the empty sides and the figure reads large. */
.char-figure {
  position: relative; width: 380px; height: 570px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  border: 1px solid var(--line);
  /* Horde / Quel'Thalas diorama: arcane sun-glow above, crimson war-glow at the base */
  background:
    radial-gradient(56% 38% at 50% 20%, rgba(230,178,88,0.15), transparent 60%),
    radial-gradient(72% 34% at 50% 106%, rgba(176,34,32,0.6), transparent 68%),
    linear-gradient(90deg, rgba(0,0,0,0.5), transparent 22%, transparent 78%, rgba(0,0,0,0.5)),
    radial-gradient(135% 88% at 50% -16%, rgba(0,0,0,0.62), transparent 52%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #160a0a 0%, #1f110c 46%, #0a0605 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 18px 40px -18px rgba(0,0,0,0.85);
}
/* Class emblem standing behind the figure — the real class logo, crisp and
   class-tinted by the stage glow, edges faded so the square icon blends in. */
.char-classbg {
  position: absolute; top: 11%; left: 50%; transform: translateX(-50%);
  width: 70%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  background: var(--classlogo) center / contain no-repeat;
  opacity: 0.34;
  -webkit-mask: radial-gradient(circle at 50% 46%, #000 50%, transparent 72%);
  mask: radial-gradient(circle at 50% 46%, #000 50%, transparent 72%);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--cc) 55%, transparent));
}
.char-render {
  position: relative; z-index: 1;
  width: 100%; height: 116%; object-fit: cover; object-position: center 8%;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.7)) contrast(1.05) saturate(1.06);
  image-rendering: auto;
}
.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: 20px 22px; }
.gear-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.gear-slot { display: flex; align-items: center; gap: 10px; padding: 6px 11px; 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; }

/* Character tabs (Overview / Talents) + Raidbots talent embed */
.char-tabbar { margin-top: 36px; }
.char-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.char-tab { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.05em; color: var(--bone); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 12px 22px; margin-bottom: -1px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.char-tab:hover { color: var(--gold-bright); }
.char-tab.on { color: var(--gold-bright); border-bottom-color: var(--gold); }
/* Talents breaks out of the normal content column so the tree is big + legible. */
.talent-wrap { max-width: min(1760px, 95vw); }
.talent-panel { padding: 22px 24px; }
.talent-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.talent-head .card-h { margin-bottom: 0; }
.talent-reset.ok { color: var(--gold-bright); border-color: var(--gold-bright); }
.talent-tip { margin-top: 12px; font-family: "Spectral", serif; color: var(--bone); font-size: 0.9rem; line-height: 1.55; max-width: 90ch; }
.talent-tip b { color: var(--gold-bright); font-weight: 600; }
.talent-embed { margin-top: 16px; width: 100%; }
.talent-embed iframe { width: 100%; min-height: 900px; border: 1px solid var(--line-soft); background: #17120b; display: block; }
.talent-credit { margin-top: 14px; font-family: "Marcellus", serif; font-size: 0.76rem; letter-spacing: 0.03em; color: var(--muted); }
.talent-credit a { color: var(--gold-bright); text-decoration: none; }
.talent-credit a:hover { text-decoration: underline; }

/* =========================================================================
   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; }

/* Real feats: guild achievement stats, live feat streams, decorated leaderboard */
.card-h-note { font-family: "Marcellus", serif; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-left: auto; }
.ach-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
.astat { border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); padding: 20px 18px; text-align: center; }
.astat-n { font-family: "Cinzel", serif; font-weight: 900; font-size: 2.1rem; color: var(--gold-bright); line-height: 1; }
.astat-l { font-family: "Marcellus", serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.66rem; color: var(--muted); margin-top: 8px; }
.feats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 6px; }
.feats-panel { padding: 22px 24px; min-width: 0; }
.feats-panel .feat-row, .armory-panel .feat-row { min-width: 0; }
.armory-panel, .astat { min-width: 0; }
.feats-panel.is-fos { border-color: var(--gold-dim); box-shadow: inset 0 2px 0 rgba(201,162,39,0.45); }
.feats-panel.is-fos .feat-name { color: var(--parchment); }
.feats-panel.is-fos .feat-name:hover { color: var(--gold-bright); }
.feat-stream { max-height: 460px; overflow-y: auto; margin: -6px -8px -6px 0; padding-right: 8px; }
.feat-row { display: flex; gap: 13px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.feat-row:last-child { border-bottom: none; }
.feat-medal { width: 30px; height: 30px; flex-shrink: 0; opacity: 0.9; }
.feat-body { min-width: 0; flex: 1; }
.feat-name { display: block; font-family: "Spectral", serif; font-weight: 600; font-size: 0.98rem; color: var(--parchment); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-name:hover { color: var(--gold-bright); }
.feat-meta { font-family: "Marcellus", serif; font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.feat-who { text-decoration: none; font-weight: 600; }
.feat-who:hover { text-decoration: underline; }
.feat-ago { color: var(--faint); }
.maxlvl-check { display: inline-flex; align-items: center; gap: 8px; font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--bone); cursor: pointer; user-select: none; white-space: nowrap; }
.maxlvl-check input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.feat-tag { font-family: "Marcellus", serif; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); padding: 1px 6px; border-radius: 2px; }
.feat-tag.fos { color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); font-weight: 700; letter-spacing: 0.05em; }
.feat-row.is-fos .feat-name { color: var(--gold-bright); }
.feat-stream::-webkit-scrollbar { width: 8px; }
.feat-stream::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.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: 1fr 1.3fr; gap: 24px; margin: 26px 0 40px; align-items: start; }
.raid-left { display: flex; flex-direction: column; gap: 20px; }
.raid-right { display: flex; flex-direction: column; }
.rr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.rr-head .card-h { margin-bottom: 0; }
.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; }
.sched-cal-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }
.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: 14px; }
.ev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ev-src { font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; font-weight: 700; }
.ev-guild { color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.ev-wow { color: #e2eeff; background: linear-gradient(180deg, #315f97, #203f66); }
.ewhen { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--gold); letter-spacing: 0.04em; }
.event .date.date-now { background: linear-gradient(180deg, #3f7d3f, #245224); border-color: #58a558; }
.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
   ========================================================================= */
/* Nav collapses to a hamburger earlier than the layout grids — 8 links + brand
   + login button need ~1300px to sit inline without crowding. */
@media (max-width: 1200px) {
  .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; margin-left: auto; }
  .nav.open .nav-auth { width: 100%; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
  .nav.open .nav-auth .btn-login, .nav.open .nav-auth .btn-account { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }
}
@media (max-width: 900px) {
  .feature-grid, .char-body, .raid-hero, .char-top, .roster-layout, .tenets, .ladder, .feats-grid { grid-template-columns: 1fr; }
  .ach-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-cards { grid-template-columns: repeat(2, 1fr); }
  .hero-figures { display: none; }
  .roster-side { grid-template-columns: 1fr; order: -1; }
  .rtable-wrap { overflow-x: auto; }
  .rtable { min-width: 600px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hstat:nth-child(2) { border-right: none; }
  .char-top { text-align: center; justify-items: center; }
  .char-id { width: 100%; max-width: 100%; min-width: 0; }
  .char-meta { justify-content: center; }
  .char-figure { width: 100%; max-width: 380px; height: 56vh; max-height: 520px; margin: 0 auto; }
  .char-render { width: 100%; height: 116%; max-width: none; }
  .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; }
}
/* Very narrow (e.g. Galaxy Fold cover screen) — stack everything, shrink big numbers */
@media (max-width: 400px) {
  .wrap { padding: 0 13px; }
  .armory-grid, .ach-stats, .hero-cards, .feats-grid { grid-template-columns: 1fr; }
  .armory-panel, .feats-panel { padding: 16px 15px; }
  .astat, .coll-item, .pvp-b, .statbox { padding: 14px 8px; }
  .astat-n { font-size: 1.55rem; }
  .coll-n, .pvp-r { font-size: 1.5rem; }
  .statbox .v { font-size: 1.3rem; }
  .rep-stats { gap: 14px; }
  .char-figure { max-width: 320px; height: 52vh; }
  .feat-name, .lname, .rt-name { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ FAQ accordion ============ */
.faq-wrap { max-width: 820px; }
.faq-group { margin-top: 34px; }
.faq-group:first-of-type { margin-top: 28px; }
.faq-h { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.35rem; color: var(--gold-bright); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-dim); }
.faq-item { border: 1px solid var(--line); background: linear-gradient(180deg, #17110a, #100c07); margin-bottom: 10px; }
.faq-item[open] { border-color: var(--gold-dim); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; font-family: "Marcellus", serif; font-size: 1rem; color: var(--parchment); user-select: none; transition: color 0.15s; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold-bright); }
.faq-item[open] .faq-q { color: var(--gold-bright); }
.faq-chev { flex-shrink: 0; color: var(--muted); transition: transform 0.2s, color 0.2s; display: inline-flex; }
.faq-chev svg { width: 18px; height: 18px; }
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--gold-bright); }
.faq-a { padding: 0 18px 17px; font-family: "Spectral", serif; font-size: 0.96rem; line-height: 1.7; color: var(--bone); }
.faq-a b { color: var(--parchment); font-weight: 600; }
.faq-a em { color: var(--gold-bright); font-style: italic; }
.faq-a a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.faq-a a:hover { color: var(--gold); }

/* ============ Floating feedback widget ============ */
.fb-fab { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #14100a; border: 1px solid var(--gold-bright); border-radius: 30px; font-family: "Marcellus", serif; font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.75); transition: transform 0.15s, filter 0.15s; }
.fb-fab:hover { transform: translateY(-2px); filter: brightness(1.07); }
.fb-fab svg { width: 17px; height: 17px; }
.fb-modal { width: min(470px, 100%); text-align: left; padding: 30px 28px 24px; }
.fb-modal .modal-title { text-align: left; }
.fb-modal .modal-sub { text-align: left; }
.fb-seg-row { display: flex; gap: 8px; margin: 18px 0 14px; }
.fb-seg { flex: 1; padding: 9px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); color: var(--muted); font-family: "Marcellus", serif; font-size: 0.82rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.fb-seg.on { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(201,162,39,0.1); }
.fb-form { display: flex; flex-direction: column; gap: 12px; }
.fb-msg, .fb-in { background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--bone); font-family: "Spectral", serif; font-size: 0.92rem; padding: 11px 13px; }
.fb-msg { resize: vertical; line-height: 1.6; }
.fb-msg:focus, .fb-in:focus { outline: none; border-color: var(--gold-dim); }
.fb-row { display: flex; gap: 10px; }
.fb-in { flex: 1; min-width: 0; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.fb-status { font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--muted); }
.fb-status.err { color: #d98a6a; }
.fb-thanks { text-align: center; padding: 12px 0 8px; }
.fb-check { width: 54px; height: 54px; margin: 4px auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(143,191,114,0.14); color: #8fbf72; }
.fb-check svg { width: 28px; height: 28px; }
.fb-thanks .btn { margin-top: 18px; }
@media (max-width: 640px) { .fb-fab span { display: none; } .fb-fab { padding: 13px; border-radius: 50%; right: 14px; bottom: 14px; } }

/* ============ Member jukebox (playlists + library) ============ */
.mus { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 22px; align-items: start; }
.mus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mus-h { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; color: var(--parchment); letter-spacing: 0.03em; }
.mus-libmeta { font-family: "Marcellus", serif; font-size: 0.72rem; color: var(--muted); }
.mus-new { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px; background: transparent; border: 1px solid var(--line); color: var(--bone); font-family: "Marcellus", serif; font-size: 0.74rem; letter-spacing: 0.05em; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.mus-new:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-new svg { width: 13px; height: 13px; }
.mus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mus-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: linear-gradient(180deg, #17110a, #100c07); border: 1px solid var(--line); color: var(--bone); font-family: "Marcellus", serif; font-size: 0.8rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.mus-chip:hover { border-color: var(--gold-dim); }
.mus-chip.on { border-color: var(--gold); color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.25); }
.mus-chip-n { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.66rem; color: var(--muted); background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 8px; }
.mus-empty { font-family: "Spectral", serif; font-style: italic; color: var(--muted); font-size: 0.86rem; padding: 6px 0; }
.mus-active { border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(20,15,9,0.6), rgba(10,8,5,0.6)); padding: 12px; }
.mus-active-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.mus-plname { flex: 1; min-width: 0; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--gold-bright); font-family: "Cinzel", serif; font-weight: 700; font-size: 0.9rem; padding: 6px 9px; }
.mus-plname:focus { outline: none; border-color: var(--gold-dim); }
.mus-mini { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; background: transparent; border: 1px solid var(--line); color: var(--bone); font-family: "Marcellus", serif; font-size: 0.72rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.mus-mini:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-mini:disabled { opacity: 0.4; cursor: default; }
.mus-mini svg { width: 13px; height: 13px; }
.mus-mini.mus-del:hover { color: #d98a6a; border-color: rgba(217,138,106,0.4); }
.mus-active-tracks { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.mus-buildhint { font-family: "Marcellus", serif; font-size: 0.76rem; color: var(--gold-bright); margin-bottom: 12px; }
.mus-buildhint b { color: var(--parchment); }
.mus-exp { border: 1px solid var(--line-soft); margin-bottom: 8px; background: rgba(10,8,5,0.35); }
.mus-exp[open] { border-color: var(--line); }
.mus-exp-sum { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; list-style: none; user-select: none; }
.mus-exp-sum::-webkit-details-marker { display: none; }
.mus-exp-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.86rem; color: var(--parchment); }
.mus-exp-n { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.64rem; color: var(--muted); background: rgba(0,0,0,0.4); padding: 1px 7px; border-radius: 8px; }
.mus-exp-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.mus-exp-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.mus-exp-btn:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-exp-btn svg { width: 13px; height: 13px; }
.mus-exp-tracks { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 10px; }
.mus-tr { display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 3px; transition: background 0.15s; }
.mus-tr:hover { background: rgba(201,162,39,0.06); }
.mus-tr.playing { background: rgba(201,162,39,0.12); }
.mus-tr.playing .mus-tr-t { color: var(--gold-bright); }
.mus-play { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex-shrink: 0; background: transparent; border: 1px solid var(--line-soft); color: var(--bone); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.mus-play:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-play svg { width: 13px; height: 13px; }
.mus-tr.playing .mus-play { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-tr-t { flex: 1; min-width: 0; font-family: "Spectral", serif; font-size: 0.9rem; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus-add { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex-shrink: 0; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.mus-add:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold-dim); }
.mus-add:disabled { opacity: 0.3; cursor: default; }
.mus-add.on { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(201,162,39,0.12); }
.mus-add svg { width: 14px; height: 14px; }
@media (max-width: 860px) { .mus { grid-template-columns: 1fr; } }

/* ============ Character profile customization ============ */
.btn-customize.on { color: var(--gold-bright); border-color: var(--gold-dim); }
.custom-card { border-color: var(--gold-dim) !important; }
.cc-note { font-family: "Spectral", serif; font-style: italic; color: var(--muted); font-size: 0.86rem; margin-bottom: 16px; }
.cc-group { margin-bottom: 16px; }
.cc-glabel { display: block; font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.cc-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-tog { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); cursor: pointer; font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--muted); transition: color 0.15s, border-color 0.15s; }
.cc-tog:has(input:checked) { color: var(--parchment); border-color: var(--gold-dim); }
.cc-tog input { accent-color: var(--gold); width: 14px; height: 14px; }
.cc-bio { width: 100%; background: rgba(0,0,0,0.35); border: 1px solid var(--line); color: var(--bone); font-family: "Spectral", serif; font-size: 0.92rem; line-height: 1.6; padding: 11px 13px; resize: vertical; }
.cc-bio:focus { outline: none; border-color: var(--gold-dim); }
.cc-actions { display: flex; align-items: center; gap: 14px; }
.cc-status { font-family: "Marcellus", serif; font-size: 0.8rem; color: var(--muted); }
.cc-status.ok { color: #8fbf72; }
.cc-status.err { color: #d98a6a; }
.cc-own { font-family: "Spectral", serif; font-style: italic; font-weight: 400; font-size: 0.74rem; color: var(--muted); letter-spacing: 0; }
.char-sec { position: relative; }
.char-sec.sec-hidden { opacity: 0.42; }
.char-sec.sec-hidden > :not(.sec-hidden-tag) { filter: grayscale(0.5); }
.sec-hidden-tag { display: block; font-family: "Marcellus", serif; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 6px; }

/* ============ Hub customization (tracked chars + section layout) ============ */
.btn-hubcustom { display: inline-flex; align-items: center; gap: 7px; font-family: "Marcellus", serif; font-size: 0.84rem; letter-spacing: 0.03em; color: var(--bone); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 8px 13px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.btn-hubcustom:hover, .btn-hubcustom.on { color: var(--gold-bright); border-color: var(--gold-dim); }
.acct-h2row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.acct-h2row .acct-h2 { margin-bottom: 0; }
.acct-trackhint { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; color: var(--gold-bright); }
.acct-track { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); border: 1px solid var(--line-soft); border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; }
.acct-track svg { width: 14px; height: 14px; fill: currentColor; }
.acct-track:hover { color: var(--gold-bright); border-color: var(--gold-dim); transform: scale(1.1); }
.acct-track.on { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(201,162,39,0.2); }
.acct-card[draggable="true"] { cursor: grab; }
.acct-card.dragging { opacity: 0.4; outline: 2px dashed var(--gold); cursor: grabbing; }
.acct-card.untracked { opacity: 0.6; }
.acct-card.untracked .acct-face { filter: grayscale(0.6); }
.acct-card.untracked:hover { opacity: 0.85; }
.hubc { border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #17110a, #100c07); padding: 20px 22px; margin-bottom: 30px; }
.hubc > .acct-h2 { margin-bottom: 6px; }
.hubc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 16px 0 18px; }
.hubc-secs { display: flex; flex-direction: column; gap: 6px; }
.hubc-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); }
.hubc-vis { display: inline-flex; align-items: center; gap: 9px; font-family: "Marcellus", serif; font-size: 0.86rem; color: var(--bone); cursor: pointer; }
.hubc-vis input { accent-color: var(--gold); width: 14px; height: 14px; flex-shrink: 0; }
.hubc-move { display: inline-flex; gap: 4px; flex-shrink: 0; }
.hubc-mv { width: 27px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.hubc-mv:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.hubc-mv svg { width: 14px; height: 14px; }
.cc-glabel small { font-family: "Spectral", serif; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 0.82em; margin-left: 7px; }
.hubc-grouphead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.hubc-grouphead .cc-glabel { margin-bottom: 0; }
.hubc-quick { margin-left: auto; display: inline-flex; gap: 6px; }
.hubc-quick button { font-family: "Marcellus", serif; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--line-soft); padding: 3px 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.hubc-quick button:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.hubc-hint { font-family: "Spectral", serif; font-style: italic; color: var(--muted); font-size: 0.82rem; margin-top: 11px; }
@media (max-width: 720px) { .hubc-cols { grid-template-columns: 1fr; gap: 20px; } }

/* ============ Member hub tabs ============ */
.hub-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 24px 0 28px; }
.hub-tab { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; color: var(--muted); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 11px 20px; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.hub-tab:hover { color: var(--bone); }
.hub-tab.on { color: var(--gold-bright); border-bottom-color: var(--gold); }
.hub-panel[hidden] { display: none; }

/* ============ Raid-Helper sign-ups (calendar summary + hub board) ============ */
.cal-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; }
.su-roles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.su-roles span { font-family: "Marcellus", serif; font-size: 0.64rem; letter-spacing: 0.03em; padding: 2px 7px; border: 1px solid var(--line-soft); border-radius: 3px; }
.su-t { color: #6fb0d6; border-color: rgba(111,176,214,0.4); }
.su-h { color: #8fbf72; border-color: rgba(143,191,114,0.4); }
.su-d { color: #d98a6a; border-color: rgba(217,138,106,0.4); }
.su-x { color: var(--muted); }
.su-total { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.66rem; color: var(--gold-bright); }
.rh-list { display: grid; gap: 16px; }
.rh-card { border: 1px solid var(--gold-dim); background: linear-gradient(180deg, #17110a, #100c07); padding: 16px 18px; }
.rh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rh-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; color: var(--gold-bright); }
.rh-when { font-family: "Marcellus", serif; font-size: 0.82rem; color: var(--bone); }
.rh-desc { font-family: "Spectral", serif; font-style: italic; color: var(--muted); font-size: 0.86rem; margin-bottom: 12px; }
.rh-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0; }
.rh-col-h { font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.rh-col-h b { font-family: "Cinzel", serif; margin-left: 3px; }
.rh-tanks { color: #6fb0d6; } .rh-healers { color: #8fbf72; } .rh-dps { color: #d98a6a; }
.rh-col-b { display: flex; flex-direction: column; gap: 5px; }
.rh-p { font-family: "Spectral", serif; font-size: 0.9rem; color: var(--bone); display: flex; align-items: baseline; gap: 6px; }
.rh-p small { font-family: "Marcellus", serif; font-size: 0.64rem; color: var(--muted); }
.rh-empty { color: var(--faint); }
.rh-extra { font-family: "Spectral", serif; font-size: 0.84rem; color: var(--muted); margin-top: 8px; }
.rh-x-l { font-family: "Marcellus", serif; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.rh-abs { opacity: 0.7; }
.rh-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rh-foot-n { font-family: "Marcellus", serif; font-size: 0.74rem; color: var(--muted); }
.rh-signup { padding: 7px 14px; font-size: 0.78rem; }
.rh-nonames { font-family: "Spectral", serif; font-style: italic; color: var(--muted); font-size: 0.84rem; margin-top: 8px; }
.rh-past { opacity: 0.72; }
.rh-upcoming { border-width: 2px; border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.18), 0 12px 34px -20px rgba(0,0,0,0.9); }
.rh-tag { display: inline-block; margin-left: 10px; font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1206; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); padding: 3px 9px; border-radius: 3px; vertical-align: middle; }
.rh-empty-card { border: 1px dashed var(--gold-dim); background: linear-gradient(180deg, rgba(23,17,10,0.6), rgba(16,12,7,0.6)); padding: 30px 22px; text-align: center; font-family: "Cinzel", serif; font-weight: 700; font-size: 1rem; color: var(--parchment); }
.rh-empty-card span { display: block; margin-top: 8px; font-family: "Spectral", serif; font-weight: 400; font-style: italic; font-size: 0.88rem; color: var(--muted); }
.rh-signupbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-spec { background: rgba(0,0,0,0.4); border: 1px solid var(--line); color: var(--bone); font-family: "Marcellus", serif; font-size: 0.78rem; padding: 7px 9px; cursor: pointer; max-width: 160px; }
.rh-spec:focus { outline: none; border-color: var(--gold-dim); }
.rh-dosignup, .rh-signup { padding: 7px 14px; font-size: 0.78rem; }
.rh-youin { font-family: "Marcellus", serif; font-size: 0.8rem; color: #8fbf72; }
.rh-signedin .rh-withdraw { padding: 5px 11px; font-size: 0.72rem; }
.rh-discord-link { font-family: "Marcellus", serif; font-size: 0.72rem; color: var(--muted); text-decoration: none; }
.rh-discord-link:hover { color: var(--gold-bright); }
.rh-err { font-family: "Spectral", serif; font-style: italic; font-size: 0.78rem; color: #d98a6a; flex-basis: 100%; }
.rh-list-wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.campaign-raids { margin-top: 4px; }
@media (max-width: 560px) { .rh-cols { grid-template-columns: 1fr; } }
/* Calendar history: past days + past event bars read as history (dimmed) */
.cal-day.cal-past:not(.cal-today) .cal-num { opacity: 0.55; }
.cal-evbar.bar-past { opacity: 0.6; filter: grayscale(0.4); }
/* Clickable raid list items + roster modal */
.cal-li-raid { cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.cal-li-raid:hover { border-color: var(--gold-dim); background: rgba(201,162,39,0.06); }
.cal-li-raid:active { transform: scale(0.995); }
.cal-li-past { opacity: 0.6; filter: grayscale(0.4); }
.cal-li-past:hover { opacity: 0.85; }
.cal-li-cta { margin-top: 9px; font-family: "Marcellus", serif; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--gold-bright); }
.cal-li-cta.cal-li-recent { color: var(--muted); }
.raid-modal { width: min(620px, 100%); max-height: 88vh; overflow-y: auto; text-align: left; padding: 18px 18px 16px; }
.raid-modal .rh-card { border: none; box-shadow: none; background: transparent; padding: 6px 4px; }
.raid-modal .rh-title { font-size: 1.25rem; }
.raid-modal .rh-cols { margin-top: 14px; }

/* ============ Achievement badges ============ */
.badge-medal { --bm: 46px; width: var(--bm); height: var(--bm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--line); background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.07), rgba(0,0,0,0.45)); color: var(--muted); }
.badge-medal svg { width: 56%; height: 56%; }
.badge-medal.tier-bronze { border-color: #b5763f; color: #d8935a; box-shadow: inset 0 0 8px rgba(181,118,63,0.3); }
.badge-medal.tier-silver { border-color: #c2ccd6; color: #dfe6ee; box-shadow: inset 0 0 8px rgba(194,204,214,0.3); }
.badge-medal.tier-gold { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: inset 0 0 10px rgba(232,205,107,0.35); }
.badge-medal.tier-plat { border-color: #7fd8e6; color: #a9e8f2; box-shadow: inset 0 0 10px rgba(127,216,230,0.4); }
.badge-medal.locked { opacity: 0.5; }
.badge-summary { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.badge-count { font-family: "Cinzel", serif; font-weight: 700; font-size: 2.4rem; color: var(--gold-bright); line-height: 1; }
.badge-count-k { font-family: "Marcellus", serif; font-size: 0.86rem; color: var(--muted); }
.badge-cat { margin-bottom: 26px; }
.badge-cat-h { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.05rem; color: var(--parchment); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.badge-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #17110a, #100c07); border-radius: 4px; }
.badge-card.off { opacity: 0.6; }
.badge-card.off .badge-medal { filter: grayscale(0.7); }
.badge-card.on { border-color: var(--gold-dim); }
.badge-info { min-width: 0; }
.badge-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.94rem; color: var(--parchment); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-tier { font-family: "Marcellus", serif; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor; }
.badge-tier.tier-bronze { color: #d8935a; } .badge-tier.tier-silver { color: #dfe6ee; } .badge-tier.tier-gold { color: var(--gold-bright); } .badge-tier.tier-plat { color: #a9e8f2; }
.badge-desc { font-family: "Spectral", serif; font-size: 0.86rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.badge-prog { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.badge-prog-bar { flex: 1; height: 5px; background: rgba(0,0,0,0.4); border: 1px solid var(--line-soft); border-radius: 3px; overflow: hidden; }
.badge-prog-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.badge-prog-n { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.badge-card.secret .badge-name, .badge-card.secret .badge-desc { font-style: italic; }
.badge-toast { position: fixed; right: 20px; bottom: 84px; z-index: 210; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: linear-gradient(180deg, #1a140c, #100b06); border: 1px solid var(--gold); border-radius: 6px; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.85); transform: translateX(130%); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s; max-width: 330px; }
.badge-toast.in { transform: translateX(0); opacity: 1; }
.bt-eyebrow { font-family: "Marcellus", serif; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
.bt-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 0.98rem; color: var(--parchment); margin-top: 2px; }
.ladder-gate { text-align: center; padding: 42px 22px; border: 1px dashed var(--gold-dim); background: rgba(10,8,5,0.4); font-family: "Spectral", serif; color: var(--bone); font-size: 0.95rem; }
.ladder-gate .btn { margin: 0 4px; vertical-align: middle; }
.lrow-you { border-color: var(--gold-dim) !important; box-shadow: inset 0 0 0 1px rgba(201,162,39,0.22); }
.lad-tab-badges.on, .lad-tab-badges { color: var(--gold-bright); }
@media (max-width: 500px) { .badge-grid { grid-template-columns: 1fr; } .badge-toast { right: 12px; left: 12px; bottom: 78px; max-width: none; } }
.badge-secret-tag { font-family: "Marcellus", serif; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: rgba(138,101,196,0.22); color: #c9a9ec; border: 1px solid rgba(138,101,196,0.45); }