html { scroll-behavior: smooth; }
body { 
    background-color: #fff0f5; 
    background-image: 
        linear-gradient(rgba(255, 126, 179, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 126, 179, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    overflow-x: hidden;
    cursor: default;
}

#sakura-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

#pet-container { position: fixed; z-index: 9999; width: 100px; height: 100px; top: 50%; left: 50%; pointer-events: none; transform-origin: center bottom; }
.cat-wrapper { position: relative; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; transition: transform 0.1s; }
.cat-body { position: absolute; bottom: 10px; left: 20px; width: 60px; height: 50px; background: #fff; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); animation: breathe 3s ease-in-out infinite; transform-origin: bottom center; border: 2px solid #fff0f5; }
.cat-wrapper.running .cat-body { border-radius: 40% 60% 40% 40% / 40% 60% 40% 40%; animation: runBounce 0.3s infinite alternate; }
.cat-wrapper.sleeping .cat-body { height: 35px; width: 65px; border-radius: 50px 50px 20px 20px; transform: translateY(15px); animation: sleepBreathe 4s ease-in-out infinite; }
.cat-ear { position: absolute; top: -12px; width: 18px; height: 25px; background: #fff; border-radius: 4px 4px 0 0; border: 1px solid #fff0f5; border-bottom: none; }
.cat-ear.left { left: 5px; transform: rotate(-20deg); }
.cat-ear.right { right: 5px; transform: rotate(20deg); }
.cat-ear::after { content: ''; position: absolute; top: 5px; left: 4px; width: 10px; height: 15px; background: #ffb6c1; border-radius: 2px; opacity: 0.6; }
.cat-face { position: relative; top: 18px; left: 0; width: 100%; height: 20px; display: flex; justify-content: center; gap: 20px; }
.cat-eye { width: 6px; height: 6px; background: #444; border-radius: 50%; animation: blink 4s infinite; }
.cat-wrapper.sleeping .cat-eye { height: 2px; width: 8px; background: transparent; border-bottom: 2px solid #444; border-radius: 0; animation: none; margin-top: 5px; }
.cat-blush { position: absolute; top: 8px; width: 8px; height: 5px; background: #ffb6c1; border-radius: 50%; opacity: 0.6; }
.cat-blush.left { left: 12px; } .cat-blush.right { right: 12px; }
.cat-tail { position: absolute; bottom: 8px; right: -10px; width: 12px; height: 35px; background: #fff; border-radius: 10px; transform-origin: bottom left; transform: rotate(30deg); animation: tailWag 2s ease-in-out infinite; z-index: -1; border: 1px solid #fff0f5; }
.cat-wrapper.running .cat-tail { transform: rotate(60deg); animation: tailWag 0.5s ease-in-out infinite; }
.cat-leg { position: absolute; bottom: -4px; width: 12px; height: 10px; background: #fff; border-radius: 0 0 5px 5px; z-index: -1; }
.cat-leg.l1 { left: 10px; } .cat-leg.l2 { left: 20px; } .cat-leg.r1 { right: 20px; } .cat-leg.r2 { right: 10px; }
.cat-wrapper.running .cat-leg.l1, .cat-wrapper.running .cat-leg.r2 { animation: legMove 0.3s infinite alternate; }
.cat-wrapper.running .cat-leg.l2, .cat-wrapper.running .cat-leg.r1 { animation: legMove 0.3s infinite alternate-reverse; }
.zzz-bubble { position: absolute; top: -20px; right: 0; font-family: 'Comic Sans MS', cursive; font-size: 1rem; color: #ff7eb3; opacity: 0; }
.cat-wrapper.sleeping .zzz-bubble { animation: zzzFloat 2s ease-in-out infinite; opacity: 1; }
.pet-bubble { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background: white; border: 2px solid #ff7eb3; padding: 5px 12px; border-radius: 12px; font-size: 0.8rem; color: #884444; font-weight: bold; font-family: sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.pet-bubble::after { content:''; position: absolute; bottom:-6px; left:50%; transform:translateX(-50%); border-width:6px 6px 0; border-style:solid; border-color:#ff7eb3 transparent transparent transparent; }
.pet-bubble.show { opacity: 1; top: -50px; }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02, 0.98); } }
@keyframes runBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.1); } }
@keyframes tailWag { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(50deg); } }
@keyframes legMove { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }
@keyframes zzzFloat { 0% { transform: translateY(0) translateX(0) scale(0.8); opacity:0; } 50% { opacity:1; } 100% { transform: translateY(-20px) translateX(10px) scale(1.2); opacity:0; } }
@keyframes sleepBreathe { 0%, 100% { transform: translateY(15px) scale(1); } 50% { transform: translateY(15px) scale(1.05, 0.95); } }
@keyframes petJump { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.1, 0.9); } 100% { transform: translateY(0) scale(1); } }

.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
.gradient-text { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(to right, #ff7eb3, #ff758c); }