/* Cataclysm 2.1 — realm page.
   Molten palette to set it apart from Legion's fel green next door.
   No inline style anywhere: the site runs a strict CSP. */

:root{
  --bg:#0b0708;
  --bg-2:#140d0d;
  --panel:rgba(28,17,16,.72);
  --line:rgba(224,120,60,.16);
  --line-2:rgba(224,120,60,.30);
  --text:#efe3dc;
  --muted:#b39a90;
  --dim:#7d675f;
  --fire:#e2652a;
  --fire-2:#ff9748;
  --gold:#e0b352;
  --ok:#4bb96f;
  --bad:#c8433c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- background: a slow molten glow, and drifting embers ---------------- */
.sky,.embers{position:fixed;inset:0;pointer-events:none;z-index:-2}
/* A fixed full-page backdrop has to be dimmed almost to black by mid-screen
   or the body text below becomes unreadable, which buries the artwork it is
   there to show. Bounding it to a band at the top instead lets the art run at
   full strength where it belongs and hands the rest of the page to the solid
   background. The band also means a 1600x800 painting is no longer stretched
   over the whole document. */
/* Fixed, the same as the Legion page and the main site: the artwork holds
   its place while the page scrolls over it. Bounding it to a band meant it
   scrolled away with the hero, so it read as part of the header rather than
   as the page's backdrop. */
.skyvid{position:fixed;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  pointer-events:none;opacity:.78}
@media (prefers-reduced-motion:reduce){.skyvid{opacity:.9}}
.sky{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(226,101,42,.16), transparent 60%),
    radial-gradient(900px 500px at 12% 8%, rgba(150,40,20,.14), transparent 62%),
    linear-gradient(180deg,
      rgba(11,7,8,.30) 0%,
      rgba(11,7,8,.40) 34%,
      rgba(11,7,8,.80) 66%,
      var(--bg) 100%);
}
/* Sparks, not blobs. The template's ember artwork was painted for a fixed
   1690px canvas; stretched over a viewport with background-size:cover its
   orbs become huge smears that bury the art behind them. CSS-drawn sparks
   stay the same size at every width, which is the whole point. */
.embers{
  background-image:
    radial-gradient(2px 2px at 12% 82%, rgba(255,151,72,.55), transparent 60%),
    radial-gradient(2px 2px at 34% 66%, rgba(255,151,72,.40), transparent 60%),
    radial-gradient(1px 1px at 58% 88%, rgba(226,101,42,.55), transparent 60%),
    radial-gradient(2px 2px at 72% 58%, rgba(255,183,110,.35), transparent 60%),
    radial-gradient(1px 1px at 88% 76%, rgba(255,151,72,.45), transparent 60%);
  animation:drift 22s linear infinite;
}
@keyframes drift{
  from{transform:translateY(0) }
  to  {transform:translateY(-90px)}
}
@media (prefers-reduced-motion:reduce){ .embers{animation:none} }

/* ---- nav ---------------------------------------------------------------- */
nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;
  padding:12px 22px;flex-wrap:wrap;
  background:rgba(11,7,8,.82);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
nav .brand{
  font-family:Cinzel,Georgia,serif;font-weight:700;font-size:17px;
  color:var(--text);text-decoration:none;margin-right:18px;letter-spacing:.3px;
}
nav .brand b{color:var(--fire)}
nav .l{
  color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:9px;
  font-size:14px;
}
nav .l:hover{color:var(--text);background:rgba(226,101,42,.10)}
nav .back{
  margin-left:auto;color:var(--dim);text-decoration:none;font-size:13px;
  padding:7px 12px;border:1px solid var(--line);border-radius:9px;
}
nav .back:hover{color:var(--text);border-color:var(--line-2)}

/* ---- layout ------------------------------------------------------------- */
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 22px 80px}
section{padding:56px 0 8px;scroll-margin-top:74px}
h2{
  font-family:Cinzel,Georgia,serif;font-size:26px;margin:0 0 6px;
  letter-spacing:.4px;
}
h3{font-family:Cinzel,Georgia,serif;font-size:16px;margin:0 0 8px}
.lede{color:var(--muted);max-width:70ch;margin:0 0 22px}
.fine{color:var(--dim);font-size:12.5px;line-height:1.5}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;color:var(--fire-2);
}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;padding:64px 0 18px;text-align:center}
.eyebrow{
  display:inline-block;color:var(--fire-2);letter-spacing:2.4px;text-transform:uppercase;
  font-size:11.5px;border:1px solid var(--line-2);border-radius:999px;padding:5px 14px;
}
.title{
  font-family:Cinzel,Georgia,serif;font-weight:900;letter-spacing:2px;
  font-size:clamp(40px,8vw,78px);line-height:1;margin:18px 0 10px;
  background:linear-gradient(180deg,#ffe0b8,#ef7433 60%,#d4501d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* text-shadow barely shows on clipped text: it paints behind a fill that
     already covers the glyph. drop-shadow follows the glyph outline. */
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.92)) drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
.title small{
  display:block;font-size:clamp(13px,2vw,17px);letter-spacing:7px;
  color:var(--muted);background:none;-webkit-text-fill-color:var(--muted);
  margin-bottom:6px;font-weight:600;
}
.hero .sub{color:var(--muted);max-width:62ch;margin:0 auto 22px}
.hero .sub b{color:var(--text)}

/* ---- live status -------------------------------------------------------- */
.status{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:9px 18px;font-size:13.5px;
}
.status .k{color:var(--dim)}
.status b{color:var(--text)}
.status .sep{width:1px;height:15px;background:var(--line-2)}
.pill{display:inline-flex;align-items:center;gap:8px}
.led{
  width:9px;height:9px;border-radius:50%;background:var(--dim);
  box-shadow:0 0 0 0 rgba(75,185,111,.6);
}
.led.up{background:var(--ok);animation:pulse 2.4s ease-out infinite}
.led.down{background:var(--bad)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(75,185,111,.55)}
  70%{box-shadow:0 0 0 9px rgba(75,185,111,0)}
  100%{box-shadow:0 0 0 0 rgba(75,185,111,0)}
}
@media (prefers-reduced-motion:reduce){ .led.up{animation:none} }

/* ---- buttons ------------------------------------------------------------ */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 34px}
.btn{
  display:inline-block;text-decoration:none;border-radius:11px;padding:12px 22px;
  font-weight:650;font-size:14.5px;border:1px solid transparent;transition:transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn.fire{
  background:linear-gradient(180deg,var(--fire-2),var(--fire));color:#2a0f04;
  box-shadow:0 6px 22px rgba(226,101,42,.30);
}
.btn.ghost{border-color:var(--line-2);color:var(--text);background:rgba(226,101,42,.06)}
.btn.ghost:hover{background:rgba(226,101,42,.12)}
.btn.small{padding:9px 16px;font-size:13.5px}

/* ---- panels and grids --------------------------------------------------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
}
.panel.wide{max-width:none}
.stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.stat{min-width:132px;text-align:center;padding:14px 18px}
.stat b{
  display:block;font-family:Cinzel,Georgia,serif;font-size:24px;color:var(--fire-2);
  line-height:1.2;
}
.stat span{color:var(--dim);font-size:12.5px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

.step{position:relative;padding-top:26px}
.step .num{
  position:absolute;top:-13px;left:20px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:14px;
  background:linear-gradient(180deg,var(--fire-2),var(--fire));color:#2a0f04;
}
.feat p{color:var(--muted);margin:0}
.cmd{
  background:#080505;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--fire-2);overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  margin:10px 0;
}

/* ---- mythic cards ------------------------------------------------------- */
.dun{padding:16px;display:flex;flex-direction:column;gap:6px}
.dun .abbr{
  font-family:Cinzel,Georgia,serif;font-size:20px;color:var(--fire-2);line-height:1;
}
.dun .nm{font-size:13.5px;color:var(--text);line-height:1.35}
.dun .meta{color:var(--dim);font-size:12px;margin-top:2px}
.tag{
  display:inline-block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  border-radius:999px;padding:2px 8px;border:1px solid var(--line-2);color:var(--muted);
  align-self:flex-start;
}
.tag.custom{color:var(--gold);border-color:rgba(224,179,82,.42);background:rgba(224,179,82,.10)}
.tag.raid{color:var(--fire-2);border-color:rgba(226,101,42,.45);background:rgba(226,101,42,.12)}
.empty{color:var(--dim);text-align:center;padding:26px}

/* ---- tables ------------------------------------------------------------- */
table.kv{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:10px}
table.kv td{padding:7px 0;border-bottom:1px solid var(--line)}
table.kv tr:last-child td{border-bottom:none}
table.kv td:first-child{color:var(--muted)}
table.kv td:last-child{text-align:right;color:var(--text);font-weight:600}

/* ---- footer ------------------------------------------------------------- */
footer{
  margin-top:64px;padding-top:26px;border-top:1px solid var(--line);
  color:var(--dim);font-size:13px;text-align:center;
}
footer p{margin:0 0 6px}

@media (max-width:640px){
  nav{padding:10px 14px}
  nav .l{padding:6px 9px;font-size:13.5px}
  .wrap{padding:0 14px 60px}
  .hero{padding:40px 0 12px}
}

/* ====================== live player map + heroes ======================
   Same structure as the Legion page, repainted in the molten palette. */

.mapbox{padding:14px}

.ctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.ctabs button{
  background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--muted);
  padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;
}
.ctabs button:hover{border-color:var(--line-2);color:var(--text)}
.ctabs button.on{
  color:#1b0b05;background:linear-gradient(180deg,var(--fire-2),var(--fire));
  border-color:transparent;
}
.ctabs button i{font-style:normal;opacity:.75;margin-left:4px}

.mapwrap{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse at center,#1a0c07 0%,#070303 75%);
}
canvas#map{display:block;width:100%;height:auto;cursor:crosshair}

.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.l-a{background:#4aa8ff;box-shadow:0 0 8px #4aa8ff}
.l-h{background:#ff5a4f;box-shadow:0 0 8px #ff5a4f}
.l-n{background:#ffc45c;box-shadow:0 0 8px #ffc45c}
.l-r{background:#a68a7c;opacity:.55}

.tip{
  position:absolute;pointer-events:none;display:none;z-index:3;min-width:150px;
  background:rgba(12,6,4,.95);border:1px solid var(--fire);border-radius:10px;
  padding:8px 10px;font-size:13px;box-shadow:0 0 18px rgba(226,101,42,.3);
}
.tip b{font-size:14px}
.t-lv{color:var(--gold)}
.t-dim{color:var(--muted)}

.inst{margin-top:10px;color:var(--muted);font-size:13px}
.inst b{color:var(--text)}

.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pc{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);
}
.por{position:relative;width:46px;height:46px;flex:none}
.por img.r{width:46px;height:46px;border-radius:10px;border:2px solid #3a2620}
.por img.c{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:50%;border:2px solid #0b0708}
.por .lv{
  position:absolute;left:-6px;top:-6px;background:#0b0708;border:1px solid var(--gold);
  color:var(--gold);font-size:11px;font-weight:800;border-radius:999px;padding:0 5px;line-height:17px;
}
.fa-a .r{border-color:rgba(74,168,255,.7)}
.fa-h .r{border-color:rgba(255,90,79,.7)}
.pc .nm{font-weight:700}
.pc .meta{color:var(--muted);font-size:12.5px;line-height:1.35}

.sub2{font:700 17px var(--serif,Georgia,serif);margin:26px 0 12px;color:var(--gold)}

@media (max-width:640px){
  .mapbox{padding:10px}
  .plist{grid-template-columns:1fr}
}

/* Contrast for the hero text comes from the text, not from washing out the
   painting behind it. */
.hero .eyebrow,.hero .title,.hero .sub{text-shadow:0 2px 14px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6)}
.hero .status .pill{background:rgba(11,7,8,.62);backdrop-filter:blur(6px)}

/* The painting is brightest exactly where the title sits, and the title is
   filled with a dark orange gradient, so dimming the whole picture could not
   buy contrast without flattening the art. Darken locally behind the hero
   text instead, and leave the rest of the backdrop alone. */
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);top:24px;
  width:min(980px,104%);height:78%;
  background:radial-gradient(ellipse 46% 44% at 50% 40%,
    rgba(11,7,8,.88) 0%,rgba(11,7,8,.74) 40%,rgba(11,7,8,.34) 72%,
    rgba(11,7,8,0) 100%)}