:root{--bg:#0a0a0a;--swamp:#1a2e1a;--blood:#8b0000;--blood2:#c1121f;--bone:#e8e2d0}
body{background:radial-gradient(ellipse at top,#132013 0%,#0a0a0a 60%) fixed;color:var(--bone);font-family:'Vazirmatn',sans-serif;min-height:100vh;overflow-x:hidden}
.logo{font-family:'Creepster',cursive;color:var(--blood2);text-shadow:0 0 18px #c1121f88,0 4px 0 #3a0000;letter-spacing:4px;position:relative;display:inline-block}
.drip{position:absolute;top:80%;width:5px;background:var(--blood2);border-radius:0 0 4px 4px;animation:drip 3s infinite ease-in}
@keyframes drip{0%{height:0;opacity:1}70%{height:28px;opacity:1}100%{height:34px;opacity:0;transform:translateY(20px)}}
.flicker{animation:flick 5s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.3}95%{opacity:1}96%{opacity:.5}}
.fog{position:fixed;inset:-50%;pointer-events:none;z-index:0;background:radial-gradient(circle at 30% 50%,#9fb39f14 0,transparent 30%),radial-gradient(circle at 70% 60%,#9fb39f10 0,transparent 25%);animation:fog 40s linear infinite}
.fog2{animation-duration:65s;animation-direction:reverse;opacity:.7}
@keyframes fog{from{transform:translateX(-10%)}to{transform:translateX(10%)}}
#root{position:relative;z-index:1}
.card{background:linear-gradient(160deg,#141c14,#0d0d0d);border:1px solid #2a3a2a;border-radius:6px}
.btn{background:var(--blood);color:var(--bone);font-weight:800;padding:.6rem 1.2rem;border-radius:4px;border:1px solid #c1121f;transition:.2s}
.btn:hover{background:var(--blood2);box-shadow:0 0 20px #c1121f88}
.btn:disabled{opacity:.5}
.btn-ghost{background:transparent;border:1px solid #3a4a3a;color:var(--bone);padding:.5rem 1rem;border-radius:4px}
.btn-ghost:hover{border-color:var(--blood2)}
.inp{background:#0d120d;border:1px solid #2a3a2a;color:var(--bone);padding:.6rem;border-radius:4px;width:100%}
.inp:focus{outline:none;border-color:var(--blood2)}
.tab-active{color:var(--blood2);text-shadow:0 0 12px #c1121f}
.parchment{background:linear-gradient(135deg,#d9c9a3,#bfa878);color:#2a1a0a;border-radius:3px;box-shadow:inset 0 0 60px #6b4a1a88,0 10px 30px #000}
.candle{box-shadow:0 0 25px #ff8c2a22;animation:candle 3s infinite alternate}
@keyframes candle{to{box-shadow:0 0 40px #ff8c2a40}}
.eye{width:60px;height:30px;border-radius:50%;background:var(--bone);position:relative;margin:auto;animation:blink 1.6s infinite}
.eye::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--blood);top:6px;left:21px;animation:look 1.6s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes look{0%,100%{left:8px}50%{left:34px}}
.shake{animation:shake .15s infinite}
@keyframes shake{0%{transform:translate(2px,1px)}50%{transform:translate(-2px,-2px)}100%{transform:translate(1px,2px)}}
.scare{position:fixed;inset:0;z-index:100;background:#8b0000;display:flex;align-items:center;justify-content:center;font-size:40vmin;animation:scare .9s}
@keyframes scare{0%{transform:scale(.2)}20%{transform:scale(1.3)}100%{transform:scale(1)}}
.dark-mode-reader{position:fixed;inset:0;z-index:50;background:#000;overflow:auto}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
input[type=range]{accent-color:#c1121f}