*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0e1a;--bg-secondary: #151b2d;--bg-tertiary: #1e2742;--text-primary: #ffffff;--text-secondary: #a0aec0;--accent-primary: #7c3aed;--accent-secondary: #a78bfa;--border-color: #2d3748;--success: #10b981;--warning: #f59e0b;--error: #ef4444}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.loading{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.2rem;color:var(--text-secondary)}html{visibility:visible;opacity:1}.page-container,.dashboard-container,.shop-container,.open-box-container,.characters-container,.inventory-container,.dungeon-container,.profile-container,.landing-container,.admin-container{animation:fadeIn .2s ease-out}.loading-state{min-height:400px}button{cursor:pointer;border:none;font-family:inherit;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input{font-family:inherit}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}div,span,p,h1,h2,h3,h4,h5,h6,section,article,main,header,footer,nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}*:focus:not(input):not(textarea):not(button):not(a):not(select){outline:none;caret-color:transparent}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.animate-shake{animation:shake .5s ease-in-out}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.animate-bounce-in{animation:bounceIn .6s ease-out}@keyframes zoomIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.animate-zoom-in{animation:zoomIn .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-up{animation:slideUp .4s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-down{animation:slideDown .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .3s ease-out}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate-fade-out{animation:fadeOut .3s ease-out}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-rotate{animation:rotate 1s linear infinite}@keyframes glow{0%,to{box-shadow:0 0 5px var(--accent-primary),0 0 10px var(--accent-primary),0 0 15px var(--accent-primary)}50%{box-shadow:0 0 10px var(--accent-primary),0 0 20px var(--accent-primary),0 0 30px var(--accent-primary),0 0 40px var(--accent-primary)}}.animate-glow{animation:glow 2s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0);opacity:1}25%{transform:scale(1.2) rotate(90deg);opacity:.8}50%{transform:scale(1.1) rotate(180deg);opacity:1}75%{transform:scale(1.2) rotate(270deg);opacity:.8}}.animate-sparkle{animation:sparkle 1s ease-in-out infinite}@keyframes coinFlip{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}.animate-coin-flip{animation:coinFlip .8s ease-in-out}@keyframes countUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-count-up{animation:countUp .5s ease-out}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.ripple-effect{position:relative;overflow:hidden}.ripple-effect:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);animation:ripple .6s ease-out}@keyframes particle{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.particle{position:absolute;width:8px;height:8px;background:var(--accent-primary);border-radius:50%;animation:particle 1s ease-out forwards}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-shimmer{background:linear-gradient(90deg,var(--bg-secondary) 0%,var(--bg-tertiary) 50%,var(--bg-secondary) 100%);background-size:1000px 100%;animation:shimmer 2s infinite}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti{position:fixed;width:10px;height:10px;background:var(--accent-primary);animation:confetti 3s linear forwards;z-index:9999}@keyframes boxOpen{0%{transform:scale(1) rotateY(0)}50%{transform:scale(1.2) rotateY(180deg)}to{transform:scale(1) rotateY(360deg)}}.animate-box-open{animation:boxOpen 1s ease-in-out}@keyframes rewardReveal{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.3) rotate(0);opacity:.8}to{transform:scale(1) rotate(0);opacity:1}}.animate-reward-reveal{animation:rewardReveal .8s cubic-bezier(.34,1.56,.64,1)}@keyframes levelUp{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.8}to{transform:scale(1);opacity:1}}.animate-level-up{animation:levelUp .5s ease-in-out}@keyframes goldGain{0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-30px) scale(1.2);opacity:.9}to{transform:translateY(-60px) scale(.8);opacity:0}}.animate-gold-gain{animation:goldGain 1s ease-out forwards}@keyframes notificationSlideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.animate-notification-in{animation:notificationSlideIn .3s ease-out}@keyframes notificationSlideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.animate-notification-out{animation:notificationSlideOut .3s ease-out}.hover-glow{transition:all .3s ease}.hover-glow:hover{box-shadow:0 0 20px var(--accent-primary),0 0 40px var(--accent-primary);transform:translateY(-2px)}@keyframes loadingDots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.loading-dots:after{content:"...";animation:loadingDots 1.5s steps(4,end) infinite}