:root { --bg: #17120d; --panel: #241b13; --line: #4a3826; --ink: #f1e6d2; --dim: #b8a585; --gold: #e0b45c; --red: #c85a4a; --blue: #8fb4d8; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at top, #2a2016, var(--bg) 70%); color: var(--ink);
  font-family: Georgia, 'Book Antiqua', serif; }
button { font: inherit; background: #5a3f22; color: var(--ink); border: 1px solid var(--gold); border-radius: 10px; padding: .55em 1em; cursor: pointer; }
button:hover { background: #6d4c29; }
button.ghost { background: transparent; border-color: var(--line); color: var(--dim); }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { font: inherit; background: #120d09; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .6em; width: 100%; }
h1, h2 { font-weight: normal; color: var(--gold); margin: 0; letter-spacing: .02em; }
.e { margin: 0 0 .9em; line-height: 1.5; }
.e.dm p { margin: 0 0 .6em; }
.e.pl { color: var(--blue); }
.e.roll { color: var(--gold); }
.e.sys { color: var(--dim); font-style: italic; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .3em 0; }
.speech { color: #f6d39a; }
.typing { color: var(--dim); font-style: italic; }
.tok { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex: none; background: #3a2b1c; }
.tok.none { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); }
.hpbar { height: 7px; background: #3a1d17; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.hpbar div { height: 100%; background: var(--red); }
.muted { color: var(--dim); }