@import"https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap";*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}#app{position:relative;font-family:Fredoka One,cursive;text-align:center;color:#333;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}.bg-layer{position:fixed;inset:0;opacity:0;transition:opacity .8s ease;z-index:-2}.bg-layer.visible{opacity:1}.floaters{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.floater{position:absolute;opacity:.18;animation:drift 15s ease-in-out infinite alternate}@keyframes drift{0%{transform:translateY(0) rotate(-12deg)}to{transform:translateY(-30px) rotate(12deg)}}.mute-button{position:fixed;top:calc(env(safe-area-inset-top,0px) + .75rem);right:.75rem;width:44px;height:44px;border:none;border-radius:50%;background:#ffffffb3;font-size:1.3rem;cursor:pointer;box-shadow:0 3px 10px #0000001f;transition:transform .2s ease;z-index:20}.mute-button:active{transform:scale(.9)}.header{margin-bottom:1.5rem;padding:0 1rem}.title{font-size:clamp(1.7rem,7vw,3rem);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.2);letter-spacing:1px;line-height:1.2;margin:0}.wiggle{display:inline-block;animation:wiggle 2.2s ease-in-out infinite}.wiggle-delayed{animation-delay:1.1s}@keyframes wiggle{0%,to{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-4px)}}.dog-container{position:relative;margin-bottom:2rem;width:100%;max-width:500px}.dog-frame{position:relative;border:clamp(5px,2vw,10px) solid #fff;border-radius:clamp(10px,3vw,20px);box-shadow:0 10px 25px #0000002e;background:#fff;padding:clamp(10px,3vw,20px);transform:rotate(var(--rot, -3deg));transition:transform .3s ease;width:100%;box-sizing:border-box}.dog-frame img{max-width:100%;height:auto;max-height:55vh;border-radius:10px;display:block;margin:0 auto;transition:opacity .3s ease}.dog-frame img.dimmed{opacity:.35}.dog-frame img.pop-in{animation:pop-in .45s cubic-bezier(.34,1.56,.64,1) both}@keyframes pop-in{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:240px;border:3px dashed #f3c1d3;border-radius:10px;color:#c98aa5;font-size:clamp(1rem,4vw,1.3rem);line-height:1.5;padding:1rem}.placeholder p{margin:0}.placeholder-paw{font-size:3rem;animation:paw-pulse 1.8s ease-in-out infinite}@keyframes paw-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.heart-button{position:absolute;bottom:14px;right:14px;width:44px;height:44px;border:none;border-radius:50%;background:#ffffffd9;font-size:1.3rem;cursor:pointer;box-shadow:0 3px 10px #00000026;transition:transform .15s ease}.heart-button:active{transform:scale(.85)}.burst-heart{position:absolute;bottom:28px;pointer-events:none;animation:float-up 1s ease-out both}@keyframes float-up{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:1}to{transform:translateY(-110px) scale(1.1);opacity:0}}.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10}.confetti-piece{position:absolute;top:-8vh;animation:confetti-fall linear both}@keyframes confetti-fall{0%{transform:translateY(0) translate(0) rotate(0)}to{transform:translateY(115vh) translate(var(--drift, 0px)) rotate(340deg)}}.button-container{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px;padding:0 1rem}.dog-button{color:#fff;border:none;padding:clamp(12px,3vw,15px) clamp(20px,4vw,30px);border-radius:50px;font-size:clamp(1rem,4vw,1.4rem);font-family:Fredoka One,cursive;text-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer;box-shadow:0 5px 15px #0000002e;transition:transform .2s ease,box-shadow .2s ease;outline:none;width:100%;white-space:nowrap}.btn-corgi{background-image:linear-gradient(135deg,#ff7eb3,#ff5e8a)}.btn-beagle{background-image:linear-gradient(135deg,#56cfe1,#5e60ce)}.btn-random{background-image:linear-gradient(135deg,#c471f5,#fa71cd)}.dog-button:active{transform:scale(.95);box-shadow:0 3px 8px #00000026}.spinner{position:absolute;top:50%;left:50%;width:clamp(30px,5vw,50px);height:clamp(30px,5vw,50px);border:clamp(3px,1vw,5px) solid rgba(255,105,180,.3);border-top-color:#ff69b4;border-radius:50%;animation:spin 1s linear infinite;transform:translate(-50%,-50%)}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media (hover: hover){.dog-frame:hover{transform:rotate(0) scale(1.02)}.dog-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #00000040}.heart-button:hover,.mute-button:hover{transform:scale(1.1)}}@media (min-width: 768px){.button-container{flex-direction:row;justify-content:center;align-items:center;max-width:none;gap:1rem}.dog-button{width:auto;min-width:200px}.dog-frame{max-width:400px;margin:0 auto}.dog-frame img{max-height:400px}}@media (prefers-reduced-motion: reduce){.wiggle,.floater,.placeholder-paw{animation:none}.dog-frame img.pop-in{animation-duration:.01s}}