:root{
  --bg:#0f0d0a; --bg2:#171310; --panel:#1b1611; --panel2:#241d16;
  --ink:#e9dcbd; --muted:#b8a97e; --line:#3a2f22;
  --gold:#c9a34e; --gold2:#e8c874; --ember:#d9663c; --arcane:#b980ff;
  --holy:#e8d48a; --nature:#5d9a6c; --blood:#cd6762; --frost:#5aa9e6;
  --good:#5d9a6c; --bad:#cd6762; --neutral:#b8a97e;
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:radial-gradient(1200px 600px at 70% -10%, #241d16 0%, var(--bg) 60%);
  color:var(--ink); font:16px/1.65 Georgia,'Times New Roman',serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:'Palatino Linotype',Georgia,serif; line-height:1.2; color:var(--gold2); font-weight:600; letter-spacing:.3px}
h1{font-size:2.6rem; margin:.2em 0 .3em}
h2{font-size:2.2rem; margin:.2em 0 .3em}
h3{font-size:1.7rem; margin:1.6em 0 .5em; border-bottom:1px solid var(--line); padding-bottom:.25em}
h4{font-size:1.28rem; margin:1.4em 0 .4em; color:var(--gold)}
h5{font-size:1.05rem; margin:1.1em 0 .3em; color:var(--gold2)}
p{margin:.6em 0}
a{color:var(--gold2); text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-size:.9em; background:#0d0a08; border:1px solid var(--line); padding:.05em .4em; border-radius:5px; color:var(--frost)}
hr{border:none; border-top:1px solid var(--line); margin:1.6em 0}

/* Layout */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:280px; flex:0 0 280px; background:linear-gradient(180deg,#171310,#0d0a08);
  border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; padding:0 0 40px;
}
.brand{padding:22px 22px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:linear-gradient(180deg,#1b1611,#14100b); z-index:5}
.brand .logo{font-family:'Palatino Linotype',Georgia,serif; font-size:1.15rem; color:var(--gold2); letter-spacing:1px; display:flex; align-items:center; gap:9px}
.brand .logo .crest{width:26px;height:26px;flex:0 0 26px;border-radius:6px;background:
  conic-gradient(from 45deg,var(--gold),var(--ember),var(--gold));display:grid;place-items:center;color:#1a1206;font-weight:800;font-size:.85rem}
.brand .tag{color:var(--muted); font-size:.78rem; margin-top:4px; font-family:Georgia,serif; letter-spacing:.3px}
.brand a.home{text-decoration:none; color:inherit; display:block}
.brand a.home:hover .logo{color:var(--gold)}
.brand .play{
  display:block; margin-top:12px; text-align:center; text-decoration:none;
  font-family:'Palatino Linotype',Georgia,serif; font-size:.86rem; letter-spacing:.08em;
  text-transform:uppercase; color:#1a1206; padding:8px 12px; border-radius:7px;
  background:linear-gradient(180deg,var(--gold2),var(--gold)); border:1px solid #7a5c00;
}
.brand .play:hover{filter:brightness(1.08); text-decoration:none}
.brand .play:focus-visible{outline:2px solid var(--gold2); outline-offset:2px}
.search{margin:12px 16px 4px}
.search input{width:100%; padding:9px 12px; background:#0d0a08; border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:.9rem}
.search input:focus{outline:none; border-color:var(--gold)}
nav{padding:8px 10px}
nav .grp{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; margin:16px 12px 6px; font-family:'Palatino Linotype',Georgia,serif}
nav a{display:block; padding:7px 12px; color:var(--ink); border-radius:7px; font-size:.94rem; font-family:Georgia,serif}
nav a:hover{background:var(--panel); text-decoration:none}
nav a.active{background:linear-gradient(90deg,rgba(224,179,82,.18),rgba(224,179,82,.03)); color:var(--gold2); box-shadow:inset 3px 0 0 var(--gold)}

.content{flex:1 1 auto; min-width:0}
.wrap{max-width:920px; margin:0 auto; padding:38px 46px 120px}
.page{display:none; animation:fade .35s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Components */
.hero{background:linear-gradient(135deg,#241d16,#14100b); border:1px solid var(--line); border-radius:14px; padding:34px 34px 28px; margin-bottom:10px; position:relative; overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 90% 0,rgba(224,179,82,.14),transparent 70%);pointer-events:none}
.hero .kicker{color:var(--ember); text-transform:uppercase; letter-spacing:3px; font-size:.75rem; font-family:'Palatino Linotype',Georgia,serif}
.lead{font-size:1.12rem; color:#d9cca8}
.crumb{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:2px; font-family:'Palatino Linotype',Georgia,serif; margin-bottom:2px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin:14px 0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}

.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; transition:.15s}
.tile:hover{border-color:var(--gold); transform:translateY(-2px)}
.tile h5{margin-top:0}
.tile .sub{color:var(--muted); font-size:.82rem}

.callout{border-left:4px solid var(--gold); background:rgba(224,179,82,.07); padding:12px 16px; border-radius:0 8px 8px 0; margin:14px 0}
.callout.tip{border-color:var(--nature); background:rgba(111,191,122,.08)}
.callout.warn{border-color:var(--ember); background:rgba(217,102,60,.09)}
.callout .h{font-family:'Palatino Linotype',Georgia,serif; font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:3px}
.callout.tip .h{color:var(--nature)} .callout.warn .h{color:var(--ember)}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.92rem}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
th{color:var(--gold); font-family:'Palatino Linotype',Georgia,serif; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; background:#14100b}
tr:hover td{background:rgba(255,255,255,.02)}
td.num,th.num{text-align:center; font-variant-numeric:tabular-nums}

.tag-pill{display:inline-block; font-size:.72rem; padding:2px 9px; border-radius:20px; border:1px solid var(--line); background:#14100b; color:var(--muted); margin:2px 3px 2px 0; font-family:'Palatino Linotype',Georgia,serif; letter-spacing:.5px}
.pill-str{color:#cd6762;border-color:#cd6762} .pill-tank{color:var(--gold);border-color:var(--gold)}
.pill-melee{color:var(--ember)} .pill-ranged{color:var(--nature)} .pill-magic{color:var(--arcane)}
.pill-heal{color:var(--holy)} .pill-support{color:var(--frost)}
.abil-wrap{overflow-x:auto;margin:10px 0 4px}
.abil{font-size:.88rem;margin:0}
.abil th,.abil td{padding:7px 10px;vertical-align:top}
.abil .abil-name{font-family:'Palatino Linotype',Georgia,serif;color:var(--ink);white-space:nowrap}
.abil .abil-name em{font-style:normal;color:var(--gold2)}
.abil .abil-eff{color:var(--muted);min-width:210px}
.abil .scal{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.cap-tag{display:inline-block;font-family:'Palatino Linotype',Georgia,serif;font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;color:var(--gold2);border:1px solid var(--gold);border-radius:10px;padding:0 6px;margin-left:5px;vertical-align:middle}
.et{font-family:'Palatino Linotype',Georgia,serif;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.et-damage{color:var(--ember)} .et-dot{color:var(--blood)} .et-heal{color:var(--nature)}
.et-shield{color:var(--frost)} .et-buff{color:var(--gold2)} .et-debuff{color:var(--arcane)} .et-control{color:var(--arcane)} .et-aura{color:var(--holy)}

/* stat meters */
.meter{display:flex;align-items:center;gap:10px;margin:4px 0}
.meter .lbl{width:42px;font-family:'Palatino Linotype',Georgia,serif;font-size:.72rem;color:var(--muted);letter-spacing:1px}
.meter .bar{flex:1;height:9px;background:#0d0a08;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.meter .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ember),var(--gold))}
.meter .val{width:34px;text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink)}
.mod-pos{color:var(--good);font-weight:700} .mod-neg{color:var(--bad);font-weight:700} .mod-zero{color:var(--muted)}

.stat-badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.sb{background:#14100b;border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:.8rem;min-width:64px;text-align:center}
.sb b{display:block;font-family:'Palatino Linotype',Georgia,serif;font-size:.68rem;color:var(--muted);letter-spacing:1px}

.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
@media(max-width:860px){.roster{grid-template-columns:1fr}}
.rc{background:linear-gradient(160deg,#241d16,#1b1611);border:1px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.15s}
.rc:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.rc .nm{font-family:'Palatino Linotype',Georgia,serif;color:var(--gold2);font-size:1.02rem}
.rc .tt{color:var(--muted);font-size:.78rem;font-style:italic;margin-bottom:7px}

.rarity{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.r-com{background:#b9b19c} .r-unc{background:var(--nature)} .r-rare{background:var(--frost)}
.r-epic{background:var(--arcane)} .r-leg{background:var(--gold)} .r-myth{background:var(--blood)}

.toc-mini{columns:2;column-gap:26px;margin:10px 0}
@media(max-width:700px){.toc-mini{columns:1}}
.toc-mini a{display:block;padding:3px 0}

.kbd{font-family:'Palatino Linotype',Georgia,serif;color:var(--ember);font-size:.8rem;letter-spacing:1px}
.footer{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;color:var(--muted);font-size:.85rem}
.footer .foot-links{margin-top:10px}
.footer .foot-copy{margin-top:6px;opacity:.85}
.backtop{margin-top:26px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.step{display:flex;gap:14px;margin:14px 0}
.step .no{flex:0 0 34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--ember));color:#1a1206;font-family:'Palatino Linotype',Georgia,serif;font-weight:800;display:grid;place-items:center}
.step .bd{flex:1}
.menu-toggle{display:none}
@media(max-width:820px){
  .sidebar{position:fixed;z-index:50;transform:translateX(-100%);transition:.25s;box-shadow:6px 0 30px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .menu-toggle{display:inline-flex;position:fixed;top:14px;left:14px;z-index:60;background:var(--panel);border:1px solid var(--line);color:var(--gold2);border-radius:8px;padding:9px 13px;font-family:'Palatino Linotype',Georgia,serif;cursor:pointer}
  .wrap{padding:64px 20px 90px}
}

figure.shot{margin:1.5em 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel2)}
figure.shot img{display:block; width:100%; height:auto}
figure.shot figcaption{padding:.65em .95em; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); font-family:Georgia,serif}

/* ---- per-chapter pages -------------------------------------------------
   Chapter pages carry the chapter name as <h1>, so the whole scale moves up
   one step relative to the single-page guide. Declared here rather than in a
   second file so all pages share one cached stylesheet. */
body.chapter h1{font-size:2.2rem; margin:.2em 0 .45em}
body.chapter h2{font-size:1.7rem; margin:1.6em 0 .5em; border-bottom:1px solid var(--line); padding-bottom:.25em}
body.chapter h3{font-size:1.28rem; margin:1.4em 0 .4em; color:var(--gold)}
body.chapter h4{font-size:1.05rem; margin:1.1em 0 .3em; color:var(--gold2)}
body.chapter h5{font-size:.98rem; margin:1em 0 .3em; color:var(--gold2)}

.chapnav{display:flex; justify-content:space-between; gap:14px; margin:2.6em 0 0; flex-wrap:wrap}
.chapnav a{
  flex:1 1 240px; text-decoration:none; border:1px solid var(--line); border-radius:var(--r);
  padding:12px 16px; background:var(--panel); color:var(--ink); transition:border-color .15s ease;
}
.chapnav a:hover{border-color:var(--gold); text-decoration:none}
.chapnav .lbl{display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.chapnav .ttl{font-family:'Palatino Linotype',Georgia,serif; color:var(--gold2); font-size:1.02rem}
.chapnav a.next{text-align:right}

.chapindex{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:1.4em 0}
.chapindex a{
  text-decoration:none; border:1px solid var(--line); border-radius:var(--r);
  padding:13px 16px; background:var(--panel); display:block; transition:border-color .15s ease;
}
.chapindex a:hover{border-color:var(--gold); text-decoration:none}
.chapindex .n{font-family:'Palatino Linotype',Georgia,serif; color:var(--gold2); font-size:1.04rem; display:block; margin-bottom:3px}
.chapindex .d{color:var(--muted); font-size:.84rem; line-height:1.45}