@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;image-rendering:pixelated}:root{--bg: #0d0d1a;--bg-card: #141428;--bg-card-alt: #1a1a35;--border: #ff6b9d;--border-glow: rgba(255, 107, 157, .4);--accent: #c084fc;--accent-glow: rgba(192, 132, 252, .3);--cyan: #67e8f9;--cyan-glow: rgba(103, 232, 249, .3);--text: #f0e6ff;--text-dim: #8888aa;--hunger: #ff6b9d;--happy: #fbbf24;--energy: #34d399;--btn-feed: #ff6b9d;--btn-play: #fbbf24;--btn-rest: #34d399;--pixel-border: 3px;--sakura: #ffb7d5;--gold: #fbbf24}body{font-family:"M PLUS Rounded 1c","Press Start 2P",sans-serif;background:var(--bg);background-image:radial-gradient(ellipse at 20% 50%,rgba(192,132,252,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,107,157,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(103,232,249,.04) 0%,transparent 50%);color:var(--text);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:1rem}#root{width:100%;max-width:480px}.pixel-border{border:var(--pixel-border) solid var(--border);border-radius:12px;box-shadow:0 0 15px var(--border-glow),inset 0 1px #ffffff14;position:relative;overflow:hidden}.pixel-border:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--sakura),transparent);opacity:.5}@keyframes idle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes happy-react{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.15) rotate(-4deg)}50%{transform:scale(1.25) rotate(4deg)}75%{transform:scale(1.15) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 15px var(--border-glow)}50%{box-shadow:0 0 25px var(--border-glow),0 0 40px var(--accent-glow)}}.animate-idle{animation:idle-bounce 2s ease-in-out infinite}.animate-happy{animation:happy-react .5s ease-in-out}.animate-fade-in{animation:fade-in-up .4s ease-out}@keyframes bubble-enter{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-bubble-enter{animation:bubble-enter .3s ease-out}@keyframes typing-blink{0%,to{opacity:1}50%{opacity:.3}}.typing-dots{animation:typing-blink 1s ease-in-out infinite}.typing-indicator{animation:bubble-enter .3s ease-out}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60px)}}.stat-float{animation:float-up 1.5s ease-out forwards}.header-bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem .85rem;margin-bottom:.75rem;background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card-alt) 100%);border:2px solid rgba(192,132,252,.3);border-radius:12px;box-shadow:0 4px 20px #0006,0 0 10px var(--accent-glow);font-family:"Press Start 2P",monospace;font-size:.45rem;gap:.5rem;flex-wrap:wrap}.header-coins{color:var(--gold);white-space:nowrap;text-shadow:0 0 8px rgba(251,191,36,.5)}.header-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.header-user{color:var(--text-dim);font-size:.35rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-btn{font-family:"Press Start 2P",monospace;font-size:.35rem;padding:.3rem .6rem;background:var(--bg-card-alt);color:var(--text-dim);border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s}.header-btn:hover{background:#c084fc26;color:var(--text);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.header-btn-login{background:linear-gradient(135deg,#ff6b9d,#c084fc);color:#fff;border-color:var(--border);text-shadow:0 1px 2px rgba(0,0,0,.3)}.header-btn-login:hover{background:linear-gradient(135deg,#ff85b1,#d4a0ff);box-shadow:0 0 15px var(--border-glow)}.feedback-bar{font-family:"Press Start 2P",monospace;font-size:.4rem;padding:.5rem .7rem;margin-bottom:.75rem;text-align:center;border:2px solid;border-radius:10px;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in-up .2s ease-out}.action-btn{transition:all .2s;border-radius:10px!important;text-shadow:0 1px 2px rgba(0,0,0,.3)}.action-btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 4px 15px #0000004d}.action-btn:active:not(:disabled){transform:translateY(0)}.pet-select-btn{transition:all .2s;border-radius:10px}.pet-select-btn:hover{transform:translateY(-3px);filter:brightness(1.1);box-shadow:0 6px 20px #0000004d}@keyframes coin-float-up{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-30px) scale(1.3)}to{opacity:0;transform:translateY(-60px) scale(.8)}}.coin-float{animation:coin-float-up 1.5s ease-out forwards}.stat-bar-track{background:#0a0a1acc;border:2px solid rgba(255,255,255,.08);border-radius:6px;height:22px;position:relative;overflow:hidden}.stat-bar-fill{height:100%;transition:width .4s ease;border-radius:4px;position:relative}.stat-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent);border-radius:4px 4px 0 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg);border-radius:3px}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border)}.pet-display{background:radial-gradient(ellipse at center bottom,rgba(192,132,252,.1) 0%,transparent 70%);border-radius:12px;position:relative}.title-anime{font-family:"Press Start 2P",monospace;background:linear-gradient(135deg,var(--border),var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px var(--border-glow))}.chat-area{background:#0a0a1a99;border:2px solid rgba(192,132,252,.15);border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes float-particle{0%,to{transform:translateY(0) translate(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}50%{transform:translateY(-30px) translate(10px) rotate(180deg)}}