:root {
  --bg: #0a0710;
  --ink: #efe6d8;
  --muted: #a99fb5;
  --line: rgba(255, 196, 120, 0.18);
  --card: rgba(22, 14, 30, 0.62);
  --ember: #ff8a2a;
  --gold: #ffc56b;
  --shroud: #7b3fb5;
  --shroud-deep: #2a1140;
  --ok: #ffb347;
  --off: #8a7f99;
  --accent: var(--gold);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: radial-gradient(120% 80% at 50% 110%, #3a1530 0%, transparent 60%),
              radial-gradient(90% 70% at 50% -10%, var(--shroud-deep) 0%, transparent 70%),
              var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Atmosphere ─────────────────────────────────────────── */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.fog {
  position: absolute; width: 140vmax; height: 140vmax; border-radius: 50%;
  filter: blur(60px); opacity: .45; mix-blend-mode: screen;
}
.fog-a { left: -60vmax; top: 10vh; background: radial-gradient(closest-side, rgba(123, 63, 181, .55), transparent); animation: drift 38s ease-in-out infinite alternate; }
.fog-b { right: -70vmax; top: 30vh; background: radial-gradient(closest-side, rgba(170, 40, 90, .35), transparent); animation: drift 52s ease-in-out infinite alternate-reverse; }
.fog-c { left: -20vmax; bottom: -100vmax; background: radial-gradient(closest-side, rgba(90, 30, 140, .5), transparent); animation: drift 44s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vmax, -6vmax, 0) scale(1.15); }
}
body[data-state="online"] .fog { opacity: .3; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
  padding: clamp(40px, 9vh, 96px) 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.kicker {
  margin: 0; font: 600 12px/1 Inter, sans-serif; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); opacity: .85;
}
.kicker span { color: var(--ember); margin: 0 .4em; }
.title {
  margin: 0; text-align: center;
  font: 900 clamp(36px, 8vw, 72px)/1.05 Cinzel, Georgia, serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff2d6 0%, var(--gold) 45%, #c4612a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 138, 42, .25));
  overflow-wrap: anywhere;
}
.subtitle { margin: -6px 0 8px; color: var(--muted); letter-spacing: .2em; font-size: 13px; text-transform: uppercase; }

.card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 36px);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 230, 190, .06);
}

/* ── The altar (status emblem) ──────────────────────────── */
.altar { position: relative; width: 120px; height: 150px; margin: 0 auto 8px; }
.glow {
  position: absolute; left: 50%; top: 55%; width: 220px; height: 220px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 138, 42, .45), transparent);
  opacity: 0; transition: opacity .8s ease;
}
.brazier {
  position: absolute; left: 50%; bottom: 0; width: 84px; height: 26px; transform: translateX(-50%);
  border-radius: 6px 6px 40px 40px;
  background: linear-gradient(180deg, #4a3a52, #1d1424);
  border-top: 2px solid #6d5a78;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
}
.flame {
  position: absolute; left: 50%; bottom: 22px; width: 60px; height: 100px; transform: translateX(-50%);
  transform-origin: 50% 100%; transition: transform .8s ease, opacity .8s ease, filter .8s ease;
  filter: saturate(0) brightness(.45); opacity: .35;
}
.f {
  position: absolute; left: 50%; bottom: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
}
.f1 { width: 60px; height: 96px; margin-left: -30px; background: radial-gradient(60% 60% at 50% 70%, #ff6a00, #ff3d00 60%, transparent 70%); animation: flick 1.6s ease-in-out infinite; }
.f2 { width: 40px; height: 70px; margin-left: -20px; background: radial-gradient(60% 60% at 50% 70%, #ffc56b, #ff8a2a 70%, transparent 72%); animation: flick 1.2s ease-in-out infinite reverse; }
.f3 { width: 20px; height: 38px; margin-left: -10px; background: radial-gradient(60% 60% at 50% 70%, #fffbe8, #ffe2a0 70%, transparent 74%); animation: flick .9s ease-in-out infinite; }
@keyframes flick {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(.96, 1.06) skewX(-2deg); }
  50% { transform: scale(1.04, .95) skewX(2deg); }
  75% { transform: scale(.98, 1.04) skewX(-1deg); }
}
.smoke { position: absolute; left: 50%; bottom: 30px; width: 0; height: 0; opacity: 1; transition: opacity .8s ease; }
.smoke span {
  position: absolute; left: -10px; bottom: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(170, 160, 190, .35); filter: blur(6px);
  animation: smoke 4s ease-out infinite;
}
.smoke span:nth-child(2) { animation-delay: 1.3s; }
.smoke span:nth-child(3) { animation-delay: 2.6s; }
@keyframes smoke {
  from { transform: translate(0, 0) scale(.6); opacity: 0; }
  20%  { opacity: .8; }
  to   { transform: translate(14px, -110px) scale(2.4); opacity: 0; }
}

body[data-state="online"] .glow { opacity: 1; animation: pulse 3s ease-in-out infinite; }
body[data-state="online"] .flame { filter: drop-shadow(0 0 14px rgba(255, 140, 40, .9)) drop-shadow(0 0 40px rgba(255, 90, 20, .5)); opacity: 1; transform: translateX(-50%) scale(1.15); }
body[data-state="online"] .smoke { opacity: 0; }
body[data-state="checking"] .flame { opacity: .55; filter: saturate(.4) brightness(.7); }
@keyframes pulse { 50% { opacity: .65; } }

/* ── Status text ────────────────────────────────────────── */
.status { text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font: 600 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--off);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body[data-state="online"] .pill { color: var(--ok); }
body[data-state="online"] .dot { box-shadow: 0 0 0 0 rgba(255, 179, 71, .7); animation: ping 1.8s ease-out infinite; }
body[data-state="checking"] .dot { animation: blink 1s ease-in-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 10px rgba(255, 179, 71, 0); } }
@keyframes blink { 50% { opacity: .2; } }

.headline { margin: 14px 0 4px; font: 700 clamp(22px, 4.5vw, 32px)/1.2 Cinzel, Georgia, serif; letter-spacing: .06em; }
.tagline { margin: 0; color: var(--muted); }

/* ── Stats ──────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line);
}
.stat { min-width: 0; text-align: center; }
.stat dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stat dd { margin: 6px 0 0; font: 600 20px/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd small { color: var(--muted); font-weight: 500; }
.bar { display: block; height: 4px; margin: 10px auto 0; max-width: 120px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .8s ease; }

/* ── Join ───────────────────────────────────────────────── */
.join h3 { margin: 0 0 14px; font: 700 18px/1.2 Cinzel, Georgia, serif; letter-spacing: .1em; color: var(--gold); text-align: center; }
.address {
  display: flex; align-items: stretch; gap: 0; max-width: 420px; margin: 0 auto 18px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .3);
}
.address code { flex: 1; min-width: 0; padding: 12px 14px; font: 500 15px/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.copy {
  border: 0; padding: 0 18px; cursor: pointer;
  font: 600 13px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #1a0f05; background: linear-gradient(180deg, var(--gold), var(--ember));
  transition: filter .2s ease;
}
.copy:hover { filter: brightness(1.1); }
.copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.steps { margin: 0; padding-left: 1.3em; color: var(--muted); }
.steps li { margin: 6px 0; }
.steps strong { color: var(--ink); font-weight: 600; }
.steps em { font-style: normal; font-size: 13px; opacity: .8; }

footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-size: 12px; color: var(--muted); opacity: .7; text-align: center;
}

@media (max-width: 560px) {
  .kicker { font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
  .kicker span { margin: 0 .25em; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}

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