:root{--bg: #fff7ed;--bg-2: #fff1e0;--surface: #fffcf7;--ink: #7c2d12;--ink-soft: #9a3412;--muted: #b45309;--primary: #f97316;--primary-dark: #ea580c;--primary-soft: #ffedd5;--accent: #2563eb;--blush: #fb7185;--line: #fed7aa;--line-strong: #fdba74;--clay: 0 10px 20px -8px rgba(180, 83, 9, .28), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 -4px 10px rgba(180, 83, 9, .08) inset;--clay-lg: 0 26px 50px -22px rgba(180, 83, 9, .4), 0 3px 0 rgba(255, 255, 255, .95) inset, 0 -6px 16px rgba(180, 83, 9, .07) inset;--font-display: "Baloo Bhaijaan 2", "Cairo", system-ui, sans-serif;--font-body: "Cairo", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);color:var(--ink);background:radial-gradient(1200px 700px at 12% -10%,#ffe8cf 0%,transparent 60%),radial-gradient(900px 600px at 92% 0%,#dbeafe 0%,transparent 55%),radial-gradient(900px 700px at 60% 115%,#dcfce7 0%,transparent 60%),linear-gradient(160deg,var(--bg) 0%,var(--bg-2) 100%);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;cursor:pointer}button:focus-visible,[role=button]:focus-visible{outline:3px solid rgba(37,99,235,.55);outline-offset:3px}.app{position:relative;height:100dvh;max-width:1180px;margin:0 auto;padding:clamp(12px,2vw,22px) clamp(12px,3vw,28px);display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px);z-index:1}.ornaments{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}.b1{width:320px;height:320px;top:-90px;inset-inline-start:-60px;background:radial-gradient(circle at 30% 30%,#fdba74,#fb923c00)}.b2{width:260px;height:260px;top:22%;inset-inline-end:-70px;background:radial-gradient(circle at 40% 40%,#93c5fd,#93c5fd00);animation-delay:-6s}.b3{width:300px;height:300px;bottom:-110px;inset-inline-start:34%;background:radial-gradient(circle at 50% 50%,#86efac,#86efac00);animation-delay:-12s}.dot-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(180,83,9,.13) 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 72%);opacity:.5}@keyframes drift{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(24px,-26px,0) scale(1.08)}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;animation:fadeUp .55s ease both}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#fdba74,#f97316);border:3px solid #fff;box-shadow:var(--clay)}.brand-text h1{margin:0;font-family:var(--font-display);font-size:clamp(19px,2.4vw,25px);font-weight:800;line-height:1.1;letter-spacing:-.2px}.brand-text p{margin:2px 0 0;font-size:12.5px;color:var(--muted);opacity:.85}.tools{display:flex;gap:8px}.icon-btn{width:42px;height:42px;border-radius:15px;border:3px solid #fff;background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;box-shadow:var(--clay);transition:transform .18s ease,box-shadow .18s ease,color .18s ease}.icon-btn:hover{transform:translateY(-2px);color:var(--primary-dark);box-shadow:0 14px 22px -10px #b4530966}.icon-btn:active{transform:translateY(1px) scale(.97)}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.stage{position:relative;flex:1 1 auto;min-height:330px;border-radius:34px;border:4px solid #fff;background:radial-gradient(120% 95% at 50% 8%,#fffdf8,#fff4e5 58%,#ffe8d0);box-shadow:var(--clay-lg);overflow:hidden;animation:fadeUp .6s ease .06s both;touch-action:manipulation}.stage:before{content:"";position:absolute;left:50%;top:50%;width:min(54vh,390px);height:min(54vh,390px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fdba744d,#fdba7400 68%)}.stage:after{content:"";position:absolute;left:50%;top:50%;width:min(62vh,440px);height:min(62vh,440px);transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(251,146,60,.22);animation:spinSlow 42s linear infinite}@keyframes spinSlow{to{transform:translate(-50%,-50%) rotate(360deg)}}.pet-wrap{position:absolute;left:50%;top:50%;width:clamp(184px,27vw,288px);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;z-index:3}.pet-wrap.dragging{cursor:grabbing}.pet-shadow{position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:60%;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(120,53,15,.26),transparent 72%);filter:blur(3px);z-index:0}.pet-body{position:relative;z-index:2;width:100%;transform-origin:50% 68%;transition:transform .2s ease}.pet-body svg{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 16px rgba(120,53,15,.18))}.pet-wrap.dragging .pet-body{transform:scale(1.03)}.pet-wrap.bopping .pet-body{animation:boop .42s cubic-bezier(.34,1.56,.64,1)}.pet-wrap.dizzy .pet-body{animation:wobble .6s ease-in-out infinite}.pet-wrap.sleeping .pet-body{animation:breathe 4.5s ease-in-out infinite}.pet-wrap.is-happy .pet-shadow{width:68%;background:radial-gradient(ellipse,rgba(251,113,133,.3),transparent 72%)}@keyframes boop{0%{transform:scale(1)}35%{transform:scale(.9,1.08)}65%{transform:scale(1.07,.94)}to{transform:scale(1)}}@keyframes wobble{0%,to{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-4px)}}@keyframes breathe{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.018) translateY(2px)}}.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;border:3px solid var(--line);border-radius:18px;padding:7px 16px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;box-shadow:var(--clay);z-index:6;animation:bubbleIn .32s cubic-bezier(.34,1.56,.64,1) both;pointer-events:none}.bubble:after{content:"";position:absolute;bottom:-11px;left:50%;width:14px;height:14px;background:#fff;border-right:3px solid var(--line);border-bottom:3px solid var(--line);border-radius:0 0 4px;transform:translate(-50%) rotate(45deg)}.bubble.warn{border-color:#fca5a5;color:#b91c1c}.bubble.warn:after{border-color:#fca5a5}.bubble.happy{border-color:#fdba74}@keyframes bubbleIn{0%{opacity:0;transform:translate(-50%,-80%) scale(.8)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}.mood-chip{position:absolute;top:16px;inset-inline-start:16px;display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:#fff;border:3px solid var(--line);font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-soft);box-shadow:var(--clay);z-index:5;transition:color .25s ease,border-color .25s ease}.mood-chip.love{color:#db2777;border-color:#fbcfe8}.mood-chip.sleep{color:#4338ca;border-color:#c7d2fe}.mood-chip.sleepy{color:#6d28d9;border-color:#ddd6fe}.mood-chip.dizzy{color:#b91c1c;border-color:#fecaca}.particle-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.particle{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);animation:floatUp 1.45s ease-out forwards}.particle.heart{color:#fb7185}.particle.star{color:#f59e0b}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% - 115px)) scale(1.1) rotate(var(--rot))}}.hint{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:8px;margin:0;padding:8px 16px;background:#ffffffd1;border:2.5px dashed var(--line-strong);border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);pointer-events:none;z-index:4;animation:bobble 2.6s ease-in-out infinite;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes bobble{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.dock{flex:0 0 auto;border-radius:30px;border:4px solid #fff;background:linear-gradient(180deg,#fffdf9,#fff6ea);box-shadow:var(--clay-lg);padding:13px clamp(12px,2vw,20px) 12px;display:flex;flex-direction:column;gap:11px;animation:fadeUp .6s ease .12s both}.dock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.meter{display:flex;align-items:center;gap:10px;flex:1 1 220px;max-width:360px;min-width:170px}.meter-icon{color:var(--blush);display:grid;place-items:center}.meter-bar{flex:1;height:13px;border-radius:999px;background:var(--primary-soft);box-shadow:inset 0 2px 4px #b453092e;overflow:hidden}.meter-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#fda4af,#fb923c,#f97316);transition:width .45s cubic-bezier(.34,1.3,.64,1)}.meter-val{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--muted);min-width:40px;text-align:center}.stats{display:flex;gap:8px;flex-wrap:wrap}.stats span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#fff7ed;border:2px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}.skins{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:none}.skins::-webkit-scrollbar{display:none}.skin{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px 5px;border-radius:18px;border:3px solid transparent;background:#fffaf3;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}.skin:hover{transform:translateY(-3px);background:#fff3e2}.skin.active{border-color:var(--line-strong);background:var(--primary-soft);transform:translateY(-2px);box-shadow:0 10px 16px -10px #b453098c}.skin-avatar{width:42px;height:42px;border-radius:50%;background:#ffe8d0;border:2.5px solid #fff;box-shadow:0 3px 6px #b4530929;display:grid;place-items:center;overflow:hidden}.skin-avatar svg{width:40px;height:40px}.skin-name{font-family:var(--font-display);font-size:12.5px;font-weight:700;color:var(--ink-soft)}.skin.active .skin-name{color:var(--primary-dark)}.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.clay-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;border:3px solid #fff;background:linear-gradient(180deg,#fff8f0,#ffe9d3);color:var(--ink-soft);font-family:var(--font-display);font-weight:700;font-size:14.5px;box-shadow:0 8px 0 -2px #f6d3ad,0 12px 18px -12px #b4530999;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.clay-btn:hover{transform:translateY(-2px);filter:saturate(1.05)}.clay-btn:active{transform:translateY(3px);box-shadow:0 3px 0 -2px #f6d3ad}.clay-btn.primary{background:linear-gradient(180deg,#fdba74,#f97316);color:#fff;box-shadow:0 8px 0 -2px #ea580c,0 14px 22px -12px #ea580cd9}.clay-btn.primary:active{box-shadow:0 3px 0 -2px #ea580c}.tip{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.5;color:var(--muted);opacity:.82;flex:1 1 240px}@media (max-width: 760px){.app{height:auto;min-height:100dvh;padding:12px 12px 18px}.stage{min-height:340px;flex:0 0 auto;height:min(52vh,430px)}.pet-wrap{width:clamp(176px,48vw,240px)}.brand-text p{display:none}.brand-mark{width:40px;height:40px;border-radius:13px}.icon-btn{width:38px;height:38px;border-radius:13px}.meter{max-width:none}.tip{display:none}.clay-btn{flex:1 1 120px;justify-content:center;padding:10px 16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.treat{position:absolute;left:50%;top:6%;z-index:3;display:grid;place-items:center;width:48px;height:48px;margin-left:-24px;border-radius:50%;color:var(--ink, #3f2c1d);background:#fff7ed;border:2px solid rgba(180,120,60,.35);box-shadow:0 10px 20px #78481e38;animation:treatDrop 1.2s cubic-bezier(.34,1.4,.64,1) forwards}@keyframes treatDrop{0%{transform:translateY(-70px) scale(.4) rotate(-25deg);opacity:0}35%{transform:translateY(30px) scale(1) rotate(8deg);opacity:1}55%{transform:translateY(46px) scale(.9) rotate(-4deg);opacity:1}70%{transform:translateY(54px) scale(.2) rotate(10deg);opacity:.6}to{transform:translateY(58px) scale(0);opacity:0}}.pet-wrap.chewing .pet-body svg{animation:chew .26s ease-in-out infinite alternate}@keyframes chew{0%{transform:scaleY(.99) translateY(0)}to{transform:scaleY(.94) translateY(4px)}}.pet-wrap.motion-hop:not(.dragging) .pet-body{animation:hop 3.4s ease-in-out infinite}@keyframes hop{0%,62%,to{transform:translateY(0) scaleY(1)}68%{transform:translateY(-12px) scaleY(1.04)}74%{transform:translateY(0) scaleY(.95)}80%{transform:translateY(-4px) scaleY(1.01)}}.pet-wrap.motion-squish:not(.dragging) .pet-body{animation:squish 2.8s ease-in-out infinite}@keyframes squish{0%,70%,to{transform:scale(1)}78%{transform:scale(1.06,.9)}86%{transform:scale(.97,1.04)}}.pet-wrap.motion-roll:not(.dragging) .pet-body{animation:rollSway 5s ease-in-out infinite}@keyframes rollSway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.pet-wrap.motion-wag:not(.dragging) .pet-body{animation:wagSway 2.6s ease-in-out infinite}@keyframes wagSway{0%,to{transform:translate(-3px)}50%{transform:translate(3px)}}.pet-wrap.motion-sway:not(.dragging) .pet-body{animation:breathe 4.4s ease-in-out infinite}.bond{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#ffffff9e;border:1px solid rgba(180,130,80,.18);font-size:12.5px;color:#7c5a3c}.bond-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#9a5b17;white-space:nowrap}.bond-bar{flex:1;min-width:60px;height:6px;border-radius:99px;background:#b4825029;overflow:hidden}.bond-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fbbf24,#f97316);transition:width .5s cubic-bezier(.34,1.3,.64,1)}.bond-next{white-space:nowrap;opacity:.75;font-size:11.5px}@media (max-width: 760px){.bond{padding:6px 10px;font-size:11.5px}.bond-next{font-size:10.5px}}@media (max-width: 760px){html,body{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none}.app{height:auto;min-height:100dvh}.stage{flex:0 0 auto;height:auto;min-height:clamp(270px,44vh,420px)}.mood-chip{top:12px;inset-inline-start:12px;font-size:12.5px;padding:6px 12px}}