:root{
  --bg:#1a1410; --wood:#2a1f17; --wood2:#3a2a1e; --parch:#f4e4c1; --parch2:#e8d3a4;
  --gold:#d4a24c; --gold2:#f0c873; --crimson:#a3262a; --emerald:#2f8f5b; --ink:#2b1d12;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--parch);font-family:'Lora',Georgia,serif;}
body{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212,162,76,.18), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(163,38,42,.12), transparent 50%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 37px),
    var(--bg);
  min-height:100vh;
}
.font-display{font-family:'Cinzel',serif}
.font-black-letter{font-family:'UnifrakturMaguntia',serif}
.parch{background:linear-gradient(160deg,var(--parch),var(--parch2));color:var(--ink);
  box-shadow:inset 0 0 30px rgba(120,80,30,.25),0 4px 14px rgba(0,0,0,.45)}
.woodcard{background:linear-gradient(180deg,var(--wood2),var(--wood));border:1px solid rgba(212,162,76,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.glow{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(240,200,115,.55)}
.btn{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:.45rem .9rem;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1d12;border:1px solid #8a6424;
  transition:transform .15s, box-shadow .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 14px rgba(240,200,115,.6)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{font-family:'Cinzel',serif;border:1px solid rgba(212,162,76,.45);color:var(--gold2);
  border-radius:6px;padding:.4rem .8rem;background:rgba(0,0,0,.2);cursor:pointer}
.btn-ghost:hover{background:rgba(212,162,76,.15)}
.inp{background:rgba(0,0,0,.35);border:1px solid rgba(212,162,76,.35);color:var(--parch);border-radius:6px;padding:.5rem .7rem;width:100%;font-family:'Lora',serif}
.inp:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 10px rgba(240,200,115,.3)}
.tilt{transition:transform .25s, box-shadow .25s}
.tilt:hover{transform:perspective(600px) rotateX(3deg) rotateY(-3deg) translateY(-3px)}
.candle{display:inline-block;animation:flicker 2.2s infinite}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.75;transform:scale(.96) rotate(-2deg)}60%{opacity:.95;transform:scale(1.03) rotate(1deg)}}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.runes{animation:spin 2.5s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.dots span{animation:blink 1.2s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
.dropcap::first-letter{font-family:'UnifrakturMaguntia',serif;float:left;font-size:3.2em;line-height:.85;margin:.05em .12em 0 0;color:var(--crimson)}
.dice-tumble{animation:tumble .7s ease-out}
@keyframes tumble{0%{transform:rotate(0) scale(.6)}50%{transform:rotate(400deg) scale(1.2)}100%{transform:rotate(720deg) scale(1)}}
.fall{position:fixed;top:-40px;pointer-events:none;z-index:100;animation:fall linear forwards;font-size:24px}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.panic{animation:panic .12s 12}
@keyframes panic{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.scroll-thin::-webkit-scrollbar{width:6px}.scroll-thin::-webkit-scrollbar-thumb{background:rgba(212,162,76,.4);border-radius:3px}
.theme-classic{} 
.theme-moss .parch{background:linear-gradient(160deg,#dfe9c8,#c4d6a0)}
.theme-ember .parch{background:linear-gradient(160deg,#f8d0b0,#e9a77a)}
.theme-arcane .parch{background:linear-gradient(160deg,#d9e2f5,#b9c6ea)}
.pixel{image-rendering:pixelated}