html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    user-select: none;
    -webkit-app-region: drag;
}

#pet-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
}

#pet-container img {
    width: 160px;
    height: 160px;
    image-rendering: pixelated;
    transition: transform 0.2s ease-in-out;
}

/* --- ANIMATIONS --- */

/* Idle Animation */
.idle .body-group {
    animation: idle-float 0.8s ease-in-out infinite alternate;
}

@keyframes idle-float {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

.idle .eye {
    animation: blink 3s infinite;
}

@keyframes blink {
    0%, 95%, 100% { height: 12px; transform: translateY(0); }
    97% { height: 0px; transform: translateY(6px); }
}

/* Walk Animation */
.walk .leg-left { animation: walk-leg 0.3s infinite alternate; }
.walk .leg-right { animation: walk-leg 0.3s infinite alternate reverse; }
.walk .leg-mid { animation: walk-leg 0.3s infinite alternate 0.15s; }

@keyframes walk-leg {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

/* Crab Animation */
.crab .body-group {
    animation: crab-tilt 0.2s ease-in-out infinite alternate;
}

@keyframes crab-tilt {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}

.crab .leg-left { animation: walk-leg 0.4s infinite alternate; }
.crab .leg-right { animation: walk-leg 0.4s infinite alternate reverse; }

/* Bounce Animation */
.bounce .body-group {
    animation: bounce-jump 0.4s ease-out infinite alternate;
}

@keyframes bounce-jump {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}

.bounce .leg {
    animation: squash 0.4s infinite alternate;
}

@keyframes squash {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.7); transform-origin: bottom; }
}

/* Spin Animation */
.spin #claude-pet {
    animation: spin-rotate 0.6s ease-in-out infinite;
}

@keyframes spin-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Utilities */
.flip-h {
    transform: scaleX(-1);
}