:root{
  --bg:#0c0a08; --panel:#1a130f; --panel2:#231912; --ink:#eadbb4; --muted:#b8a783;
  --gold:#c8a15b; --line:#59442f; --accent:#7f5d92;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(120,74,34,.25), transparent 40%),
    radial-gradient(1200px 700px at 80% 10%, rgba(50,70,110,.18), transparent 38%),
    linear-gradient(180deg, #120d09 0%, #090705 100%);
  font-family:"Cormorant Garamond", serif;
}
#app{max-width:1480px;margin:0 auto;padding:18px}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:64px;height:64px;border-radius:50%;border:1px solid #6a5337;box-shadow:0 0 20px rgba(0,0,0,.4)}
.brand h1{margin:0;font-family:"Uncial Antiqua",serif;font-size:1.36rem;color:#f3e7c7}
.brand p{margin:2px 0 0;color:var(--muted);font-size:1rem}
.controls{display:flex;flex-wrap:wrap;gap:8px}
button{
  background:linear-gradient(180deg, #3a2a1a, #24170f); color:var(--ink); border:1px solid #6d5337;
  border-radius:10px; padding:10px 14px; font-family:"Uncial Antiqua",serif; font-size:.76rem; cursor:pointer;
}
button:hover{filter:brightness(1.08)}
button.primary{border-color:#a5824e;color:#fff1cf}
.layout{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;gap:16px}
.panel{
  background:linear-gradient(180deg, #1c140f, #120d0a);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.panel .head{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-family:"Uncial Antiqua",serif;color:#f5e6c3}
.panel .body{padding:14px}
.statrow{display:grid;grid-template-columns:1fr auto;gap:8px;margin:8px 0;color:var(--muted)}
.bar{height:8px;border-radius:999px;background:#0e0a07;border:1px solid #3f3022;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg, #71522a, #c8a15b)}
.bookWrap{min-height:820px}
.book{
  min-height:820px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg, #37281d 0%, #231811 8%, #1b130f 9%, #1b130f 100%);
  border:1px solid #6a5337;
}
.page{
  min-height:820px; padding:24px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 12%, rgba(255,255,255,.02) 18%, rgba(255,255,255,.01) 82%, rgba(0,0,0,.18)),
    linear-gradient(180deg, #2a1f17 0%, #201712 2%, #1c150f 100%);
}
.page.turning{animation:pageTurn .5s ease}
@keyframes pageTurn{
  0%{transform:rotateY(0deg)} 50%{transform:rotateY(-12deg)} 100%{transform:rotateY(0deg)}
}
.pageGrid{display:grid;grid-template-columns:1.25fr .8fr;gap:18px}
.chapter{color:var(--gold);font-family:"Uncial Antiqua",serif;font-size:.76rem;text-transform:uppercase}
.title{margin:8px 0 6px;font-family:"Uncial Antiqua",serif;color:#f7eccd;font-size:1.5rem;line-height:1.25}
.location{color:var(--muted);font-size:1rem;margin-bottom:10px}
.story{font-size:1.24rem;line-height:1.55;color:#f0dfbc;white-space:pre-wrap}
.story:first-letter{float:left;font-family:"Uncial Antiqua",serif;font-size:3.2rem;line-height:.9;padding-right:8px;color:#ffe3a1}
.choiceList{margin-top:20px;display:grid;gap:12px}
.choice{
  padding:14px 14px;border-radius:14px;border:1px solid #6b5136;
  background:linear-gradient(180deg, #2f2218, #221812);cursor:pointer
}
.choice:hover{filter:brightness(1.05);border-color:#a5824e}
.choiceTitle{font-weight:700;font-size:1.04rem;color:#f5e6c4}
.choiceMeta{color:var(--muted);font-size:.92rem;margin-top:4px}
.rightCol{display:grid;gap:16px}
.artCard{border-radius:18px;overflow:hidden;border:1px solid #5d4630;background:#120d09}
.artCard img{display:block;width:100%;height:260px;object-fit:cover;object-position:center top}
.caption{color:var(--muted);font-size:.94rem;padding:10px 12px}
.token{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:#1a120d;border:1px solid #493726;color:#eadbb4}
.token small{color:var(--muted)}
.inventoryList,.journalList,.perkList,.companionList,.questList{display:grid;gap:8px;max-height:250px;overflow:auto;padding-right:4px}
.map svg{width:100%;display:block}
.regionBtn{cursor:pointer}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.58);padding:20px;z-index:40}
.modal.show{display:grid}
.modalCard{width:min(760px, 96vw);background:linear-gradient(180deg, #241911, #18100c);border:1px solid #6c5132;border-radius:18px;overflow:hidden}
.modalHead{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);font-family:"Uncial Antiqua",serif}
.modalBody{padding:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shopItem{padding:12px;border:1px solid #5f4730;border-radius:12px;background:#19110d}
.combatLog{min-height:140px;background:#120d09;border:1px solid #443223;border-radius:12px;padding:10px;white-space:pre-wrap}
.footerNote{margin-top:8px;color:var(--muted);font-size:.9rem}
@media (max-width:1280px){.layout{grid-template-columns:1fr}.bookWrap{order:-1}}
.story.lorePage{color:#f6e7c5;text-shadow:0 0 8px rgba(255,214,140,.08);font-style:italic;border-left:2px solid #8b6a3e;padding-left:14px}

.inventoryToken{
  align-items:flex-start;
}
.inventoryInfo{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.inventoryActions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.inventoryActionBtn{
  padding:6px 10px;
  font-size:.66rem;
  line-height:1.1;
}
.inventoryUtilityToken{
  margin-top:4px;
}