:root{--bg:#efe2c4;--ink:#3b2412;--accent:#b8860b;--card:#f8edd3;--edge:#8a5a2b;--soft:#e4d2a8;--hp1:#4d7c2a;--hp2:#d08a1c;--hp3:#a82a1f;--display:'Cinzel Decorative',serif;--body:'Crimson Pro',serif;--mono:'JetBrains Mono',monospace}
body.scifi{--bg:#05070f;--ink:#a6ffe9;--accent:#ff2bd6;--card:#0a1322;--edge:#00e5ff;--soft:#0f1d33;--hp1:#00ff9c;--hp2:#ffd000;--hp3:#ff2b55;--display:'VT323',monospace;--body:'VT323',monospace;--mono:'VT323',monospace}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;transition:background .4s}
body:not(.scifi){background-image:radial-gradient(ellipse at 20% 10%,rgba(255,240,200,.8),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(140,90,40,.25),transparent 60%),repeating-linear-gradient(17deg,rgba(120,80,30,.04) 0 2px,transparent 2px 6px)}
body.scifi{font-size:21px;background-image:radial-gradient(circle at 50% 0,rgba(0,229,255,.15),transparent 60%)}
body.scifi::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);z-index:50}
.display{font-family:var(--display)}
.mono{font-family:var(--mono)}
.card{background:var(--card);border:2px solid var(--edge);border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.12),0 0 30px rgba(184,134,11,.12)}
body.scifi .card{box-shadow:0 0 18px rgba(0,229,255,.25),inset 0 0 20px rgba(0,229,255,.05)}
.btn{border:2px solid var(--edge);border-radius:10px;padding:.35rem .8rem;background:var(--soft);color:var(--ink);transition:transform .1s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px);background:var(--accent);color:var(--card)}
.btn:disabled{opacity:.4;transform:none;cursor:not-allowed}
.glow{background:var(--accent);color:var(--card);font-weight:800;animation:glow 2s infinite}
@keyframes glow{50%{box-shadow:0 0 28px var(--accent)}}
.choice{text-align:left;width:100%;display:flex;gap:.7rem;align-items:flex-start}
.badge{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--card);font-weight:900;font-family:var(--display)}
input,textarea{background:var(--card);color:var(--ink);border:2px solid var(--edge);border-radius:10px;padding:.5rem .7rem;width:100%;font-family:var(--body);font-size:inherit;outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 3px var(--accent)}
.d20{display:inline-block;width:38px;height:38px}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sparkle{animation:spark .8s}
@keyframes spark{50%{filter:brightness(1.8) drop-shadow(0 0 10px var(--hp1))}}
.pulse{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}
.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(0)}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.chip{border:1.5px solid var(--edge);border-radius:999px;padding:.15rem .6rem;font-size:.85em;background:var(--soft);position:relative}
.newb{position:absolute;top:-9px;right:-6px;font-size:.6em;background:var(--accent);color:var(--card);border-radius:6px;padding:0 4px;font-family:var(--mono)}
.scroll::-webkit-scrollbar{width:8px}.scroll::-webkit-scrollbar-thumb{background:var(--edge);border-radius:4px}
a{color:var(--accent)}