:root{
    --void:#0b0d11; --panel:#151920; --panel2:#1b212b; --line:#2a3240;
    --gold:#c9a44a; --gold-dim:#8a713a; --parchment:#ddd2b4; --ink:#a9a290;
    --blood:#a83232; --dlc:#5b7e9e; --daring:#7e5b9e; --ok:#6f8f5a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--void);color:var(--parchment);font-family:Georgia,'Times New Roman',serif;line-height:1.5;padding-bottom:80px}
  header{border-bottom:1px solid var(--gold-dim);padding:28px 16px 20px;text-align:center;
    background:radial-gradient(ellipse at top,#1a1f28 0%,var(--void) 70%)}
  .eyebrow{letter-spacing:.35em;font-size:.7rem;color:var(--gold-dim);text-transform:uppercase}
  h1{font-size:1.7rem;letter-spacing:.12em;color:var(--gold);font-weight:normal;margin:6px 0 2px;text-transform:uppercase}
  .sub{font-size:.85rem;color:var(--ink)}
  .globalbar{max-width:900px;margin:16px auto 0;padding:0 4px}
  .barwrap{height:6px;background:var(--panel2);border:1px solid var(--line);position:relative}
  .barfill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));width:0%;transition:width .4s}
  .barlabel{font-size:.75rem;color:var(--ink);margin-top:6px;letter-spacing:.08em}
  nav{display:flex;justify-content:center;gap:0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--void);z-index:10}
  nav button{flex:1;max-width:280px;background:none;border:none;color:var(--ink);font-family:inherit;
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 4px;cursor:pointer;border-bottom:2px solid transparent}
  nav button.active{color:var(--gold);border-bottom-color:var(--gold)}
  .sp{background:#2b2416;color:transparent;cursor:pointer;border-radius:2px;padding:0 4px;
    box-shadow:inset 0 0 0 1px var(--gold-dim);user-select:none;transition:color .15s,background .15s}
  .sp::before{content:none}
  .sp.open{color:var(--parchment);background:rgba(201,164,74,.1);user-select:text}
  .sp:not(.open):hover{box-shadow:inset 0 0 0 1px var(--gold)}
  .sp-hint{font-size:.68rem;color:var(--gold-dim);letter-spacing:.1em;text-transform:uppercase;font-family:Verdana,sans-serif;margin-bottom:14px}
  main{max-width:900px;margin:0 auto;padding:20px 14px}
  .legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;font-size:.72rem;letter-spacing:.05em}
  .tag{display:inline-block;padding:2px 8px;border:1px solid;letter-spacing:.1em;text-transform:uppercase;font-size:.62rem;font-family:Verdana,sans-serif}
  .tag.miss{color:#e08a8a;border-color:var(--blood);background:rgba(168,50,50,.12)}
  .tag.dlc{color:#9fbdd8;border-color:var(--dlc);background:rgba(91,126,158,.12)}
  .tag.daring{color:#b99fd8;border-color:var(--daring);background:rgba(126,91,158,.12)}
  .tag.story{color:var(--ink);border-color:var(--line)}
  .controls{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
  .controls button{background:var(--panel);border:1px solid var(--line);color:var(--parchment);
    font-family:inherit;font-size:.78rem;padding:8px 14px;cursor:pointer;letter-spacing:.05em}
  .controls button.on{border-color:var(--gold);color:var(--gold)}
  section.chapter{margin-bottom:26px;border:1px solid var(--line);background:var(--panel)}
  .chap-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;
    border-bottom:1px solid var(--line);background:var(--panel2);cursor:pointer}
  .chap-head h2{font-size:.95rem;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;font-weight:normal}
  .chap-head .count{font-size:.75rem;color:var(--ink);font-family:Verdana,sans-serif;white-space:nowrap}
  .chap-note{padding:10px 14px;font-size:.8rem;color:var(--ink);border-bottom:1px solid var(--line);font-style:italic}
  .ach{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid #1f2530;align-items:flex-start}
  .ach:last-child{border-bottom:none}
  .ach.done{background:rgba(201,164,74,.05)}
  .ach.done .name{color:var(--gold-dim)}
  .ach.done .desc,.ach.done .tip{opacity:.55}
  .seal{flex:none;width:26px;height:26px;border:1.5px solid var(--gold-dim);border-radius:50%;background:transparent;
    cursor:pointer;position:relative;margin-top:2px}
  .seal:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .ach.done .seal{background:var(--gold);border-color:var(--gold)}
  .ach.done .seal::after{content:"✠";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--void);font-size:15px;font-weight:bold}
  .body{flex:1;min-width:0}
  .name{font-size:.95rem;color:var(--parchment)}
  .name .tag{margin-left:6px;vertical-align:2px}
  .desc{font-size:.8rem;color:var(--ink);margin-top:2px}
  .tip{font-size:.78rem;color:#c4b78f;margin-top:5px;padding-left:10px;border-left:2px solid var(--gold-dim)}
  /* companions */
  .comp{border:1px solid var(--line);background:var(--panel);margin-bottom:18px}
  .comp-head{padding:12px 14px;background:var(--panel2);border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
  .comp-head h3{color:var(--gold);font-weight:normal;letter-spacing:.1em;font-size:1rem}
  .comp-head .role{font-size:.72rem;color:var(--ink);font-family:Verdana,sans-serif;letter-spacing:.05em}
  .comp-body{padding:12px 14px;font-size:.84rem}
  .comp-body p{margin-bottom:8px}
  .k{color:var(--gold-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-family:Verdana,sans-serif}
  .warn{border-left:2px solid var(--blood);padding-left:10px;color:#dba3a3;margin-top:6px;font-size:.8rem}
  .intro-block{border:1px solid var(--line);background:var(--panel);padding:14px;margin-bottom:22px;font-size:.85rem;color:var(--ink)}
  .intro-block strong{color:var(--parchment)}
  h2.section-title{color:var(--gold);font-weight:normal;letter-spacing:.18em;text-transform:uppercase;
    font-size:1rem;margin:26px 0 12px;border-bottom:1px solid var(--gold-dim);padding-bottom:6px}
  .savestate{position:fixed;bottom:12px;right:12px;font-size:.68rem;color:var(--ink);background:var(--panel);
    border:1px solid var(--line);padding:4px 10px;opacity:0;transition:opacity .3s;font-family:Verdana,sans-serif}
  .savestate.show{opacity:1}
  @media (prefers-reduced-motion: reduce){*{transition:none!important}}