/* =====================================================================
   The Wraith - stats hub (/wraith.html)
   Fire theme: the Wraith is a being of living flame. Ember/molten/gold on
   charred ground, built around the wraith-hero art. Scoped under .wraith-body.
   Admin console stays phosphor-green (site-wide admin convention).
   ===================================================================== */
.wraith-body {
  --wr-bg: #0c0705;
  --wr-bg-2: #150c07;
  --wr-panel: rgba(28, 17, 11, 0.72);
  --wr-panel-2: rgba(38, 23, 14, 0.6);
  --wr-line: rgba(255, 122, 40, 0.18);
  --wr-fire: #ff6a1a;      /* ember orange - the Wraith's light */
  --wr-molten: #ff3b1e;    /* molten red */
  --wr-gold: #ffc24a;      /* victory / champion */
  --wr-flame: #ffd88a;     /* bright flame highlight */
  --wr-ink: #fdeadb;
  --wr-mute: #c1a48f;
  --wr-faint: #8a7060;
  --wr-win: #ffb43e;       /* WIN - killed it */
  --wr-loss: #ff5a3c;      /* LOSS - all surrendered */
  --wr-quit: #9a8578;      /* QUIT - let it reset */
  --wr-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wr-hero-img: image-set(url("/images/plugins/wraith-hero.webp") type("image/webp"), url("/images/plugins/wraith-hero.jpg") type("image/jpeg"));
  background: var(--wr-bg);
  color: var(--wr-ink);
}
.wraith-body #wraith-main { overflow: clip; }
.wraith-body ::selection { background: rgba(255, 106, 26, 0.32); color: #fff; }
.wr-ico { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.12em; }
.wr-ico svg { width: 100%; height: 100%; }
[data-ico] { display: inline-flex; align-items: center; justify-content: center; }
[data-ico] svg { width: 1em; height: 1em; display: block; }

/* ---------- HERO ---------- */
.wr-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(440px, 62vh, 680px);
  display: flex; align-items: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.wr-hero-art {
  position: absolute; inset: 0; z-index: -3;
  background-image: var(--wr-hero-img);
  background-size: cover; background-position: 72% center;
  transform: scale(1.04); animation: wr-kenburns 40s ease-in-out infinite alternate;
}
@keyframes wr-kenburns { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.12) translateX(-1.5%); } }
.wr-hero-fx { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.wr-hero-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--wr-bg) 4%, rgba(12,7,5,0.86) 30%, rgba(12,7,5,0.35) 62%, rgba(12,7,5,0.05) 100%),
    linear-gradient(0deg, var(--wr-bg) 2%, rgba(12,7,5,0.15) 32%, transparent 55%),
    radial-gradient(70% 60% at 78% 45%, rgba(255,106,26,0.16), transparent 60%);
}
.wr-heat { position: absolute; inset: 0; background: radial-gradient(60% 50% at 76% 55%, rgba(255,80,20,0.12), transparent 65%); mix-blend-mode: screen; animation: wr-heat 5s ease-in-out infinite; }
@keyframes wr-heat { 0%,100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
.wr-embers { position: absolute; inset: 0; overflow: hidden; }
.wr-ember-dot { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--wr-fire); box-shadow: 0 0 8px var(--wr-fire), 0 0 14px var(--wr-molten); animation: wr-rise linear infinite; opacity: 0; }
@keyframes wr-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 0.55; } 100% { transform: translateY(-88vh) translateX(14px) scale(0.3); opacity: 0; } }
.wr-hero-glow { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: -1; background: linear-gradient(90deg, transparent, var(--wr-fire), var(--wr-molten), var(--wr-gold), transparent); box-shadow: 0 0 26px var(--wr-fire); }

.wr-hero-inner { position: relative; max-width: 640px; }
.wr-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wr-mono); letter-spacing: 0.34em; text-transform: uppercase; font-size: 0.72rem; color: var(--wr-gold); margin: 0 0 0.7rem; }
.wr-kicker-flame { width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, var(--wr-gold), var(--wr-molten)); box-shadow: 0 0 10px var(--wr-fire); animation: wr-flicker 2.4s infinite; transform-origin: bottom; }
.wr-title {
  font-family: "Cinzel", Georgia, serif; font-weight: 900;
  font-size: clamp(3rem, 10vw, 6.6rem); line-height: 0.92; letter-spacing: 0.03em; margin: 0;
  background: linear-gradient(180deg, #fff 2%, var(--wr-flame) 26%, var(--wr-fire) 62%, var(--wr-molten) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 26px rgba(255,90,20,0.55));
  animation: wr-flicker 6s infinite;
}
@keyframes wr-flicker { 0%,94%,100% { opacity: 1; } 95% { opacity: 0.82; } 96% { opacity: 1; } 97.5% { opacity: 0.9; } }
.wr-tagline { max-width: 40ch; margin: 1.1rem 0 0; color: var(--wr-ink); font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.55; text-shadow: 0 1px 12px rgba(0,0,0,0.7); }

.wr-totals { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.4rem); margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; padding: 0; }
.wr-total { display: flex; flex-direction: column; }
.wr-total-ico { color: var(--wr-fire); font-size: 1.1rem; opacity: 0.9; }
.wr-total-num { font-family: "Cinzel", serif; font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.05; color: var(--wr-flame); text-shadow: 0 0 18px rgba(255,106,26,0.5); font-variant-numeric: tabular-nums; }
.wr-total-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wr-mute); margin-top: 0.2rem; }
@media (max-width: 720px) { .wr-hero { text-align: center; } .wr-hero-inner { margin: 0 auto; } .wr-totals { justify-content: center; } .wr-kicker { justify-content: center; } .wr-hero-art { background-position: center; } .wr-hero-fade { background: linear-gradient(0deg, var(--wr-bg) 6%, rgba(12,7,5,0.55) 45%, rgba(12,7,5,0.7) 100%); } }

/* ---------- REALM BAR (server selector - drives the page) ---------- */
.wr-realmbar { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(12,7,5,0.96), rgba(12,7,5,0.82)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wr-line); }
.wr-realm { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 0; }
.wr-realm-chip { appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; color: var(--wr-mute); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.16s ease; }
.wr-realm-chip:hover { color: var(--wr-ink); border-color: var(--wr-line); }
.wr-realm-chip .wr-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.wr-realm-chip.is-on { color: #1a0b04; background: linear-gradient(180deg, var(--wr-gold), var(--wr-fire)); border-color: transparent; box-shadow: 0 0 20px rgba(255,106,26,0.4); }
.wr-realm-chip.is-all.is-on { background: linear-gradient(90deg, var(--wr-gold), var(--wr-molten)); color: #fff; }

/* ---------- SHELL ---------- */
.wr-shell { padding: clamp(1.6rem, 4vw, 2.6rem) 0 4rem; }
.wr-realm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 1.2rem; }
.wr-realm-head h2 { font-family: "Cinzel", serif; font-size: clamp(1.4rem, 4vw, 2rem); margin: 0; }
.wr-realm-head .wr-season-badge { font-family: var(--wr-mono); font-size: 0.8rem; color: var(--wr-gold); border: 1px solid var(--wr-line); border-radius: 999px; padding: 0.2rem 0.7rem; }
.wr-realm-head .wr-sub { color: var(--wr-mute); font-size: 0.9rem; }

/* ---------- STATS + RECORDS ---------- */
.wr-stats { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; }
.wr-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; }
.wr-metric { position: relative; overflow: hidden; padding: 1rem 1.1rem; border-radius: 14px; background: var(--wr-panel); border: 1px solid var(--wr-line); }
.wr-metric::after { content: ""; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; background: radial-gradient(closest-side, rgba(255,106,26,0.14), transparent); }
.wr-metric-ico { color: var(--wr-fire); font-size: 1.1rem; }
.wr-metric b { display: block; font-family: "Cinzel", serif; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--wr-ink); font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.wr-metric span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-faint); }
.wr-metric .wr-wlq { display: flex; gap: 0.6rem; margin-top: 0.35rem; font-family: var(--wr-mono); font-size: 0.72rem; }
.wr-wlq .w { color: var(--wr-win); } .wr-wlq .l { color: var(--wr-loss); } .wr-wlq .q { color: var(--wr-quit); }

.wr-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.7rem; }
.wr-record { cursor: pointer; display: flex; gap: 0.7rem; align-items: center; padding: 0.8rem 0.9rem; border-radius: 12px; background: var(--wr-panel-2); border: 1px solid rgba(255,255,255,0.06); transition: all 0.16s ease; }
.wr-record:hover { border-color: var(--wr-line); transform: translateY(-2px); }
.wr-record-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,106,26,0.12); color: var(--wr-fire); font-size: 1.05rem; }
.wr-record-body { min-width: 0; }
.wr-record-label { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wr-faint); }
.wr-record-val { font-weight: 700; font-size: 0.98rem; color: var(--wr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-record-sub { font-size: 0.74rem; color: var(--wr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* season strip (All view) */
.wr-seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.wr-season-card { cursor: pointer; position: relative; overflow: hidden; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--wr-panel); border: 1px solid var(--wr-line); transition: transform 0.16s ease; }
.wr-season-card:hover { transform: translateY(-2px); }
.wr-season-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sc, var(--wr-fire)); box-shadow: 0 0 14px var(--sc, var(--wr-fire)); }
.wr-season-server { font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; gap: 0.45rem; }
.wr-season-server .wr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--wr-fire)); box-shadow: 0 0 8px var(--sc, var(--wr-fire)); }
.wr-season-no { font-family: var(--wr-mono); font-size: 0.74rem; color: var(--wr-gold); margin-top: 0.15rem; }
.wr-season-stats { display: flex; gap: 1.2rem; margin-top: 0.8rem; }
.wr-season-stat b { display: block; font-family: "Cinzel", serif; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.wr-season-stat span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wr-faint); }

/* ---------- LAYOUT / PANELS ---------- */
.wr-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
@media (max-width: 920px) { .wr-layout { grid-template-columns: 1fr; } }
.wr-panel { background: var(--wr-panel); border: 1px solid var(--wr-line); border-radius: 16px; padding: clamp(1rem, 2.4vw, 1.6rem); }
.wr-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.wr-panel-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.wr-panel-ico { color: var(--wr-fire); font-size: 1.1rem; }
.wr-panel-sub { margin: 0; color: var(--wr-mute); font-size: 0.85rem; }

/* ---------- FIGHT CARDS ---------- */
.wr-fights { display: flex; flex-direction: column; gap: 0.7rem; }
.wr-fight { position: relative; cursor: pointer; display: grid; gap: 0.75rem; grid-template-columns: auto 1fr auto; align-items: center; padding: 0.9rem 1rem; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease; }
.wr-fight:hover { transform: translateX(3px); border-color: var(--wr-line); background: rgba(255,106,26,0.05); }
.wr-fight:focus-visible { outline: 2px solid var(--wr-fire); outline-offset: 2px; }
.wr-outcome { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; }
.wr-outcome-sigil { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; font-size: 1.05rem; }
.wr-outcome-label { font-family: var(--wr-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.32rem; }
.wr-fight.is-won .wr-outcome { color: var(--wr-win); }
.wr-fight.is-surrender .wr-outcome { color: var(--wr-loss); }
.wr-fight.is-regen .wr-outcome { color: var(--wr-quit); }
.wr-fight-main { min-width: 0; }
.wr-fight-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.wr-fight-server { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wr-mute); background: rgba(255,255,255,0.05); padding: 0.12rem 0.5rem; border-radius: 6px; }
.wr-fight-when { font-size: 0.76rem; color: var(--wr-faint); display: inline-flex; align-items: center; gap: 0.3rem; }
.wr-fight-mvp { font-size: 0.82rem; color: var(--wr-ink); display: inline-flex; align-items: center; gap: 0.28rem; }
.wr-fight-mvp b { color: var(--wr-gold); }
.wr-stage { margin-top: 0.5rem; }
.wr-stage-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.wr-stage-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--wr-molten), var(--wr-fire), var(--wr-gold)); box-shadow: 0 0 10px rgba(255,106,26,0.6); width: 0; transition: width 0.9s cubic-bezier(0.16,1,0.3,1); }
.wr-fight.is-surrender .wr-stage-fill, .wr-fight.is-regen .wr-stage-fill { background: linear-gradient(90deg, #5a3320, #8a7d72); box-shadow: none; }
.wr-stage-meta { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--wr-faint); margin-top: 0.28rem; }
.wr-fight-side { text-align: right; display: flex; flex-direction: column; gap: 0.25rem; }
.wr-diff { font-family: var(--wr-mono); font-size: 0.72rem; color: var(--wr-gold); }
.wr-fight-dur { font-size: 0.72rem; color: var(--wr-faint); display: inline-flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
@media (max-width: 560px) { .wr-fight { grid-template-columns: auto 1fr; } .wr-fight-side { grid-column: 2; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; } }

.wr-more-wrap { text-align: center; margin-top: 1rem; }
.wr-more, .wr-seg { appearance: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--wr-fire); background: transparent; border: 1px solid var(--wr-line); padding: 0.55rem 1.1rem; border-radius: 999px; transition: all 0.16s ease; }
.wr-more:hover { background: rgba(255,106,26,0.09); }

/* ---------- LADDER ---------- */
.wr-ladder-toggle { display: inline-flex; background: rgba(255,255,255,0.04); border-radius: 999px; padding: 3px; gap: 2px; }
.wr-seg { border: none; padding: 0.34rem 0.8rem; border-radius: 999px; font-size: 0.78rem; color: var(--wr-mute); }
.wr-seg.is-on { background: linear-gradient(180deg, var(--wr-gold), var(--wr-fire)); color: #1a0b04; }
.wr-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wr-rank { cursor: pointer; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid transparent; transition: all 0.16s ease; }
.wr-rank:hover { border-color: var(--wr-line); background: rgba(255,106,26,0.05); }
.wr-rank-no { font-family: "Cinzel", serif; font-weight: 700; color: var(--wr-faint); text-align: center; }
.wr-rank:nth-child(1) .wr-rank-no { color: var(--wr-gold); }
.wr-rank:nth-child(2) .wr-rank-no { color: #e6d2b0; }
.wr-rank:nth-child(3) .wr-rank-no { color: #d68a4b; }
.wr-rank-body { min-width: 0; }
.wr-rank-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.35rem; }
.wr-rank-name .wr-member { color: var(--wr-gold); font-size: 0.7rem; }
.wr-rank-meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); margin-top: 0.3rem; overflow: hidden; }
.wr-rank-meter i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--wr-molten), var(--wr-fire), var(--wr-gold)); width: 0; transition: width 0.8s ease; }
.wr-rank-mmr { text-align: right; }
.wr-rank-mmr b { font-family: var(--wr-mono); color: var(--wr-flame); font-size: 0.95rem; }
.wr-rank-mmr span { display: block; font-size: 0.66rem; color: var(--wr-faint); }
.wr-ladder-note { color: var(--wr-faint); font-size: 0.76rem; margin: 0.9rem 0 0; text-align: center; }

/* ---------- ARCHIVE ---------- */
.wr-archive { margin-top: 1.2rem; }
.wr-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.wr-arch-card { padding: 1rem; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,194,74,0.2); }
.wr-arch-season { font-family: var(--wr-mono); color: var(--wr-gold); font-size: 0.74rem; }
.wr-arch-champ { font-family: "Cinzel", serif; font-weight: 700; font-size: 1.1rem; margin: 0.3rem 0; display: flex; align-items: center; gap: 0.35rem; }
.wr-arch-meta { font-size: 0.76rem; color: var(--wr-mute); }

/* ---------- EMPTY / SKELETON ---------- */
.wr-empty { text-align: center; padding: 2.4rem 1rem; color: var(--wr-mute); }
.wr-empty-ico { color: var(--wr-fire); font-size: 2rem; opacity: 0.75; }
.wr-empty-title { font-family: "Cinzel", serif; font-size: 1.1rem; color: var(--wr-ink); margin: 0.6rem 0 0.3rem; }
.wr-empty p { margin: 0; font-size: 0.88rem; }
.wr-skeleton { height: 68px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,140,60,0.08), rgba(255,255,255,0.03)); background-size: 200% 100%; animation: wr-shimmer 1.4s infinite; }
@keyframes wr-shimmer { to { background-position: -200% 0; } }

/* ---------- DRAWER ---------- */
.wr-drawer-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(6, 3, 2, 0.74); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; }
.wr-drawer-scrim.is-open { opacity: 1; }
.wr-drawer { position: fixed; top: 0; right: 0; z-index: 201; height: 100%; width: min(700px, 100%); background: linear-gradient(180deg, var(--wr-bg-2), var(--wr-bg)); border-left: 1px solid var(--wr-line); box-shadow: -30px 0 60px rgba(0,0,0,0.6); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; overflow: hidden; }
.wr-drawer.is-open { transform: none; }
.wr-drawer-head { position: relative; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--wr-line); background: radial-gradient(120% 100% at 100% 0, rgba(255,106,26,0.14), transparent 60%); }
.wr-drawer-close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--wr-line); background: rgba(0,0,0,0.3); color: var(--wr-ink); cursor: pointer; font-size: 1.1rem; }
.wr-drawer-close:hover { background: var(--wr-fire); color: #1a0b04; }
.wr-drawer-body { padding: 1.4rem; overflow-y: auto; flex: 1; }
.wr-drawer-kicker { font-family: var(--wr-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; }
.wr-drawer-title { font-family: "Cinzel", serif; font-size: 1.6rem; margin: 0.3rem 0 0; }
.wr-drawer-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.wr-tag { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--wr-mute); display: inline-flex; align-items: center; gap: 0.3rem; }
.wr-tag.is-won { color: var(--wr-win); background: rgba(255,180,62,0.14); }
.wr-tag.is-surrender { color: var(--wr-loss); background: rgba(255,90,60,0.14); }
.wr-tag.is-regen { color: var(--wr-quit); background: rgba(154,133,120,0.16); }

.wr-member-card { display: flex; align-items: center; gap: 0.7rem; margin: 1rem 0; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(255,194,74,0.08); border: 1px solid rgba(255,194,74,0.22); }
.wr-member-card img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.wr-member-card .m-name { font-weight: 700; }
.wr-member-card .m-role { font-size: 0.76rem; }
.wr-member-card a { margin-left: auto; color: var(--wr-gold); font-size: 0.82rem; }

.wr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0.6rem; margin: 1.2rem 0; }
.wr-tile { padding: 0.7rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-align: center; }
.wr-tile-ico { color: var(--wr-fire); font-size: 1rem; }
.wr-tile b { display: block; font-family: "Cinzel", serif; font-size: 1.2rem; color: var(--wr-flame); font-variant-numeric: tabular-nums; }
.wr-tile span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wr-faint); }

.wr-section-label { font-family: var(--wr-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-mute); margin: 1.4rem 0 0.7rem; display: flex; align-items: center; gap: 0.4rem; }
.wr-descent { position: relative; }
.wr-descent-track { position: relative; height: 46px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,106,26,0.06), rgba(255,59,30,0.06)); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
.wr-descent-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255,106,26,0.22), rgba(255,106,26,0.05)); width: 0; transition: width 1s cubic-bezier(0.16,1,0.3,1); }
.wr-descent-node { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--wr-fire); box-shadow: 0 0 8px var(--wr-fire); opacity: 0.85; }
.wr-descent-node::after { content: attr(data-stage); position: absolute; top: 3px; left: 4px; font-family: var(--wr-mono); font-size: 0.6rem; color: var(--wr-fire); }
.wr-descent-node.is-wall { background: var(--wr-molten); box-shadow: 0 0 10px var(--wr-molten); }
.wr-descent-node.is-wall::after { color: var(--wr-molten); }
.wr-descent-scale { display: flex; justify-content: space-between; font-size: 0.66rem; color: var(--wr-faint); margin-top: 0.35rem; }
.wr-descent-legend { font-size: 0.72rem; color: var(--wr-mute); margin-top: 0.5rem; }
.wr-descent-legend b { color: var(--wr-molten); }

.wr-board { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-size: 0.84rem; }
.wr-board th { text-align: right; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wr-faint); padding: 0.4rem 0.5rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); }
.wr-board th:first-child, .wr-board td:first-child { text-align: left; }
.wr-board td { padding: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: right; font-variant-numeric: tabular-nums; }
.wr-board tr[data-player]:hover td { background: rgba(255,106,26,0.04); cursor: pointer; }
.wr-board .wr-p-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.wr-board .wr-p-rank { color: var(--wr-faint); font-family: "Cinzel", serif; width: 1.4rem; }
.wr-mmrd { font-family: var(--wr-mono); font-weight: 600; }
.wr-mmrd.up { color: var(--wr-win); } .wr-mmrd.down { color: var(--wr-loss); } .wr-mmrd.flat { color: var(--wr-faint); }
.wr-crown { color: var(--wr-gold); }

.wr-spark { width: 100%; height: 90px; margin: 0.6rem 0 1rem; }
.wr-spark path.line { fill: none; stroke: var(--wr-fire); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255,106,26,0.6)); }
.wr-spark path.area { fill: rgba(255,106,26,0.14); stroke: none; }
.wr-spark circle { fill: var(--wr-gold); }

/* ---------- ADMIN CONSOLE (wraith.manage) - GREEN terminal (site admin convention) ---------- */
.wr-admin-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 150; display: none; align-items: center; gap: 0.5rem; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.82rem; padding: 0.6rem 1rem; border-radius: 999px; color: #051b12; background: linear-gradient(90deg, #3cff9b, #4affce); border: none; box-shadow: 0 6px 24px rgba(60,255,155,0.35); }
.wr-admin-toggle.is-shown { display: inline-flex; }
.wr-admin-toggle .wr-gear { display: inline-flex; }
.wr-admin { position: fixed; inset: 0 0 auto 0; z-index: 160; max-height: 90vh; overflow: hidden; background: #04070a; border-bottom: 2px solid #1c8f5c; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); color: #b9ffd8; font-family: var(--wr-mono); }
.wr-admin.is-open { transform: none; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.wr-admin-scene { position: relative; max-height: 90vh; overflow-y: auto; padding: 1.4rem 0 2rem; background-image: radial-gradient(circle at 50% -20%, rgba(60,255,155,0.08), transparent 60%), repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.25) 3px 4px); }
.wr-admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.wr-admin-sys { color: #3cff9b; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; display: flex; align-items: center; gap: 0.5rem; }
.wr-admin-sys::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3cff9b; box-shadow: 0 0 10px #3cff9b; }
.wr-admin-title { font-family: "Cinzel", serif; color: #eaffec; font-size: 1.3rem; margin: 0; }
.wr-admin-close { cursor: pointer; background: transparent; border: 1px solid #1c8f5c; color: #b9ffd8; border-radius: 8px; padding: 0.4rem 0.8rem; font: inherit; }
.wr-admin-close:hover { background: #3cff9b; color: #041b10; }
.wr-admin-boot { list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: 0.8rem; color: #6fe0a6; }
.wr-admin-boot .ok { color: #3cff9b; } .wr-admin-boot .warn { color: #ffb057; }
.wr-admin-stats { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.2rem; }
.wr-admin-stat { padding: 0.55rem 0.9rem; border: 1px solid #125c3c; border-radius: 8px; background: rgba(60,255,155,0.04); }
.wr-admin-stat b { color: #eaffec; font-size: 1.05rem; } .wr-admin-stat span { display: block; font-size: 0.62rem; color: #5fae86; text-transform: uppercase; letter-spacing: 0.1em; }
.wr-admin-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; }
@media (max-width: 820px) { .wr-admin-cols { grid-template-columns: 1fr; } }
.wr-admin-h3 { color: #3cff9b; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.6rem; border-bottom: 1px solid #12402c; padding-bottom: 0.3rem; }
.wr-atable { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.wr-atable th { text-align: left; color: #5fae86; font-weight: 600; padding: 0.3rem 0.4rem; text-transform: uppercase; font-size: 0.62rem; }
.wr-atable td { padding: 0.35rem 0.4rem; border-top: 1px solid rgba(60,255,155,0.08); }
.wr-atable tr.is-hidden { opacity: 0.45; }
.wr-abtn { cursor: pointer; font: inherit; font-size: 0.7rem; border-radius: 6px; padding: 0.2rem 0.5rem; border: 1px solid #1c8f5c; background: transparent; color: #b9ffd8; margin-left: 0.25rem; }
.wr-abtn:hover { background: rgba(60,255,155,0.12); }
.wr-abtn.is-danger { border-color: #b3402a; color: #ff9a7a; }
.wr-abtn.is-danger:hover { background: rgba(179,64,42,0.2); }
.wr-reset-box { border: 1px solid #12402c; border-radius: 10px; padding: 0.9rem; }
.wr-reset-box label { display: block; font-size: 0.72rem; color: #8fdcb4; margin: 0.5rem 0 0.2rem; }
.wr-reset-box select, .wr-reset-box input { width: 100%; background: #071410; border: 1px solid #12402c; color: #eaffec; border-radius: 6px; padding: 0.4rem 0.5rem; font: inherit; }
.wr-reset-go { margin-top: 0.8rem; width: 100%; cursor: pointer; font: inherit; font-weight: 700; border: none; border-radius: 8px; padding: 0.6rem; background: #b3402a; color: #fff; }
.wr-reset-go:hover { background: #d1502f; }
.wr-admin-msg { margin-top: 0.6rem; font-size: 0.76rem; }
.wr-admin-msg.ok { color: #3cff9b; } .wr-admin-msg.bad { color: #ff9a7a; }
.wr-admin-backups { font-size: 0.72rem; color: #5fae86; margin-top: 0.8rem; }
.wr-admin-backups li { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  .wr-hero-art, .wr-title, .wr-heat, .wr-ember-dot, .wr-kicker-flame { animation: none !important; }
  .wr-drawer, .wr-admin, .wr-stage-fill, .wr-rank-meter i, .wr-descent-fill { transition: none !important; }
}