/* ===== PET DISPLAY FEATURE ===== */
/* Pet display area, image container, and mood display */

/* Pet Display Area */
#pet-display-area {
    position: relative;
    flex-grow: 1;
    background: var(--color-background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    animation: handicam-figure8 8s ease-in-out infinite;
}

/* Pet Image Container */
#pet-image-container {
    position: relative;
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: breathing 3s infinite ease-in-out;
}

.pet-interaction-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pet-interaction-wrapper img {
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: width 0.3s ease-out;
    filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.5));
}

.pet-interaction-wrapper img.pet-clickable {
}

/* Mood Display */
#pet-mood-display {
    position: absolute;
    bottom: var(--spacing-medium);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-small) var(--spacing-medium);
    background: rgba(0, 0, 0, 0.45);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    box-shadow: var(--elevation-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
}

.mood-text-content {
    display: inline-block;
}

.mood-grade-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Grade color mapping: F (black) -> D (red) -> C (orange) -> B (green) -> A (blue) -> S (blue) */
.mood-grade-F {
    background: #000000; /* Black */
}

.mood-grade-D {
    background: #d32f2f; /* Red */
}

.mood-grade-C {
    background: #ff9800; /* Orange */
}

.mood-grade-B {
    background: #4caf50; /* Green */
}

.mood-grade-A {
    background: #2196f3; /* Blue */
}

.mood-grade-S {
    background: #1976d2; /* Darker blue for S rank */
}

/* Responsive adjustments */
@media (max-width: 500px) {
    /* Adjust pet image container for mobile */
    #pet-image-container {
        height: 65%;
    }
}

@media (max-width: 375px) {
    /* Adjust pet image container */
    #pet-image-container {
        height: 60%;
    }
    
    /* Adjust pet name display */
    #pet-name-display {
        font-size: var(--font-size-md);
    }
}