:root {
  --bg: #0b0a08;
  --panel: #14120e;
  --panel-2: #1b1813;
  --line: #3a3224;
  --line-soft: #26211a;
  --gold: #c9a45c;
  --gold-bright: #e8c780;
  --gold-dim: #8c7340;
  --text: #d9d1c1;
  --muted: #8b8272;
  --red: #a3262a;
  --amber: #c98a2e;
  --green: #5c8a4a;

  --ama: #b9a26a;
  --asn: #9a7fb5;
  --bar: #b5694a;
  --dru: #6f9a5a;
  --nec: #7fa6a0;
  --pal: #d6c27e;
  --sor: #6f8fc9;

  --rank-gm: #e8c780;
  --rank-officer: #d4605a;
  --rank-warrior: #9fb3c8;
  --rank-initiate: #a8916c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at top, #1a150e 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 17px/1.55 "Spectral", Georgia, serif;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

h2, h3, th, .label, dt, .rank, .tier-ends {
  font-family: "Cinzel", "Trajan Pro", serif;
  letter-spacing: 0.06em;
}

/* Hero */
/* Sized to the artwork's own proportions so the full scene shows at every width and zoom level.
   Everything inside scales with the viewport width, so phone and desktop look the same. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 7992 / 4872;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  z-index: -3;
  animation: kenburns 6s ease-out both, fade-in 2.2s ease-out both;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(8, 6, 4, 0.72) 0%, rgba(8, 6, 4, 0.25) 70%, transparent 100%),
    linear-gradient(180deg, rgba(8, 6, 4, 0.55) 0%, transparent 25%, transparent 60%, var(--bg) 100%);
}
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.hero-content { text-align: center; padding: 0 16px; }
.hero-crest {
  width: max(30px, 5vw);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 120, 30, 0.45));
  animation: rise 1.2s 0.3s ease-out both;
}
.hero-title {
  margin: 1vw 0 0;
  font-family: "Metamorphous", "Cinzel", serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.04em;
}
.t-line {
  display: block;
  background: linear-gradient(180deg, #fff1c9 0%, #e8c780 35%, #b8862f 65%, #6e4a17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 0 22px rgba(255, 110, 20, 0.35));
  animation: title-in 1.6s 0.5s cubic-bezier(.2, .7, .2, 1) both, flicker 2.5s 2.2s 1;
}
.t-line:first-child { font-size: 3vw; letter-spacing: 0.3em; margin-right: -0.3em; }
.t-big { font-size: 10vw; animation-delay: 0.8s, 2.5s; }
.hero-sub {
  margin: 1.4vw 0 0;
  font-family: "Cinzel", serif;
  font-size: max(9px, 1.2vw);
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 6px #000;
  animation: rise 1.2s 1.5s ease-out both;
}
.hero-sub::before, .hero-sub::after {
  content: "";
  display: inline-block;
  width: 4vw;
  height: 1px;
  margin: 0 1vw;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero-sub::after { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-est {
  margin: 0.7vw 0 0;
  font-family: "Cinzel", serif;
  font-size: max(8px, 1vw);
  letter-spacing: 0.25em;
  margin-right: -0.25em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 6px #000;
  animation: rise 1.2s 1.8s ease-out both;
}

.scroll-cue {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  width: 28px;
  height: 44px;
  margin-left: -14px;
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  animation: rise 1s 2.2s ease-out both;
}
.scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: scroll-dot 1.8s ease-in-out infinite;
}

@keyframes kenburns {
  from { transform: scale(1.12) translate(-1.5%, -1%); }
  to   { transform: scale(1.04) translate(0, 0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes title-in {
  from { opacity: 0; letter-spacing: 0.5em; filter: blur(8px); }
  to   { opacity: 1; }
}
@keyframes flicker {
  0%, 100% { filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 0 22px rgba(255, 110, 20, 0.35)); }
  45%      { filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 0 30px rgba(255, 130, 30, 0.55)); }
  50%      { filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 0 16px rgba(255, 90, 10, 0.3)); }
  55%      { filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 0 26px rgba(255, 120, 25, 0.5)); }
}
@keyframes scroll-dot {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* Sticky nav */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 10, 8, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav .wrap { display: flex; align-items: center; gap: 2px; overflow-x: auto; }
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  text-transform: uppercase;
  padding: 14px 12px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.topnav a:hover, .topnav a.active { color: var(--gold-bright); border-bottom-color: var(--gold-dim); }
.topnav .nav-brand {
  font-family: "Metamorphous", serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--gold);
  margin-right: auto;
  padding-left: 0;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Framed art */
.framed {
  margin: 0;
  border: 1px solid var(--gold-dim);
  padding: 6px;
  background: #0a0907;
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line), 0 10px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.framed img { display: block; width: 100%; height: auto; transition: transform 6s ease; }
.framed:hover img { transform: scale(1.05); }
.framed figcaption {
  padding: 10px 4px 4px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.recruit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.recruit-art { margin-top: 28px; }
.archives .framed { max-width: 495px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Panels */
main { padding-top: 28px; padding-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line-soft);
  padding: 24px;
  scroll-margin-top: 64px;
}
h2 {
  margin: 0 0 20px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
h3 {
  margin: 28px 0 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.muted { color: var(--muted); }

/* Refreshed banner */
.refreshed {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 26px 16px;
  border: 1px solid var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(201, 164, 92, 0.08), rgba(201, 164, 92, 0.02)),
    var(--panel);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--line);
}
.refreshed-label {
  font-family: "Cinzel", serif;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.refreshed-date {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--gold-bright);
  text-wrap: balance;
}
.refreshed-meta { color: var(--muted); font-size: 0.95rem; }
.refreshed-age {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
}
.age-clock {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.04em;
}
.age-label { color: var(--muted); font-size: 0.9rem; }
.refreshed.stale .refreshed-date,
.refreshed.stale .age-clock { color: var(--amber); }

/* Coffers */
.coffers { display: grid; gap: 22px; }
.gold-main { display: flex; flex-direction: column; }
.label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.gold-value {
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 7vw, 3rem);
  color: var(--gold-bright);
  line-height: 1.15;
}
.gold-note { font-size: 0.9rem; color: var(--muted); }
.gold-note strong { color: var(--gold); font-weight: 500; }
.tier-ends { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--gold); }
.tier-ends.muted { color: var(--muted); font-family: "Spectral", serif; letter-spacing: 0; font-size: 0.9rem; }
.bar {
  height: 14px;
  margin: 6px 0;
  background: #0a0907;
  border: 1px solid var(--line);
  padding: 2px;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7a5f2c, var(--gold) 70%, var(--gold-bright));
  transition: width 0.8s ease;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.stats > div { background: var(--panel-2); padding: 12px 14px; }
dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; }
dd { margin: 2px 0 0; font-size: 1.2rem; color: var(--text); }
.stats.compact { margin-bottom: 18px; }

/* Roster */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
.num { text-align: right; }
.rank { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
/* Rank badges: one colour per rank, used in the roster, profile selector and profile header. */
.rank-gm { --r: var(--rank-gm); }
.rank-officer { --r: var(--rank-officer); }
.rank-warrior { --r: var(--rank-warrior); }
.rank-initiate { --r: var(--rank-initiate); }
.rank-other { --r: var(--muted); }
.rank-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 0.7rem "Cinzel", serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--r); padding: 3px 9px 3px 7px;
  border: 1px solid color-mix(in srgb, var(--r) 45%, transparent);
  background: color-mix(in srgb, var(--r) 10%, transparent);
  border-radius: 999px;
}
.rank-badge > span { font-size: 0.85rem; line-height: 1; }
.rank-badge.rank-gm { background: color-mix(in srgb, var(--r) 18%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--r) 25%, transparent); }
.name { color: var(--text); font-weight: 500; }
.gm-row .name { color: var(--gold-bright); }
.gm-mark { color: var(--gold); margin-right: 6px; }
.cls { white-space: nowrap; }
.cls-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  background: var(--c, var(--muted));
  vertical-align: 1px;
}
.lvl { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lvl-bar { width: 60px; height: 4px; background: #0a0907; border: 1px solid var(--line-soft); }
.lvl-bar span { display: block; height: 100%; background: var(--gold-dim); }

/* Composition */
.classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.class-card {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--c);
  padding: 14px;
}
.class-card.empty { border-top-color: var(--line); opacity: 0.85; }
.class-head { display: flex; justify-content: space-between; align-items: baseline; }
.class-name { font-family: "Cinzel", serif; font-size: 0.95rem; color: var(--c); }
.class-card.empty .class-name { color: var(--muted); }
.class-count { font-size: 1.5rem; color: var(--text); }
.class-members { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.class-card.empty .class-members { color: var(--red); }
.class-card.wanted .class-members { color: var(--amber); }

.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.need {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--c);
  padding: 14px 16px;
}
.need-pri {
  grid-row: span 2;
  align-self: start;
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid currentColor;
}
.pri-high { color: var(--red); }
.pri-medium { color: var(--amber); }
.pri-low { color: var(--muted); }
.need-title { font-weight: 500; }
.need-title .role { color: var(--muted); font-weight: 400; }
.need-reason { font-size: 0.95rem; color: var(--muted); }

/* Charter: centred text, then the skeleton army flanked by two dancing necros */
.charter-panel { position: relative; overflow: hidden; }
.charter-text { max-width: 760px; margin: 0 auto; text-align: center; }
#charter-text p { margin: 0 0 16px; font: 500 clamp(1.25rem, 2.8vw, 1.5rem)/1.55 "Cormorant Garamond", serif; font-variant-numeric: lining-nums; color: #e8dfcc; }
#charter-text p:last-child { font: 600 clamp(1.05rem, 2.4vw, 1.4rem)/1.4 "Cinzel", serif; letter-spacing: 0.03em; color: var(--gold-bright); }
.charter-sig { margin: 6px 0 0; font-size: 0.95rem; color: var(--muted); font-style: italic; }

.charter-stage { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3vw, 32px); margin-top: 26px; }
.charter-art { margin: 0; flex: 0 1 520px; min-width: 0; }
.charter-art img { display: block; width: 100%; height: auto; }
.necro-portal {
  flex: none; width: clamp(64px, 14vw, 150px); aspect-ratio: 130 / 170; object-fit: cover; display: block;
  image-rendering: pixelated;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  filter: drop-shadow(0 0 18px rgba(80, 220, 120, 0.25));
}
.necro-portal.mirror { transform: scaleX(-1); }

footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 40px;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .panel { padding: 18px 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lvl-bar { display: none; }
  .hero-sub { letter-spacing: 0.22em; margin-right: -0.22em; }
  .hero-est { letter-spacing: 0.15em; margin-right: -0.15em; }
  .scroll-cue { display: none; }
  .topnav .nav-brand { display: none; }
  .topnav .wrap { justify-content: space-between; }
  .topnav a { padding: 14px 6px; font-size: 0.72rem; letter-spacing: 0.04em; }
  .recruit { grid-template-columns: 1fr; }
  .recruit-art { margin-top: 0; }
  td, th { padding: 9px 8px; }
}

/* Realm status */
.realm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.realm-head { display: flex; align-items: center; gap: 10px; }
.realm-title { font-family: "Cinzel", serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-size: 0.85rem; }
.realm-state { color: var(--muted); font-size: 0.85rem; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.live-dot.on { background: #4caf50; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
.realm-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.realm-stat { display: flex; align-items: center; gap: 8px; }
.realm-icon { width: 20px; height: 20px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-game { stroke: #5b8fd9; }
.ic-site { stroke: #4caf50; }
.realm-num { font-size: 1.35rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.realm-label { color: var(--muted); font-size: 0.85rem; }

/* Coffers: tier just unlocked */
.unlocked-now { margin: 0; color: var(--muted); }
.unlocked-now strong { color: var(--gold-bright); font-weight: 500; }

/* Gold over time, inside the coffers panel */
.coffers-progress { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.coffers-progress .chart-title { margin-top: 0; }

/* Guild value placeholder while the measure is reworked */
.value-stub { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px dashed var(--line); background: var(--panel-2); }
.value-stub p { margin: 0; color: var(--muted); }
.value-stub strong { font-family: "Cinzel", serif; font-weight: 500; color: var(--gold); }
.value-stub-mark { font-size: 2rem; color: var(--gold-dim); animation: stub-spin 8s linear infinite; }
@keyframes stub-spin { to { transform: rotate(360deg); } }

/* Tier ladder */
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tier {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 5rem 9.5rem;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}
.tier-num {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-family: "Cinzel", serif; font-weight: 700;
  border: 1px solid var(--line);
  color: var(--muted);
}
.tier-unlocks { color: var(--text); }
.tier-gold { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.tier-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 0.85rem; }
.tier-status { color: var(--muted); }
.tier-done .tier-num { color: var(--gold); border-color: var(--gold-dim); }
.tier-done .tier-status { color: var(--gold); }
.tier-current { border-color: var(--gold-dim); background: linear-gradient(90deg, rgba(201, 164, 92, 0.1), var(--panel-2) 60%); }
.tier-next { border-color: var(--line); }
.tier-next .tier-num { color: var(--gold-bright); border-color: var(--gold); }
.tier-next .tier-status { color: var(--text); }
.tier-locked .tier-unlocks { color: var(--muted); }
.mini-bar { width: 100%; height: 5px; background: #0a0907; border: 1px solid var(--line-soft); }
.mini-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7a5f2c, var(--gold)); }
.source { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); }
.source a, .res-links a { color: var(--gold); }

/* Gold chart */
.chart-title { margin-top: 0; }
.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 12px "Spectral", serif; }
.chart .ref { stroke: var(--gold-dim); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .ref-label { fill: var(--gold-dim); font: 12px "Cinzel", serif; }
.chart .series { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--gold); stroke: var(--panel); stroke-width: 2; }
.chart .end-label { fill: var(--text); font: 500 13px "Spectral", serif; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart .hit { cursor: crosshair; }
.tip {
  position: absolute;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px;
  background: #0c0a08;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  white-space: nowrap;
}
.tip strong { color: var(--text); font-weight: 500; }
.tip-date, .tip-delta { color: var(--muted); }
.chart-data { margin-top: 12px; }
.chart-data summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.chart-data table { margin-top: 8px; }

/* Roster gains */
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
dd small { color: var(--gold); font-size: 0.8em; }
.gain { color: var(--muted); white-space: nowrap; }
.gain.up { color: var(--gold); }

/* Resources */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.res-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.res-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.res-name { font-family: "Cinzel", serif; color: var(--gold); letter-spacing: 0.04em; }
.res-name::after { content: " \2197"; color: var(--gold-dim); font-family: "Spectral", serif; }
.res-desc { color: var(--muted); font-size: 0.9rem; }
.res-links { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .topnav .wrap { justify-content: flex-start; }
  .tier { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .tier-gold { display: none; }
  .tier-state { min-width: 5.5rem; }
  .realm { padding: 12px 14px; }
  .realm-stats { gap: 18px; }
}

/* Roster: in-game style class codes on phones so the level columns fit */
.cls-short { display: none; }
@media (max-width: 640px) {
  .roster .cls-full { display: none; }
  .roster .cls-short { display: inline; }
  .roster .cls-dot { margin-right: 6px; }
  .roster td, .roster th { padding: 9px 6px; }
  .roster .rank { font-size: 0.72rem; }
}

/* Player profiles */
.profile-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold-dim); }
.profile-link:hover { color: var(--gold-bright); }
.profile-tabs { display: grid; gap: 8px; margin-bottom: 20px; }
.tab-group {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 10px; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-left: 3px solid var(--r);
}
.tab-rank {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 600 0.78rem "Cinzel", serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--r);
}
.tab-rank-icon { font-size: 1.05rem; width: 1.2em; text-align: center; }
.tab-count { margin-left: auto; font: 500 0.72rem "Spectral", serif; color: var(--muted); letter-spacing: 0; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tabs button {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 0.82rem "Cinzel", serif; letter-spacing: 0.04em;
  color: var(--text); background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--r) 30%, var(--line-soft)); padding: 6px 11px; cursor: pointer;
}
.profile-tabs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.profile-tabs button small { font: 500 0.72rem "Spectral", serif; color: var(--muted); letter-spacing: 0; }
.profile-tabs button:hover { border-color: var(--r); }
.profile-tabs button[aria-selected="true"] {
  color: #14110b; background: var(--r); border-color: var(--r);
  box-shadow: 0 0 14px color-mix(in srgb, var(--r) 40%, transparent);
}
.profile-tabs button[aria-selected="true"] small { color: rgba(20, 17, 11, 0.7); }
.profile-tabs button[aria-selected="true"] i { box-shadow: 0 0 0 1.5px #14110b; }
@media (max-width: 640px) {
  .tab-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.profile { min-height: 200px; }
.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.profile-name { margin: 0; font-family: "Metamorphous", serif; font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: 0.04em; text-transform: none; color: var(--gold-bright); border-left: 3px solid var(--c); padding-left: 12px; }
.profile-meta { margin: 6px 0 0; color: var(--muted); padding-left: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-build { margin: 8px 0 0; padding-left: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-build strong { color: var(--text); font-weight: 500; margin-right: 6px; }
.role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); border: 1px solid var(--gold-dim); padding: 2px 8px; }

/* Accolade: a polished gold plate under the name. */
.accolade {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0 15px; padding: 5px 14px 5px 10px;
  font: 700 0.78rem "Cinzel", serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #1a1307;
  background: linear-gradient(180deg, #f6e2a8 0%, #e2bd6a 45%, #b98c3c 55%, #d9b465 100%);
  border: 1px solid #7a5d2a; border-radius: 3px;
  box-shadow: 0 0 18px rgba(232, 199, 128, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.accolade-mark { font-size: 1rem; line-height: 1; }
.accolade::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
  animation: sheen 4.5s ease-in-out 0.6s infinite;
}

/* Showcase: an in-game screenshot in a gilded, glossy frame. */
.showcase { margin: 18px 0 6px; }
.showcase-frame {
  position: relative; overflow: hidden; border-radius: 6px; padding: 3px;
  background: linear-gradient(135deg, #f1d68f, #8c6a2c 30%, #e8c780 55%, #6e5222 80%, #d9b465);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(201, 164, 92, 0.18);
}
.showcase-frame img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  filter: saturate(1.15) contrast(1.06);
  transition: transform 0.6s ease;
}
.showcase-frame:hover img { transform: scale(1.03); }
.showcase-gloss {
  position: absolute; inset: 3px; border-radius: 4px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 40%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 190, 0.25);
}
.showcase-gloss::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
  animation: sheen 6s ease-in-out 1s infinite;
}
.showcase figcaption { margin-top: 8px; color: var(--muted); font-style: italic; font-size: 0.9rem; text-align: center; }
.profile-feature { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center; margin: 18px 0 6px; }
.profile-feature .showcase { margin: 0; }
.bio { border-left: 2px solid var(--gold-dim); padding: 4px 0 4px 18px; }
.bio p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.bio p:last-child { margin-bottom: 0; color: var(--gold-bright); font-style: italic; }
@media (max-width: 640px) { .profile-feature { grid-template-columns: minmax(0, 1fr); } .profile-feature .showcase { max-width: 340px; margin: 0 auto; } }
@keyframes sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .accolade::after, .showcase-gloss::after { animation: none; }
  .showcase-frame img { transition: none; }
  .showcase-frame:hover img { transform: none; }
}
.armory-link { font-family: "Cinzel", serif; font-size: 0.8rem; color: var(--gold); text-decoration: none; border: 1px solid var(--line); padding: 7px 12px; white-space: nowrap; }
.armory-link:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.profile-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 18px 0 8px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.profile-stats > div { background: var(--panel-2); padding: 8px 10px; }
.profile-stats dd { font-size: 1.05rem; }
.charm-line { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; }
.charm-line strong { color: #c7a96b; font-weight: 500; }
.gheed { margin-left: 6px; font-size: 0.75rem; color: var(--green); border: 1px solid #36502c; padding: 1px 7px; white-space: nowrap; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.profile-grid h4 { margin: 0 0 8px; font: 500 0.8rem "Cinzel", serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.profile-grid h4 .muted { color: var(--muted); letter-spacing: 0.04em; text-transform: none; font-family: "Spectral", serif; }
.profile-grid h4:not(:first-child) { margin-top: 20px; }
.items { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.item { background: var(--panel-2); }
.item summary { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 10px; padding: 7px 10px; cursor: pointer; list-style: none; }
.item summary::-webkit-details-marker { display: none; }
.item summary:hover { background: #211d16; }
.item .slot { grid-row: span 2; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-top: 3px; }
.item .iname { color: var(--q, var(--text)); }
.item .ibase { font-size: 0.8rem; color: var(--muted); }
.item .corrupt { color: #c94f4f; }
.item ul { margin: 0; padding: 4px 12px 10px calc(6.5rem + 20px); list-style: none; font-size: 0.85rem; color: #8f8fff; }
.item[open] summary { background: #211d16; }
.q-unique, .q-runeword { --q: #c7a96b; }
.q-set { --q: #4fc94f; }
.q-rare { --q: #e6d36a; }
.q-magic { --q: #8f8fff; }
.q-crafted { --q: #e08a2b; }
.q-normal, .q-superior, .q-low-quality { --q: var(--text); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.skills li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 1.6rem; align-items: center; gap: 10px; font-size: 0.92rem; }
.sk-bar { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.sk-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.skills b { text-align: right; font-weight: 500; color: var(--gold-bright); }
.unspent { margin: 10px 0 0; font-size: 0.85rem; color: var(--amber); }
@media (max-width: 760px) {
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .item summary { grid-template-columns: minmax(0, 1fr); }
  .item .slot { grid-row: auto; padding-top: 0; }
  .item ul { padding-left: 12px; }
}

/* Discord join */
.join-card { margin-top: 20px; padding: 16px 18px; border: 1px solid #3b3f7a; border-left: 3px solid #5865f2; background: linear-gradient(90deg, rgba(88, 101, 242, 0.1), transparent 70%), var(--panel-2); }
.join-card h3 { margin: 0 0 6px; }
.join-card p { margin: 0 0 12px; color: var(--muted); }
.join-card strong { color: var(--text); font-weight: 500; }
.join-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: #5865f2; color: #fff; text-decoration: none; font: 500 0.85rem "Cinzel", serif; letter-spacing: 0.05em; }
.join-btn:hover { background: #4752c4; }
.join-btn svg { width: 18px; height: 18px; fill: currentColor; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--gold-bright); }

/* Data source / freshness labels */
.refreshed-src { margin-top: 14px; font-size: 0.82rem; color: var(--muted); max-width: 46ch; margin-left: auto; margin-right: auto; }
.fresh-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-bottom: 18px; padding: 8px 12px; font-size: 0.82rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-soft); }
.fresh-strip b { color: var(--text); font-weight: 500; }
.fresh-strip a { color: var(--gold); }
.fresh-strip time { color: var(--text); }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.fresh-dot.stale { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.roster-src { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }
.roster-src time { color: var(--text); }
.roster-src .fresh-dot { flex: none; }

/* Recruiting band under the hero */
.join-band {
  position: relative;
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(88, 101, 242, 0.22), transparent 65%),
    linear-gradient(180deg, #120f0b, var(--bg));
  padding: 34px 0 30px;
  text-align: center;
}
.join-band-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.join-kicker { margin: 0; font-family: "Cinzel", serif; font-size: clamp(0.8rem, 2.4vw, 0.95rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.join-kicker span { color: var(--gold-bright); }
.join-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: min(100%, 640px);
  padding: clamp(18px, 3.5vw, 26px) clamp(20px, 5vw, 48px);
  background: linear-gradient(180deg, #6a76f5, #4f5ae0);
  color: #fff; text-decoration: none;
  font: 700 clamp(1.15rem, 4.2vw, 1.9rem) "Cinzel", serif; letter-spacing: 0.06em;
  border: 1px solid #8a93ff; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 40px rgba(88, 101, 242, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.join-hero-btn svg { width: clamp(30px, 6vw, 44px); height: auto; fill: currentColor; flex: none; }
.join-hero-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 14px 50px rgba(88, 101, 242, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.join-hero-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.join-steps { margin: 0; font-size: 0.95rem; color: var(--muted); }
.join-steps strong { color: var(--text); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .join-hero-btn { transition: none; } .join-hero-btn:hover { transform: none; } }

/* Archive carousel */
.carousel { position: relative; max-width: 560px; margin: 0 auto; }
.car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border: 1px solid var(--line); background: #0a0907;
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 3px; }
.car-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.car-slide img, .car-slide video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.car-btn {
  position: absolute; top: calc(50% - 18px); transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gold-dim); background: rgba(10, 9, 7, 0.75); color: var(--gold-bright);
  font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px;
}
.car-btn:hover { background: rgba(34, 29, 20, 0.95); }
.car-btn.prev { left: 10px; }
.car-btn.next { right: 10px; }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.car-dots button { width: 9px; height: 9px; border-radius: 50%; padding: 0; border: 1px solid var(--gold-dim); background: transparent; cursor: pointer; }
.car-dots button[aria-selected="true"] { background: var(--gold); }

/* Guild value: headline HR figure and a per-member bar list. */
.value-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; margin-bottom: 22px; }
.value-main { display: flex; flex-direction: column; gap: 4px; }
.value-big { font: 600 clamp(2.4rem, 7vw, 3.4rem)/1 "Cinzel", serif; color: var(--gold-bright); text-shadow: 0 0 24px rgba(232, 199, 128, 0.25); }
.value-big small { font-size: 0.45em; color: var(--gold); letter-spacing: 0.1em; }
.value-ber { color: var(--muted); font-size: 0.9rem; }
.value-legend { display: flex; gap: 16px; margin: 0 0 10px; font-size: 0.82rem; color: var(--muted); }
.value-legend span { display: inline-flex; align-items: center; gap: 6px; }
.value-legend i { width: 12px; height: 8px; border-radius: 2px; }
.value-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.value-bars li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 2px 0; }
.value-bars li:hover .vb-name { color: var(--gold-bright); }
.vb-name { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-name i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vb-track { display: flex; gap: 2px; height: 10px; }
.vb-track > span { height: 100%; min-width: 3px; }
.vb-track > span:last-child { border-radius: 0 4px 4px 0; }
.seg-gear { background: var(--gold); }
.seg-stash { background: #7f9bb8; }
.vb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 640px) {
  .value-hero { grid-template-columns: minmax(0, 1fr); }
  .value-bars li { grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 8px; }
}
.value-legend[hidden] { display: none; }
#value-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Value web: member nodes feeding the guild's central node. */
.value-web { margin: 6px 0 14px; }
.value-web svg { display: block; width: 100%; height: auto; overflow: visible; }
.vw-link path { fill: none; stroke: var(--gold-dim); stroke-opacity: 0.45; stroke-linecap: round; transition: stroke 0.2s, stroke-opacity 0.2s; }
.vw-spark { fill: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(232, 199, 128, 0.9)); }
.vw-orb { fill: #15110a; stroke: var(--r); stroke-width: 2.5; }
.vw-halo { fill: none; stroke: var(--r); stroke-opacity: 0; transition: stroke-opacity 0.2s; }
.vw-node { outline: none; transition: opacity 0.2s; }
.vw-val { fill: var(--gold-bright); font-family: "Cinzel", serif; font-weight: 700; text-anchor: middle; }
.vw-name { fill: var(--text); font-family: "Spectral", serif; font-weight: 500; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.vw-dot { stroke: none; font-size: 0.7em; }
.vw-core-kicker { fill: var(--gold); font: 600 11px "Cinzel", serif; letter-spacing: 0.1em; text-transform: uppercase; text-anchor: middle; }
.vw-core-total { fill: var(--gold-bright); font: 700 44px "Cinzel", serif; text-anchor: middle; }
.vw-core-unit { fill: var(--muted); font: 500 14px "Spectral", serif; text-anchor: middle; }
.vw-pulse { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: vw-pulse 3s ease-out infinite; }
@keyframes vw-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }
.value-web.focus .vw-node:not(.on) { opacity: 0.4; }
.value-web.focus .vw-link:not(.on) path { stroke-opacity: 0.15; }
.vw-link.on path { stroke: var(--gold-bright); stroke-opacity: 0.9; }
.vw-node.on .vw-halo { stroke-opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .vw-spark { display: none; }
  .vw-pulse { animation: none; opacity: 0; }
}

/* Member detail panel under the value web (replaces hover tooltips, so nothing covers the diagram). */
.vw-node { cursor: pointer; }
.vw-node:focus-visible .vw-halo { stroke-opacity: 1; }
.vw-detail {
  min-height: 150px; margin: 0 0 16px; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-top: 2px solid var(--gold-dim);
}
.vd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vd-head > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-name { display: inline-flex; align-items: center; gap: 8px; font: 600 1.2rem "Cinzel", serif; color: var(--gold-bright); }
.vd-name i { width: 9px; height: 9px; border-radius: 50%; }
.vd-total { color: var(--muted); font-size: 0.9rem; }
.vd-total b { font: 700 1.5rem "Cinzel", serif; color: var(--gold-bright); }
.vd-total small { margin-left: 6px; }
.vd-bar { display: flex; gap: 2px; height: 10px; margin: 12px 0 10px; }
.vd-bar span:first-child { border-radius: 4px 0 0 4px; }
.vd-bar span:last-child { border-radius: 0 4px 4px 0; }
.vd-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; margin: 0; }
.vd-parts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-soft); padding: 3px 0; }
.vd-parts > div.zero { opacity: 0.5; }
.vd-parts dt { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: "Spectral", serif; }
.vd-parts dt i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.vd-parts dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.vd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 0.85rem; }
.vd-top > span:first-child { color: var(--muted); margin-right: 4px; font-family: "Cinzel", serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.vd-item { border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; color: var(--text); }
.vd-item b { color: var(--gold-bright); font-weight: 500; margin-left: 2px; }
/* Part colours follow D2 item quality: unique gold, rare yellow, magic blue; charms green, stash grey. */
.vp-uniques { background: #b8945a; }
.vp-rares { background: #d9cc6a; }
.vp-magic { background: #6f86d6; }
.vp-charms { background: #5f9a6a; }
.vp-stash { background: #8b8272; }
@media (max-width: 640px) {
  .vw-detail { min-height: 210px; padding: 12px; }
  .vd-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Roster "Last Played": fades as members drift away; 14+ days gets an Inactive tag. */
.seen { white-space: nowrap; font-size: 0.85rem; color: var(--muted); }
.seen-active { color: var(--green); }
.seen-idle { color: var(--amber); }
.seen-inactive { color: var(--red); }
.inactive-tag { margin-left: 6px; font: 600 0.65rem "Cinzel", serif; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 5px; border-radius: 999px; }

/* Top Donors board in the coffers (rows reuse the Guild Value bars). */
.donors { margin-top: 20px; }
.donors h3 { margin: 0 0 6px; }
.donors-sum { margin: 0 0 12px; color: var(--muted); }
.donors-sum strong { color: var(--gold-bright); font-family: "Cinzel", serif; font-size: 1.15rem; }
.donors .vb-track > span { border-radius: 0 4px 4px 0; }
.donors .vb-unalloc .vb-name, .donors .vb-unalloc .vb-val { color: var(--muted); font-style: italic; }
.donors .source { margin-top: 10px; }

/* Trade Prices (pd2trader) */
.prices-asof { margin: -8px 0 4px; font-size: 0.9rem; color: var(--muted); }
.prices-asof time { color: var(--text); }
#prices h3:first-of-type { margin-top: 16px; }
table.prices td { padding: 7px 12px; }
table.prices .up { color: var(--green); }
table.prices .down { color: var(--red); }
.spark-col { width: 156px; }
.spark { position: relative; display: inline-block; vertical-align: middle; }
.spark svg { display: block; overflow: visible; cursor: crosshair; }
.spark polyline { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-dot { fill: var(--gold-bright); stroke: var(--panel); stroke-width: 2; }
.spark .tip { bottom: calc(100% + 6px); right: 0; z-index: 2; }
.spark .tip[hidden] { display: none; }
.price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
.price-groups table.prices td, .price-groups table.prices th { padding-left: 6px; padding-right: 6px; }
@media (max-width: 560px) {
  table.prices td, table.prices th { padding-left: 6px; padding-right: 6px; }
  .spark-col { width: 120px; }
  .spark svg { width: 110px; }
}

/* Shrine for Bruce */
.shrine { text-align: center; }
.shrine-altar { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 24px); margin: 4px 0 18px; }
.shrine-portrait {
  margin: 0; flex: 0 1 380px; min-width: 0; padding: 8px;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--line), 0 0 40px rgba(232, 199, 128, 0.18);
  background: var(--panel-2);
}
.shrine-portrait img { display: block; width: 100%; height: auto; filter: sepia(0.25) contrast(1.05); }
.candle {
  position: relative; flex: none; width: clamp(10px, 2.4vw, 16px); height: clamp(44px, 9vw, 70px);
  background: linear-gradient(90deg, #cfc2a4, #f1e8d2 45%, #b9ab8b);
  border-radius: 3px 3px 1px 1px;
}
.candle.tall { height: clamp(64px, 13vw, 100px); }
.candle::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 7px; margin-left: -1px; background: #2a2218; }
.candle i {
  position: absolute; left: 50%; bottom: calc(100% + 4px); width: 10px; height: 18px; margin-left: -5px;
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%, #fff6d8 0%, #ffd27a 35%, #ff9a2e 70%, transparent 72%);
  box-shadow: 0 0 14px 4px rgba(255, 180, 80, 0.45);
  transform-origin: 50% 100%;
  animation: candle-flicker 2.2s ease-in-out infinite alternate;
}
.candle:nth-child(2) i { animation-duration: 1.7s; animation-delay: -0.4s; }
.candle:nth-child(4) i { animation-duration: 2.6s; animation-delay: -1.1s; }
.candle:nth-child(5) i { animation-duration: 1.9s; animation-delay: -0.8s; }
@keyframes candle-flicker {
  0%   { transform: scale(1, 1) rotate(-2deg); opacity: 0.95; }
  30%  { transform: scale(0.92, 1.08) rotate(2deg); opacity: 1; }
  60%  { transform: scale(1.05, 0.94) rotate(-1deg); opacity: 0.88; }
  100% { transform: scale(0.96, 1.04) rotate(1.5deg); opacity: 1; }
}
.shrine-title { margin: 0 0 8px; font-family: "Cinzel", serif; font-size: 1.25rem; letter-spacing: 0.06em; color: var(--gold-bright); }
.shrine-text { margin: 0 auto 12px; max-width: 560px; color: var(--text); }
.shrine-link { margin: 0; }
.shrine-link a { color: var(--gold); }
@media (max-width: 480px) { .candle:first-child, .candle:last-child { display: none; } }

/* Rune Stonks */
.stonks-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.stonks-head h3 { margin: 0; font-size: clamp(1.3rem, 3.6vw, 1.9rem); color: var(--gold-bright); letter-spacing: 0.08em; }
.stonks-img { width: clamp(140px, 30vw, 220px); height: auto; border: 1px solid var(--line); box-shadow: 0 0 18px rgba(80, 140, 255, 0.18); }
table.prices .tick { font-weight: 500; white-space: nowrap; }
table.prices .tick.up { color: #6fcf5f; }
table.prices .tick.down { color: #e5534b; }