/* Ragol's Wrath website pages (everything except the Codex). Dark crimson, one theme. */
:root{
  --bg:#0a080c; --surface:#140f16; --surface-2:#1c141d; --sunken:#0f0b10;
  --ink:#ffd2c8; --ink-2:#efc0b5; --muted:#b8958e; --line:#3b2328; --line-soft:#26171b;
  --accent:#e60014; --link:#ff5566; --good:#5fd39a; --warn:#f0b35c;
  --display:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%}
a{color:var(--link)}
a:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:3px}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.2; text-wrap:balance; margin:0 0 .5em}
h1{font-size:clamp(26px,5vw,36px); letter-spacing:.02em}
h2{font-size:22px; margin-top:1.6em}
h3{font-size:17px; margin-top:1.3em}
p,ul,ol{margin:0 0 1em}
code,.mono{font-family:var(--mono); font-size:.92em; font-variant-ligatures:none}
code{background:var(--sunken); border:1px solid var(--line-soft); border-radius:5px; padding:1px 5px}
img{max-width:100%; height:auto}
hr{border:0; border-top:1px solid var(--line); margin:28px 0}

.wrap{max-width:1040px; margin:0 auto; padding:24px 16px 40px}
.lede{color:var(--ink-2); font-size:17px; max-width:68ch}
.muted{color:var(--muted)}
.prose > :not(.tablewrap){max-width:72ch}   /* text stays readable; tables may use the full width */
.prose li{margin-bottom:.35em}
.prose table{margin-bottom:1em}

/* hero */
.hero{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 28px; align-items:center; padding:12px 0 8px}
.hero img{width:140px; height:140px; filter:drop-shadow(0 0 22px rgba(230,0,20,.45))}
.hero h1{font-size:clamp(30px,7vw,52px); margin:0}
.hero h1 b{color:var(--accent)}
.hero p{margin:.4em 0 0}
@media (max-width:640px){ .hero{grid-template-columns:minmax(0,1fr); text-align:center} .hero img{margin:0 auto; width:110px; height:110px} .hero .btnrow{justify-content:center} }
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{display:inline-block; text-decoration:none; font-family:var(--display); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:14px; padding:10px 18px; border-radius:9px; border:1px solid var(--accent); color:#fff; background:var(--accent)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn:hover{filter:brightness(1.12)}

/* cards + grids */
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0}
.card h2,.card h3{margin-top:0}
.card > :last-child{margin-bottom:0}
.kicker{font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 4px}
.pill{display:inline-block; border-radius:999px; padding:1px 9px; font-size:12px; font-weight:600; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.pill.live{background:var(--accent); border-color:var(--accent); color:#fff}
.stat{font-family:var(--display); font-size:28px; font-weight:700; color:var(--ink)}
.notice{border:1px solid var(--line); border-left:4px solid var(--accent); background:var(--surface); border-radius:10px; padding:12px 14px; margin:0 0 1em}

/* events */
.event{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:16px; align-items:start}
.event img{border-radius:10px; border:1px solid var(--line); display:block; width:100%}
@media (max-width:700px){ .event{grid-template-columns:minmax(0,1fr)} }

/* tables */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin:0 0 1em; max-width:100%}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{font-family:var(--display); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono); text-align:right; white-space:nowrap}
.tablewrap table{min-width:540px}            /* narrower screens scroll the table inside its frame, never the page */
td a{overflow-wrap:break-word}

/* collapsible groups (drops, quests) */
details.group{background:var(--surface); border:1px solid var(--line); border-radius:10px; margin:0 0 8px}
details.group > summary{cursor:pointer; padding:10px 14px; font-weight:600; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
details.group > summary .muted{font-weight:400; font-size:13.5px}
details.group[open] > summary{border-bottom:1px solid var(--line-soft)}
details.group > .inner{padding:12px 14px}
details.group > .inner > .tablewrap:last-child, details.group > .inner > :last-child{margin-bottom:0}
.toc{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 1.2em; padding:0; list-style:none}
.toc a{display:inline-block; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13.5px}
.toc a:hover{border-color:var(--accent)}

/* quests */
.quest{margin:0 0 10px}
.quest .desc{white-space:pre-line; color:var(--ink-2); margin:0 0 .6em; font-size:14.5px}
.quest h3{font-size:15px; margin:.8em 0 .3em}

/* updates */
.update{border-bottom:1px solid var(--line); padding:0 0 18px; margin:0 0 22px}
.update:last-child{border-bottom:0}
.update time{color:var(--muted); font-family:var(--mono); font-size:13px}