:root{--brown-deep:#2d1b0e;--brown-mid:#4a3728;--brown-light:#6b4c35;--parchment-light:#f4e4bc;--parchment-mid:#e8d5a3;--parchment-dark:#d4bc85;--ink-red:#8b2500;--ink-dark:#1a0e08;--gold-bright:gold;--gold-leaf:#d4af37;--gold-dark:#a07820;--magic-blue:#1a1a3e;--magic-purple:#3a1a5e;--magic-glow:#6a4aff;--cat-health:#8b1a1a;--cat-health-glow:#f44;--cat-intelligence:#1a3a8b;--cat-intelligence-glow:#48f;--cat-money:#1a5c1a;--cat-money-glow:#4f4;--cat-relationships:#5c1a5c;--cat-relationships-glow:#f4f;--font-display:"Cinzel Decorative", "Cinzel", serif;--font-header:"Cinzel", serif;--font-body:"Cormorant Garamond", Georgia, serif;--font-script:"Caveat", cursive;--shadow-book:0 20px 60px #000000b3, 0 0 0 1px #2d1b0e4d;--shadow-card:0 4px 12px #00000059, inset 0 1px 0 #ffffff1a;--shadow-gold:0 0 15px #d4af3780, 0 0 30px #d4af3733}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background-color:var(--brown-deep);color:var(--parchment-light);background-image:radial-gradient(at 20% 20%,#4a372866 0%,#0000 50%),radial-gradient(at 80% 80%,#1a0e0899 0%,#0000 50%);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:var(--brown-deep)}::-webkit-scrollbar-thumb{background:var(--brown-mid);border:1px solid var(--gold-dark);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--brown-light)}.parchment-bg{background-color:var(--parchment-mid);color:var(--ink-dark);background-image:linear-gradient(135deg,#f4e4bc 0%,#e8d5a3 30%,#dcc88e 60%,#e8d5a3 80%,#f0dcb0 100%)}.leather-bg{background-color:var(--brown-mid);background-image:linear-gradient(135deg,#5a3d28 0%,#4a3728 40%,#3d2c1e 70%,#4a3728 100%)}.gold-border{border:1px solid var(--gold-leaf);box-shadow:0 0 0 1px #d4af3733,inset 0 0 0 1px #d4af3714}.btn{font-family:var(--font-header);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--gold-dark);cursor:pointer;border-radius:3px;align-items:center;gap:6px;padding:7px 18px;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex;position:relative}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.btn:active{transform:translateY(0)}.btn-gold{color:var(--brown-deep);border-color:var(--gold-dark);background:linear-gradient(135deg,#c9972a,#d4af37,#e8c84a,#d4af37)}.btn-gold:hover{box-shadow:var(--shadow-gold)}.btn-parchment{color:var(--ink-dark);border-color:var(--brown-mid);background:linear-gradient(135deg,#e8d5a3,#f0dcb0)}.btn-dark{color:var(--parchment-light);border-color:var(--gold-dark);background:linear-gradient(135deg,#3d2c1e,#2d1b0e)}.btn-dark:hover{border-color:var(--gold-leaf)}.btn-danger{color:var(--parchment-light);background:linear-gradient(135deg,#6b1a08,#8b2500);border-color:#a03000}.input-base{font-family:var(--font-body);border:1px solid var(--gold-dark);color:var(--parchment-light);background:#f4e4bc1a;border-radius:3px;width:100%;padding:8px 12px;font-size:15px;transition:all .2s}.input-base:focus{border-color:var(--gold-leaf);background:#f4e4bc26;outline:none;box-shadow:0 0 0 2px #d4af3733}.input-base::placeholder{color:#e4d5a366;font-style:italic}.on-parchment .input-base{border-color:var(--brown-mid);color:var(--ink-dark);background:#2d1b0e1a}.on-parchment .input-base:focus{border-color:var(--brown-light);box-shadow:0 0 0 2px #4a372833}.on-parchment .input-base::placeholder{color:#4a372866}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000d1;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.ornament-divider{color:var(--gold-dark);my:8px;align-items:center;gap:10px;font-size:16px;display:flex}.ornament-divider:before,.ornament-divider:after{content:"";background:linear-gradient(to right, transparent, var(--gold-dark), transparent);flex:1;height:1px}.xp-bar-wrap{background:#00000059;border:1px solid #d4af3740;border-radius:8px;height:7px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg, var(--gold-dark), var(--gold-bright));border-radius:8px;height:100%;transition:width .7s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px #d4af3799}.scroll-area{scrollbar-width:thin;scrollbar-color:var(--brown-mid) transparent;overflow-y:auto}@keyframes flicker{0%,to{opacity:1}92%{opacity:.97}94%{opacity:.9}96%{opacity:.98}98%{opacity:.93}}@keyframes float-up{0%{opacity:0;transform:translateY(0)scale(.8)}20%{opacity:1}to{opacity:0;transform:translateY(-80px)scale(.6)}}@keyframes pulse-gold{0%,to{box-shadow:0 0 8px #d4af374d}50%{box-shadow:0 0 20px #d4af37b3,0 0 40px #d4af374d}}@keyframes shake{0%,to{transform:translate(0)rotate(0)}10%{transform:translate(-3px,2px)rotate(-2deg)}20%{transform:translate(3px,-2px)rotate(2deg)}40%{transform:translate(3px,-1px)rotate(1deg)}60%{transform:translate(2px,-2px)rotate(1deg)}80%{transform:translate(2px,1px)rotate(0)}}@keyframes bounce-in{0%{opacity:0;transform:scale(0)rotate(-10deg)}60%{opacity:1;transform:scale(1.12)rotate(3deg)}80%{transform:scale(.95)rotate(-1deg)}to{transform:scale(1)rotate(0)}}@keyframes glow-pulse{0%,to{filter:drop-shadow(0 0 4px)}50%{filter:drop-shadow(0 0 16px)}}@keyframes particle-drift{0%{opacity:.8;transform:translateY(0)translate(0)scale(1)}to{transform:translateY(-120px) translateX(var(--drift,20px)) scale(0);opacity:0}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes candle-flicker{0%,to{opacity:.85;transform:scale(1)translate(0)}25%{opacity:.9;transform:scale(1.02)translate(1px)}50%{opacity:.8;transform:scale(.98)translate(-1px)}75%{opacity:.92;transform:scale(1.01)translate(.5px)}}@keyframes level-burst{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}.animate-flicker{animation:8s infinite flicker}.animate-pulse-gold{animation:2s infinite pulse-gold}.animate-bounce-in{animation:.5s both bounce-in}.animate-fade-in-up{animation:.35s both fade-in-up}.animate-slide-in-right{animation:.35s both slide-in-right}.animate-slide-in-left{animation:.35s both slide-in-left}.animate-glow-pulse{animation:2s ease-in-out infinite glow-pulse}@media (width<=768px){:root{font-size:14px}}@media (width<=480px){:root{font-size:13px}}
