@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Quicksand:wght@500;600;700&display=swap";:root{--font-title:"Quicksand", system-ui, sans-serif;--font-body:"Plus Jakarta Sans", system-ui, sans-serif;--bg-peach:#fae3cb;--bg-pink:#f7d3dd;--bg-mint:#d1ebe0;--bg-blue:#cee0f2;--current-bg:var(--bg-peach);transition:background-color .8s}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--current-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(at 0 0,#d58a6626 0,#0000 50%),radial-gradient(at 100% 100%,#8a572c14 0,#0000 50%);background-attachment:fixed;min-height:100vh;margin:0;transition:background-color .8s;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-title);color:#5c3a21}input,button,select,textarea{font-family:var(--font-body)}.app{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:3rem 1.5rem;display:flex;position:relative;overflow:hidden}.app-title-section{text-align:center;z-index:10;margin-bottom:4rem}.app-title{background:linear-gradient(135deg,#8a572c 0%,#d07a3f 100%);-webkit-text-fill-color:transparent;letter-spacing:-.03em;filter:drop-shadow(0 2px 4px #0000000d);-webkit-background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:800}.app-subtitle{color:#8c6239;font-size:1rem;font-weight:500}.animals-container{z-index:4;justify-content:center;align-items:flex-start;width:900px;margin-top:-15px;display:flex;position:relative}.rope-bridge{z-index:10;transform-origin:top;background:0 0;border-bottom:5px solid #8c6239;border-radius:0 0 50% 50%/0 0 35px 35px;height:52px;transition:transform .3s;position:absolute;top:10px;left:25px;right:25px;box-shadow:0 4px 6px #5c3a210f}.rope-wind-none{animation:none!important}.rope-wind-low{animation:3.5s ease-in-out infinite alternate ropeWobbleLow}.rope-wind-medium{animation:2.5s ease-in-out infinite alternate ropeWobbleMedium}.rope-wind-high{animation:1.6s ease-in-out infinite alternate ropeWobbleHigh}@keyframes ropeWobbleLow{0%{transform:translateY(0)scaleY(1)}to{transform:translateY(1.5px)scaleY(.98)}}@keyframes ropeWobbleMedium{0%{transform:translateY(0)scaleY(1)}to{transform:translateY(3.5px)scaleY(.96)}}@keyframes ropeWobbleHigh{0%{transform:translateY(-1.5px)scaleY(1.02)}to{transform:translateY(6px)scaleY(.93)}}.panel-toggle-btn{z-index:110;font-family:var(--font-title);color:#8a572c;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffd9;border:1px solid #ffffffe6;border-radius:20px;padding:.6rem 1.4rem;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #5c3a2126}.panel-toggle-btn:hover{background:#fff;transform:translate(-50%)scale(1.05)}.panel-toggle-btn.open{bottom:1.5rem}.control-panel{-webkit-backdrop-filter:blur(12px);z-index:100;background:#ffffff80;border:1px solid #fff9;border-radius:24px;flex-direction:column;gap:.8rem;padding:1.2rem 2rem;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:4.5rem;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #5c3a2114,0 1px 3px #5c3a210a}.control-panel.closed{opacity:0;pointer-events:none;transform:translate(-50%,calc(100% + 6rem))}.control-panel:hover{background:#ffffffbf;box-shadow:0 15px 35px #5c3a2126}.control-row{justify-content:space-between;align-items:center;gap:2rem;display:flex}.control-label{color:#5c3a21;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:700}.btn-group{gap:.4rem;display:flex}.btn-control{color:#8c6239;cursor:pointer;background:#fffc;border:1px solid #f0e2d5;border-radius:10px;outline:none;padding:.4rem .8rem;font-size:.8rem;font-weight:700;transition:all .2s}.btn-control:hover{color:#5c3a21;background:#fdf5ec;border-color:#d3a27a}.btn-control.active{color:#fff;background:linear-gradient(135deg,#8a572c 0%,#b88655 100%);border-color:#8a572c;box-shadow:0 4px 10px #8a572c40}.color-picker{gap:.6rem;display:flex}.color-dot{cursor:pointer;border:2px solid #fff;border-radius:50%;width:22px;height:22px;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 5px #0000001a}.color-dot:hover{transform:scale(1.2)}.color-dot.active{transform:scale(1.2);box-shadow:0 0 0 2px #8a572c}.particles-container{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.particle{pointer-events:none;z-index:10;width:3px;height:35px;animation:linear infinite fallAnimation;position:absolute;top:-20px}.particle:before{content:"";width:100%;height:100%;animation:linear infinite dropFade;animation-duration:inherit;animation-delay:inherit;background:linear-gradient(#fff0 0%,#b4dcffcc 60%,#fff 100%);border-radius:3px;position:absolute;top:0;left:0;box-shadow:0 2px 5px #fff9}.particle:after{content:"";opacity:0;width:30px;height:10px;animation:linear infinite splashFade;animation-duration:inherit;animation-delay:inherit;border:2px solid #fff;border-radius:50%;position:absolute;bottom:-5px;left:-13.5px;box-shadow:0 0 6px #fffc,inset 0 0 4px #fff9}@keyframes fallAnimation{0%{transform:scale(var(--size,1)) translateY(-50px) translateX(0)}to{transform:scale(var(--size,1)) translateY(98vh) translateX(var(--drift,10px))}}@keyframes dropFade{0%{opacity:0}10%{opacity:1}90%{opacity:1}93%{opacity:0}to{opacity:0}}@keyframes splashFade{0%,90%{opacity:0;transform:scale(.3)}94%{opacity:1;border-width:3px;transform:scale(1.5)}to{opacity:0;border-width:.5px;transform:scale(3.5)}}@media (width<=768px){.app{padding:2rem 1rem}.app-title-section{margin-bottom:2.5rem}.app-title{font-size:2.2rem}.app-subtitle{padding:0 .5rem;font-size:.88rem}.animals-container{gap:0;width:100%;max-width:700px}.wood-wrap{max-width:720px}.control-panel{border-radius:18px;width:calc(100% - 2rem);max-width:520px;padding:1rem 1.2rem;bottom:4rem}.control-row{gap:1rem}.btn-control{padding:.35rem .6rem;font-size:.75rem}}@media (width<=480px){.app{padding:1.2rem .5rem}.app-title-section{margin-bottom:1.8rem}.app-title{font-size:1.7rem}.app-subtitle{padding:0 .8rem;font-size:.78rem;line-height:1.4}.animals-container{width:100%;max-width:100vw;transform:scale(calc(100vw / 600));transform-origin:top;margin-top:-20px}.wood-wrap{max-width:100vw;transform:scale(calc(100vw / 600));transform-origin:top;margin-top:.5rem;margin-bottom:calc(-100vw / 600 * 50px)}.wood-wrap:hover{transform:scale(.55)}.rope-bridge{left:15px;right:15px}.control-panel{border-radius:14px;gap:.5rem;width:calc(100% - 1rem);max-width:100%;padding:.7rem .8rem;bottom:4rem}.control-row{flex-wrap:wrap;justify-content:center;gap:.6rem}.control-label{text-align:center;min-width:60px;font-size:.72rem}.btn-group{flex-wrap:wrap;justify-content:center;gap:.25rem}.btn-control{border-radius:8px;padding:.3rem .5rem;font-size:.68rem}.color-dot{width:18px;height:18px}.color-picker{gap:.4rem}}@media (width<=380px){.app-title{font-size:1.4rem}.app-subtitle{font-size:.7rem}.animals-container{transform:scale(calc(100vw / 600));margin-top:-25px}.wood-wrap{transform:scale(calc(100vw / 600));margin-bottom:calc(-100vw / 600 * 60px)}.wood-wrap:hover{transform:scale(.47)}.control-panel{gap:.4rem;padding:.5rem .6rem}.btn-control{padding:.25rem .4rem;font-size:.62rem}.control-label{font-size:.65rem}}.animal-wrapper{transform-origin:top;flex-direction:column;align-items:center;width:180px;height:260px;display:flex;position:relative}.pet-position-0{margin-top:10px}.pet-position-1{margin-top:29px}.pet-position-2{margin-top:36px}.pet-position-3{margin-top:29px}.pet-position-4{margin-top:10px}.clothespin{cursor:pointer;z-index:30;transform-origin:top;background-position:50%;background-repeat:no-repeat;background-size:contain;width:18px;height:48px;transition:transform .2s;position:absolute;top:10px}.clothespin:hover{transform:scale(1.1)}.open-clip{animation:.4s cubic-bezier(.25,.46,.45,.94) forwards clipPop!important}@keyframes clipPop{0%{transform:scale(1)rotate(0)}25%{transform:scale(1.25)rotate(-10deg)}65%{transform:scale(.9)rotate(5deg)}to{transform:scale(1)rotate(0)}}.animal-container-wrapper{transform-origin:top;z-index:20;width:140px;height:210px;position:absolute;top:48px}.animal-container{background-position:top;background-repeat:no-repeat;background-size:contain;width:100%;height:100%;transition:filter .3s}.swing-none{animation:none!important}.swing-low{animation:3.5s ease-in-out infinite alternate swingLow}.swing-medium{animation:2.5s ease-in-out infinite alternate swingMedium}.swing-high{animation:1.6s ease-in-out infinite alternate swingHigh}@keyframes swingLow{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)}}@keyframes swingMedium{0%{transform:rotate(-7deg)}to{transform:rotate(7deg)}}@keyframes swingHigh{0%{transform:rotate(-14deg)}to{transform:rotate(14deg)}}.dropped{animation:2.2s ease-in-out forwards gravityFall!important}@keyframes gravityFall{0%{opacity:1;transform:translateY(0)translate(0)rotate(0)scale(1)}20%{opacity:1;transform:translateY(100px)translate(-20px)rotate(-10deg)scale(.95)}50%{opacity:.9;transform:translateY(260px)translate(25px)rotate(15deg)scale(.9)}75%{opacity:.6;transform:translateY(440px)translate(-15px)rotate(-8deg)scale(.85)}to{opacity:0;transform:translateY(620px)translate(10px)rotate(20deg)scale(.8)}}.respawn-balloon{z-index:15;border-radius:50%/40% 40% 60% 60%;justify-content:center;width:44px;height:52px;display:flex;position:absolute;bottom:100%;left:50%;transform:translate(-50%);box-shadow:inset -3px -3px 8px #00000026,0 4px 10px #0000001a}.respawn-balloon:after{content:"";background:#0003;width:1px;height:35px;position:absolute;top:100%}.respawn-balloon:before{content:"";background:#ffffff73;border-radius:50%;width:8px;height:12px;position:absolute;top:8px;left:10px;transform:rotate(-15deg)}.balloon-knot{border-left:5px solid #0000;border-right:5px solid #0000;border-bottom:6px solid var(--balloon-color);width:0;height:0;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.balloon-color-0{--balloon-color:#ffb7b2;background-color:#ffb7b2}.balloon-color-1{--balloon-color:#ffdac1;background-color:#ffdac1}.balloon-color-2{--balloon-color:#e2f0cb;background-color:#e2f0cb}.balloon-color-3{--balloon-color:#b5ead7;background-color:#b5ead7}.balloon-color-4{--balloon-color:#c7ceea;background-color:#c7ceea}.respawning{animation:2.6s cubic-bezier(.25,.8,.25,1) forwards balloonFloatDown!important}@keyframes balloonFloatDown{0%{opacity:0;transform:translateY(-500px)rotate(-10deg)}15%{opacity:1}50%{transform:translateY(-200px)rotate(5deg)}75%{transform:translateY(-70px)rotate(-3deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.clicked-bounce .animal-container{animation:.6s cubic-bezier(.175,.885,.32,1.275) clickBounce!important}@keyframes clickBounce{0%{transform:scale(1)}30%{transform:scale(1.15)translateY(-12px)}60%{transform:scale(.96)translateY(3px)}to{transform:scale(1)translateY(0)}}.animal-wrapper:hover .animal-container-wrapper{transform:scale(1.06)}.animal-wrapper:hover .animal-container{filter:drop-shadow(0 8px 12px #8c623938)}.chat-bubble{color:#5c3a21;white-space:nowrap;opacity:0;pointer-events:none;z-index:50;background:#fff;border:2px solid #f0e2d5;border-radius:14px;padding:.5rem .8rem;font-size:.8rem;font-weight:700;transition:opacity .3s cubic-bezier(.175,.885,.32,1.275),transform .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:-30px;transform:translateY(10px)scale(.8);box-shadow:0 6px 20px #5c3a211f}.chat-bubble:after{content:"";border:6px solid #0000;border-top-color:#fff;position:absolute;top:100%;left:50%;transform:translate(-50%)}.chat-bubble:before{content:"";z-index:-1;border:8px solid #0000;border-top-color:#f0e2d5;position:absolute;top:100%;left:50%;transform:translate(-50%)}.annoyed-bubble{color:#c0392b!important;opacity:1!important;background:#ffebeb!important;border-color:#fcc!important;animation:.15s ease-in-out infinite alternate bubbleShake!important;transform:translateY(0)scale(1)!important}.annoyed-bubble:after{border-color:#ffebeb #0000 #0000!important}.annoyed-bubble:before{border-color:#fcc #0000 #0000!important}@keyframes bubbleShake{0%{transform:translateY(0)rotate(-1.5deg)}to{transform:translateY(0)rotate(1.5deg)}}.clicked-spin .animal-container{animation:.8s cubic-bezier(.25,1,.5,1) forwards spin360!important}@keyframes spin360{0%{transform:rotate(0)scale(1)}30%{transform:rotate(180deg)scale(1.15)}to{transform:rotate(360deg)scale(1)}}.animal-wrapper:hover .chat-bubble{opacity:1;transform:translateY(0)scale(1)}.click-heart{-webkit-user-select:none;user-select:none;pointer-events:none;z-index:100;font-size:1.5rem;animation:1s cubic-bezier(.25,.46,.45,.94) forwards flyUpAndFade;position:absolute}@keyframes flyUpAndFade{0%{opacity:1;transform:translateY(0)scale(.5)rotate(0)}50%{opacity:.8}to{transform:translateY(-90px) scale(1.3) rotate(var(--heart-rot,15deg));opacity:0}}.drop-particle{-webkit-user-select:none;user-select:none;pointer-events:none;z-index:120;background:linear-gradient(135deg,#fff 0%,#87ceeb 100%);border-radius:0 50% 50%;width:12px;height:12px;animation:.8s cubic-bezier(.25,.46,.45,.94) forwards scatterRaindrop;position:absolute;box-shadow:inset 2px -2px 4px #0000001a,0 3px 6px #0003}@keyframes scatterRaindrop{0%{opacity:1;transform:translate(0)scale(.5)rotate(45deg)}50%{transform:translate(calc(var(--p-dx) / 2), calc(var(--p-dy) / 2 - 20px)) scale(1.2) rotate(45deg);opacity:1}to{transform:translate(var(--p-dx), var(--p-dy)) scale(.8) rotate(45deg);opacity:0}}@media (width<=480px){.chat-bubble{white-space:normal;text-align:center;border-radius:10px;max-width:140px;padding:.35rem .6rem;font-size:.65rem;top:-40px}.animal-wrapper:active .chat-bubble{opacity:1;transform:translateY(0)scale(1)}.click-heart{font-size:1.2rem}.drop-particle{font-size:1rem}.respawn-balloon{width:34px;height:40px}}@media (width<=380px){.chat-bubble{max-width:120px;padding:.3rem .5rem;font-size:.58rem}}