/* ============================================================
   VIRTUAL PET APP
   Tamagotchi-style pet care game, Windows 95 themed
   ============================================================ */

.pet-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 8px;
    height: 100%;
    overflow: auto;
}

/* ---- Pet Info Section ---- */

.pet-info-section {
    text-align: center;
    width: 100%;
}

.pet-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
}

.pet-age-mood {
    font-size: var(--win95-font-size);
    color: var(--win95-gray);
}

.pet-mood-text {
    font-style: italic;
}

/* ---- Pet Display Area ---- */

.pet-display-area {
    width: 100%;
    max-width: 240px;
    height: 120px;
    background:
        repeating-conic-gradient(
            #f0f0f0 0% 25%, #e8e8e8 0% 50%
        ) 50% / 8px 8px;
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pet-display-area.pet-dead {
    filter: grayscale(1);
}

/* ---- Pet Character ---- */

.pet-character {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.pet-emoji {
    display: none;
}

.pet-face {
    font-family: var(--win95-font-mono);
    font-size: 24px;
    text-align: center;
}

/* ---- Bouncing Animation ---- */

.pet-bouncing .pet-character {
    animation: petBounce 0.6s ease-in-out infinite;
}

@keyframes petBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ---- Thought Bubble ---- */

.pet-thought-bubble {
    position: absolute;
    top: 8px;
    right: 16px;
    background: var(--win95-white);
    border: 1px solid var(--win95-black);
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 14px;
    font-family: var(--win95-font);
    z-index: 2;
    min-width: 28px;
    text-align: center;
}

.pet-thought-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 12px;
    width: 6px;
    height: 6px;
    background: var(--win95-white);
    border: 1px solid var(--win95-black);
    border-radius: 50%;
}

.pet-thought-bubble::before {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 8px;
    width: 4px;
    height: 4px;
    background: var(--win95-white);
    border: 1px solid var(--win95-black);
    border-radius: 50%;
}

/* ---- Sleeping Animation ---- */

.pet-sleep-zzz {
    position: absolute;
    top: 10px;
    right: 24px;
    pointer-events: none;
}

.zzz {
    position: absolute;
    font-family: var(--win95-font-mono);
    font-weight: bold;
    color: var(--win95-navy);
    opacity: 0;
    animation: floatZzz 2s ease-in-out infinite;
}

.zzz1 {
    font-size: 10px;
    right: 0;
    animation-delay: 0s;
}

.zzz2 {
    font-size: 14px;
    right: 8px;
    animation-delay: 0.5s;
}

.zzz3 {
    font-size: 18px;
    right: 16px;
    animation-delay: 1s;
}

@keyframes floatZzz {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.pet-display-area.pet-sleeping {
    background:
        repeating-conic-gradient(
            #d8d8e8 0% 25%, #d0d0e0 0% 50%
        ) 50% / 8px 8px;
}

/* ---- Dead Overlay ---- */

.pet-dead-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
}

.pet-dead-message {
    font-size: var(--win95-font-size);
    color: var(--win95-gray);
    text-align: center;
    font-style: italic;
}

/* ---- Stat Bars ---- */

.pet-stats-section {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pet-stat-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pet-stat-label {
    width: 28px;
    font-size: 10px;
    font-family: var(--win95-font-mono);
    text-align: right;
    flex-shrink: 0;
    font-weight: bold;
}

.pet-stat-bar {
    flex: 1;
    height: 14px;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 2px;
}

.pet-stat-bar-fill {
    height: 100%;
    background: repeating-linear-gradient(
        to right,
        #008000 0px,
        #008000 8px,
        transparent 8px,
        transparent 10px
    );
    transition: width 0.3s ease;
}

.pet-stat-value {
    width: 24px;
    font-size: 10px;
    text-align: right;
    flex-shrink: 0;
    font-family: var(--win95-font-mono);
}

/* ---- Action Buttons ---- */

.pet-actions-section {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    width: 100%;
    max-width: 260px;
}

.pet-action-btn {
    min-width: 60px;
    padding: 2px 6px;
    font-size: var(--win95-font-size);
    white-space: nowrap;
}

/* ---- Desktop & Titlebar Icon ---- */

.icon-pet {
    position: relative;
}

.icon-pet::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
}

/* Small icon variant for title bar */
.icon-pet.icon-sm::before {
    width: 14px;
    height: 14px;
}