:root{--pink: #f472b6;--purple: #a78bfa;--mint: #34d399;--peach: #fb923c;--sky: #60a5fa;--bg: #fef7ff;--card: #ffffff;--text: #3d2c4e;--text-soft: #7c6a8a;--shadow: rgba(160, 120, 200, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Nunito,ui-rounded,SF Pro Rounded,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;position:relative;background:radial-gradient(circle at 20% 20%,rgba(244,114,182,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(167,139,250,.08) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(52,211,153,.05) 0%,transparent 50%),var(--bg)}.header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem .75rem}.app-title{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:.4rem}.paw{-webkit-text-fill-color:initial;font-size:1.3rem;animation:pawWiggle 2s ease-in-out infinite}@keyframes pawWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.name-btn{background:linear-gradient(135deg,#f472b61f,#a78bfa1f);border:2px dashed rgba(167,139,250,.3);border-radius:1rem;padding:.4rem 1rem;font-size:1rem;font-weight:700;color:var(--text);cursor:pointer;transition:all .2s}.name-btn:hover{background:linear-gradient(135deg,#f472b633,#a78bfa33);transform:scale(1.05)}.name-input{background:#fff;border:2px solid var(--purple);border-radius:1rem;padding:.4rem 1rem;font-size:1rem;font-weight:700;color:var(--text);outline:none;width:140px;text-align:center}.pet-stage{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;position:relative;flex:1;min-height:260px;justify-content:center}.pet-container{display:flex;flex-direction:column;align-items:center;transition:transform .3s}.pet-container.bounce{animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-20px) scale(1.05)}50%{transform:translateY(-10px)}70%{transform:translateY(-5px)}}.pet-ascii{font-size:2.5rem;font-weight:800;letter-spacing:.05em;color:var(--text);text-align:center;filter:drop-shadow(0 4px 8px var(--shadow))}.pet-face{font-size:.9rem;font-family:Courier New,monospace;color:var(--text-soft);margin-top:.25rem;letter-spacing:.05em}.pet-shadow{width:80px;height:16px;background:radial-gradient(ellipse,rgba(100,60,140,.15) 0%,transparent 70%);border-radius:50%;margin-top:.5rem;animation:shadowPulse 2s ease-in-out infinite}@keyframes shadowPulse{0%,to{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.85);opacity:.4}}.action-message{position:absolute;bottom:60px;background:#fff;color:var(--text);padding:.6rem 1.2rem;border-radius:1rem;font-weight:700;font-size:.9rem;box-shadow:0 4px 20px var(--shadow);animation:messagePop .4s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;border:2px solid rgba(167,139,250,.2)}@keyframes messagePop{0%{transform:scale(.5) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.mood-bubble{margin-top:.75rem;background:linear-gradient(135deg,#ffffffe6,#f472b614);padding:.5rem 1rem;border-radius:1rem;font-size:.85rem;font-weight:600;color:var(--text);border:1px solid rgba(167,139,250,.15);animation:floatBubble 3s ease-in-out infinite}@keyframes floatBubble{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.menu-bar{display:flex;justify-content:space-around;padding:.5rem .75rem;background:#fff;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -4px 20px #a078c814;position:sticky;bottom:0}.menu-tab{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;border:none;padding:.6rem 1rem;border-radius:1rem;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;color:var(--text-soft)}.menu-tab:hover{transform:translateY(-3px) scale(1.08);background:#a78bfa0f}.menu-tab.active{color:var(--text);transform:translateY(-3px)}.menu-emoji{font-size:1.4rem;transition:transform .3s}.menu-tab:hover .menu-emoji,.menu-tab.active .menu-emoji{animation:emojiWiggle .5s ease}@keyframes emojiWiggle{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.15)}50%{transform:rotate(8deg) scale(1.1)}75%{transform:rotate(-5deg) scale(1.05)}}.menu-label{font-size:.7rem;font-weight:700;letter-spacing:.02em}.tab-indicator{position:absolute;bottom:-2px;width:24px;height:4px;border-radius:2px;background:var(--tab-color, var(--purple));animation:indicatorPop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes indicatorPop{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.main-content{flex:1;padding:0 1.25rem 1.5rem;background:#fff;min-height:200px}.menu-content{animation:contentFade .3s ease}@keyframes contentFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.section-title{font-size:1.25rem;font-weight:800;margin-bottom:.25rem;background:linear-gradient(135deg,var(--text),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-sub{font-size:.85rem;color:var(--text-soft);margin-bottom:1rem}.stats-grid{display:flex;flex-direction:column;gap:.9rem}.stat-bar{display:flex;flex-direction:column;gap:.3rem}.stat-label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700}.stat-value{font-variant-numeric:tabular-nums;color:var(--text-soft)}.stat-track{height:12px;background:#a78bfa14;border-radius:6px;overflow:hidden}.stat-fill{height:100%;border-radius:6px;transition:width .5s cubic-bezier(.34,1.56,.64,1);position:relative}.stat-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 100%);border-radius:6px}.mood-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;padding:.6rem 1.2rem;background:linear-gradient(135deg,#f472b61a,#a78bfa1a);border-radius:1rem;font-weight:700;font-size:.95rem;border:1px solid rgba(167,139,250,.15);align-self:flex-start}.mood-emoji{font-size:1.3rem}.actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}.action-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .75rem;background:linear-gradient(135deg,#a78bfa0f,#f472b60f);border:2px solid rgba(167,139,250,.12);border-radius:1rem;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);font-family:inherit}.action-btn:hover{transform:translateY(-4px) scale(1.04);border-color:var(--purple);box-shadow:0 8px 25px #a78bfa26;background:linear-gradient(135deg,#a78bfa1f,#f472b61f)}.action-btn:active{transform:translateY(-1px) scale(.98)}.action-emoji{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.action-name{font-size:.8rem;font-weight:700;color:var(--text)}.sleep-area{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 0}.zzz-float{display:flex;gap:.5rem;font-size:2rem}.zzz-float span{animation:zzzFloat 2s ease-in-out infinite}.zzz-float .z2{animation-delay:.4s;opacity:.7}.zzz-float .z3{animation-delay:.8s;opacity:.4}@keyframes zzzFloat{0%,to{transform:translateY(0);opacity:1}50%{transform:translateY(-12px);opacity:.5}}.nap-btn{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:linear-gradient(135deg,var(--pink),var(--purple));border:none;border-radius:1rem;color:#fff;font-size:1.1rem;font-weight:800;font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 6px 20px #a78bfa4d}.nap-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 30px #a78bfa66}.nap-btn:active{transform:translateY(0) scale(.98)}.nap-emoji{font-size:1.5rem}.particle{position:fixed;font-size:1.5rem;pointer-events:none;z-index:100;animation:particleFloat 1.5s ease-out forwards}@keyframes particleFloat{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-80px) scale(.3);opacity:0}}@media(max-width:400px){.actions-grid{grid-template-columns:repeat(2,1fr)}.menu-tab{padding:.5rem .6rem}.menu-emoji{font-size:1.2rem}}