/* Besties Virtual Pet Styles */

:root {
    --pet-color: #FFB6C1;
    --pet-color-dark: #FF91A4;
    --pet-cheek: #FF6B8A;
    --pet-eye: #3D9970;
    --pet-eye-color: #3D9970;
    --pet-highlight: #FFFFFF;
}

body {
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 40px;
    transition: background 1s ease;
}

/* ========== TIME-OF-DAY BACKGROUNDS ========== */

/* Morning (6am - 12pm) - Sunrise with cute clouds and hills */
body.time-morning {
    background:
        /* Sun */
        radial-gradient(circle at 85% 25%, #FFE87C 0%, #FFE87C 30px, transparent 30px),
        radial-gradient(circle at 85% 25%, rgba(255,232,124,0.4) 0%, transparent 60px),
        /* Fluffy clouds */
        radial-gradient(ellipse 60px 35px at 15% 20%, white 50%, transparent 50%),
        radial-gradient(ellipse 45px 30px at 10% 22%, white 50%, transparent 50%),
        radial-gradient(ellipse 50px 28px at 22% 18%, white 50%, transparent 50%),
        radial-gradient(ellipse 55px 32px at 55% 15%, white 50%, transparent 50%),
        radial-gradient(ellipse 40px 25px at 50% 17%, white 50%, transparent 50%),
        radial-gradient(ellipse 48px 28px at 62% 13%, white 50%, transparent 50%),
        /* Cute rolling hills */
        radial-gradient(ellipse 120% 80px at 20% 100%, #90EE90 70%, transparent 70%),
        radial-gradient(ellipse 100% 60px at 70% 100%, #98FB98 70%, transparent 70%),
        radial-gradient(ellipse 140% 70px at 50% 100%, #7CFC00 70%, transparent 70%),
        /* Sky gradient */
        linear-gradient(180deg, #87CEEB 0%, #FFB6C1 30%, #FFDAB9 60%, #87CEEB 100%);
    background-attachment: fixed;
}

/* Afternoon (12pm - 6pm) - Bright blue sky with puffy clouds */
body.time-afternoon {
    background:
        /* Bright sun */
        radial-gradient(circle at 75% 15%, #FFF59D 0%, #FFF59D 35px, transparent 35px),
        radial-gradient(circle at 75% 15%, rgba(255,245,157,0.3) 0%, transparent 80px),
        /* Fluffy clouds */
        radial-gradient(ellipse 70px 40px at 20% 25%, white 50%, transparent 50%),
        radial-gradient(ellipse 50px 35px at 12% 27%, white 50%, transparent 50%),
        radial-gradient(ellipse 55px 32px at 28% 22%, white 50%, transparent 50%),
        radial-gradient(ellipse 65px 38px at 60% 18%, white 50%, transparent 50%),
        radial-gradient(ellipse 45px 30px at 52% 20%, white 50%, transparent 50%),
        radial-gradient(ellipse 58px 35px at 70% 15%, white 50%, transparent 50%),
        /* Green hills with flowers hint */
        radial-gradient(ellipse 130% 90px at 15% 100%, #32CD32 70%, transparent 70%),
        radial-gradient(ellipse 110% 70px at 80% 100%, #3CB371 70%, transparent 70%),
        radial-gradient(ellipse 150% 80px at 45% 100%, #228B22 70%, transparent 70%),
        /* Blue sky */
        linear-gradient(180deg, #4FC3F7 0%, #81D4FA 40%, #B3E5FC 80%, #E1F5FE 100%);
    background-attachment: fixed;
}

/* Evening (6pm - 9pm) - Sunset with warm colors */
body.time-evening {
    background:
        /* Setting sun */
        radial-gradient(circle at 20% 60%, #FF6B35 0%, #FF6B35 40px, transparent 40px),
        radial-gradient(circle at 20% 60%, rgba(255,107,53,0.5) 0%, transparent 80px),
        /* Silhouette clouds */
        radial-gradient(ellipse 80px 45px at 70% 40%, rgba(0,0,0,0.15) 50%, transparent 50%),
        radial-gradient(ellipse 60px 35px at 62% 42%, rgba(0,0,0,0.15) 50%, transparent 50%),
        radial-gradient(ellipse 70px 40px at 80% 38%, rgba(0,0,0,0.15) 50%, transparent 50%),
        /* Purple/pink clouds */
        radial-gradient(ellipse 65px 38px at 45% 30%, rgba(255,182,193,0.6) 50%, transparent 50%),
        radial-gradient(ellipse 50px 30px at 38% 32%, rgba(255,182,193,0.6) 50%, transparent 50%),
        /* Dark hills silhouette */
        radial-gradient(ellipse 130% 100px at 10% 100%, #2d1b4e 70%, transparent 70%),
        radial-gradient(ellipse 110% 80px at 85% 100%, #1a0f30 70%, transparent 70%),
        radial-gradient(ellipse 160% 90px at 50% 100%, #3d2660 70%, transparent 70%),
        /* Sunset gradient */
        linear-gradient(180deg, #1a0533 0%, #4a1259 15%, #7b2d5b 30%, #d4576b 50%, #ff8c69 70%, #ffd194 90%);
    background-attachment: fixed;
}

/* Night (9pm - 6am) - Starry night with moon */
body.time-night {
    background:
        /* Moon */
        radial-gradient(circle at 80% 20%, #F5F5DC 0%, #F5F5DC 25px, transparent 25px),
        radial-gradient(circle at 80% 20%, rgba(245,245,220,0.3) 0%, transparent 50px),
        /* Moon craters hint */
        radial-gradient(circle at 78% 18%, rgba(0,0,0,0.05) 5px, transparent 5px),
        radial-gradient(circle at 82% 22%, rgba(0,0,0,0.05) 3px, transparent 3px),
        /* Stars - different sizes */
        radial-gradient(circle at 10% 15%, white 2px, transparent 2px),
        radial-gradient(circle at 25% 8%, white 1px, transparent 1px),
        radial-gradient(circle at 40% 20%, white 2px, transparent 2px),
        radial-gradient(circle at 55% 5%, white 1px, transparent 1px),
        radial-gradient(circle at 15% 35%, white 1px, transparent 1px),
        radial-gradient(circle at 35% 30%, white 2px, transparent 2px),
        radial-gradient(circle at 60% 35%, white 1px, transparent 1px),
        radial-gradient(circle at 90% 40%, white 2px, transparent 2px),
        radial-gradient(circle at 5% 50%, white 1px, transparent 1px),
        radial-gradient(circle at 45% 45%, white 1px, transparent 1px),
        radial-gradient(circle at 70% 10%, white 1px, transparent 1px),
        radial-gradient(circle at 95% 25%, white 2px, transparent 2px),
        /* Twinkling stars (brighter) */
        radial-gradient(circle at 20% 25%, #fffacd 3px, transparent 3px),
        radial-gradient(circle at 65% 15%, #fffacd 3px, transparent 3px),
        radial-gradient(circle at 50% 40%, #fffacd 2px, transparent 2px),
        /* Sleeping hills */
        radial-gradient(ellipse 130% 80px at 15% 100%, #1a1a2e 70%, transparent 70%),
        radial-gradient(ellipse 100% 60px at 75% 100%, #16213e 70%, transparent 70%),
        radial-gradient(ellipse 150% 70px at 45% 100%, #0f0f23 70%, transparent 70%),
        /* Night sky */
        linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 40%, #2a2a5a 100%);
    background-attachment: fixed;
}

/* Default/fallback - same as afternoon */
body:not(.time-morning):not(.time-afternoon):not(.time-evening):not(.time-night) {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%);
}

/* ========== CUTE BACKGROUND TREES ========== */

body::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    z-index: -1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background:
        /* Tree 1 (left) - trunk */
        linear-gradient(to top, #8B5A2B 0%, #A0522D 100%) no-repeat 8% calc(100% - 30px) / 14px 45px,
        /* Tree 1 - foliage layers */
        radial-gradient(ellipse 35px 30px at 8% calc(100% - 65px), #228B22 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 6% calc(100% - 80px), #2E8B2E 70%, transparent 70%),
        radial-gradient(ellipse 30px 26px at 10% calc(100% - 78px), #32CD32 70%, transparent 70%),
        radial-gradient(ellipse 22px 20px at 8% calc(100% - 95px), #3CB371 70%, transparent 70%),

        /* Tree 2 (left-center) - trunk */
        linear-gradient(to top, #8B4513 0%, #A0522D 100%) no-repeat 25% calc(100% - 25px) / 12px 38px,
        /* Tree 2 - foliage */
        radial-gradient(ellipse 30px 26px at 25% calc(100% - 55px), #2E8B2E 70%, transparent 70%),
        radial-gradient(ellipse 25px 22px at 23% calc(100% - 70px), #228B22 70%, transparent 70%),
        radial-gradient(ellipse 26px 23px at 27% calc(100% - 68px), #32CD32 70%, transparent 70%),
        radial-gradient(ellipse 18px 17px at 25% calc(100% - 82px), #3CB371 70%, transparent 70%),

        /* Tree 3 (right-center) - trunk */
        linear-gradient(to top, #8B5A2B 0%, #A0522D 100%) no-repeat 75% calc(100% - 28px) / 13px 42px,
        /* Tree 3 - foliage */
        radial-gradient(ellipse 32px 28px at 75% calc(100% - 60px), #228B22 70%, transparent 70%),
        radial-gradient(ellipse 26px 24px at 73% calc(100% - 75px), #2E8B2E 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 77% calc(100% - 73px), #32CD32 70%, transparent 70%),
        radial-gradient(ellipse 20px 19px at 75% calc(100% - 88px), #3CB371 70%, transparent 70%),

        /* Tree 4 (right) - trunk */
        linear-gradient(to top, #8B4513 0%, #A0522D 100%) no-repeat 92% calc(100% - 32px) / 15px 48px,
        /* Tree 4 - foliage */
        radial-gradient(ellipse 38px 32px at 92% calc(100% - 68px), #2E8B2E 70%, transparent 70%),
        radial-gradient(ellipse 30px 27px at 90% calc(100% - 85px), #228B22 70%, transparent 70%),
        radial-gradient(ellipse 32px 28px at 94% calc(100% - 82px), #32CD32 70%, transparent 70%),
        radial-gradient(ellipse 24px 22px at 92% calc(100% - 100px), #3CB371 70%, transparent 70%);
}

/* Darker trees for evening */
body.time-evening::before {
    background:
        /* Tree 1 (left) - trunk */
        linear-gradient(to top, #4a3728 0%, #5d4037 100%) no-repeat 8% calc(100% - 30px) / 14px 45px,
        /* Tree 1 - foliage */
        radial-gradient(ellipse 35px 30px at 8% calc(100% - 65px), #1a472a 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 6% calc(100% - 80px), #1e5631 70%, transparent 70%),
        radial-gradient(ellipse 30px 26px at 10% calc(100% - 78px), #22633a 70%, transparent 70%),
        radial-gradient(ellipse 22px 20px at 8% calc(100% - 95px), #2a7344 70%, transparent 70%),

        /* Tree 2 */
        linear-gradient(to top, #3e2723 0%, #4e342e 100%) no-repeat 25% calc(100% - 25px) / 12px 38px,
        radial-gradient(ellipse 30px 26px at 25% calc(100% - 55px), #1e5631 70%, transparent 70%),
        radial-gradient(ellipse 25px 22px at 23% calc(100% - 70px), #1a472a 70%, transparent 70%),
        radial-gradient(ellipse 26px 23px at 27% calc(100% - 68px), #22633a 70%, transparent 70%),
        radial-gradient(ellipse 18px 17px at 25% calc(100% - 82px), #2a7344 70%, transparent 70%),

        /* Tree 3 */
        linear-gradient(to top, #4a3728 0%, #5d4037 100%) no-repeat 75% calc(100% - 28px) / 13px 42px,
        radial-gradient(ellipse 32px 28px at 75% calc(100% - 60px), #1a472a 70%, transparent 70%),
        radial-gradient(ellipse 26px 24px at 73% calc(100% - 75px), #1e5631 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 77% calc(100% - 73px), #22633a 70%, transparent 70%),
        radial-gradient(ellipse 20px 19px at 75% calc(100% - 88px), #2a7344 70%, transparent 70%),

        /* Tree 4 */
        linear-gradient(to top, #3e2723 0%, #4e342e 100%) no-repeat 92% calc(100% - 32px) / 15px 48px,
        radial-gradient(ellipse 38px 32px at 92% calc(100% - 68px), #1e5631 70%, transparent 70%),
        radial-gradient(ellipse 30px 27px at 90% calc(100% - 85px), #1a472a 70%, transparent 70%),
        radial-gradient(ellipse 32px 28px at 94% calc(100% - 82px), #22633a 70%, transparent 70%),
        radial-gradient(ellipse 24px 22px at 92% calc(100% - 100px), #2a7344 70%, transparent 70%);
}

/* Silhouette trees for night */
body.time-night::before {
    background:
        /* Tree 1 - trunk */
        linear-gradient(to top, #0d0d1a 0%, #151528 100%) no-repeat 8% calc(100% - 30px) / 14px 45px,
        /* Tree 1 - foliage */
        radial-gradient(ellipse 35px 30px at 8% calc(100% - 65px), #0f0f20 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 6% calc(100% - 80px), #121225 70%, transparent 70%),
        radial-gradient(ellipse 30px 26px at 10% calc(100% - 78px), #14142a 70%, transparent 70%),
        radial-gradient(ellipse 22px 20px at 8% calc(100% - 95px), #18183a 70%, transparent 70%),

        /* Tree 2 */
        linear-gradient(to top, #0a0a15 0%, #101020 100%) no-repeat 25% calc(100% - 25px) / 12px 38px,
        radial-gradient(ellipse 30px 26px at 25% calc(100% - 55px), #121225 70%, transparent 70%),
        radial-gradient(ellipse 25px 22px at 23% calc(100% - 70px), #0f0f20 70%, transparent 70%),
        radial-gradient(ellipse 26px 23px at 27% calc(100% - 68px), #14142a 70%, transparent 70%),
        radial-gradient(ellipse 18px 17px at 25% calc(100% - 82px), #18183a 70%, transparent 70%),

        /* Tree 3 */
        linear-gradient(to top, #0d0d1a 0%, #151528 100%) no-repeat 75% calc(100% - 28px) / 13px 42px,
        radial-gradient(ellipse 32px 28px at 75% calc(100% - 60px), #0f0f20 70%, transparent 70%),
        radial-gradient(ellipse 26px 24px at 73% calc(100% - 75px), #121225 70%, transparent 70%),
        radial-gradient(ellipse 28px 25px at 77% calc(100% - 73px), #14142a 70%, transparent 70%),
        radial-gradient(ellipse 20px 19px at 75% calc(100% - 88px), #18183a 70%, transparent 70%),

        /* Tree 4 */
        linear-gradient(to top, #0a0a15 0%, #101020 100%) no-repeat 92% calc(100% - 32px) / 15px 48px,
        radial-gradient(ellipse 38px 32px at 92% calc(100% - 68px), #121225 70%, transparent 70%),
        radial-gradient(ellipse 30px 27px at 90% calc(100% - 85px), #0f0f20 70%, transparent 70%),
        radial-gradient(ellipse 32px 28px at 94% calc(100% - 82px), #14142a 70%, transparent 70%),
        radial-gradient(ellipse 24px 22px at 92% calc(100% - 100px), #18183a 70%, transparent 70%);
}

/* ========== CUTE FLYING BIRDS ========== */

.sky-birds {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bird {
    position: absolute;
}

/* Curved seagull-style bird using box-shadow technique */
.bird::before,
.bird::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    background: transparent;
    border-radius: 80% 80% 0 0;
    border-top: 3px solid #444;
}

.bird::before {
    transform: rotate(-25deg);
    left: -14px;
    top: 4px;
}

.bird::after {
    transform: rotate(25deg);
    left: 12px;
    top: 4px;
}

/* Position birds at different locations */
.bird-1 { top: 10%; left: 8%; }
.bird-2 { top: 20%; left: 25%; }
.bird-3 { top: 6%; left: 60%; }
.bird-4 { top: 16%; left: 78%; }
.bird-5 { top: 12%; left: 92%; }

/* Smaller distant birds */
.bird-3::before,
.bird-3::after,
.bird-5::before,
.bird-5::after {
    width: 20px;
    height: 7px;
    border-width: 2px;
}

.bird-3::before { left: -9px; top: 3px; }
.bird-3::after { left: 8px; top: 3px; }
.bird-5::before { left: -9px; top: 3px; }
.bird-5::after { left: 8px; top: 3px; }

/* Larger closer bird */
.bird-2::before,
.bird-2::after {
    width: 40px;
    height: 14px;
    border-width: 4px;
}

.bird-2::before { left: -20px; top: 5px; }
.bird-2::after { left: 16px; top: 5px; }

/* Evening - darker purple birds */
body.time-evening .bird::before,
body.time-evening .bird::after {
    border-top-color: #2d1b4e;
}

/* Night - hide birds (sleeping) */
body.time-night .sky-birds {
    display: none;
}

/* Gentle floating animation */
@keyframes bird-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.bird-1 { animation: bird-float 3s ease-in-out infinite; }
.bird-2 { animation: bird-float 4s ease-in-out infinite 0.5s; }
.bird-3 { animation: bird-float 3.5s ease-in-out infinite 1s; }
.bird-4 { animation: bird-float 4.5s ease-in-out infinite 0.3s; }
.bird-5 { animation: bird-float 3s ease-in-out infinite 0.8s; }

/* Card flip container - provides perspective */
.besties-card-container {
    perspective: 1000px;
}

.besties-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.besties-card.flipped {
    transform: rotateY(180deg);
}

/* Hide card-front when flipped */
.besties-card.flipped .card-front {
    pointer-events: none;
}

.card-front,
.card-back {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front {
    position: relative;
}

.card-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Whiteboard header on back of card */
.whiteboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.whiteboard-tools {
    display: flex;
    gap: 6px;
}

.whiteboard-tools .btn {
    padding: 4px 8px;
    font-size: 1.1rem;
}

.whiteboard-tools .btn.active {
    background-color: #FF6B8A;
    border-color: #FF6B8A;
    color: white;
}

.whiteboard-actions {
    display: flex;
    gap: 8px;
}

/* Canvas container fills remaining space */
.whiteboard-canvas-container {
    flex: 1;
    position: relative;
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 12px;
    overflow: hidden;
}

.whiteboard-canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

h1 {
    color: #FF6B8A;
    font-weight: 700;
    font-size: 1.8rem;
}

/* ========== CUTE ANIME CAT STYLES ========== */

.pet-container {
    padding: 30px 15px;
    position: relative;
    background-image: url('/besties/img/cat-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.pet-wrapper {
    position: relative;
    width: 160px;
    height: 210px;
    margin: 0 auto;
    z-index: 2;
    /* Strong drop shadow to make cat pop from background */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.15));
}

/* Shadow under pet */
.pet-wrapper::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

/* ===== BODY - Elegant sitting cat body ===== */
.pet-body {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 85px;
    height: 90px;
    background: linear-gradient(180deg, var(--pet-color) 0%, var(--pet-color) 40%, #fff9f5 100%);
    border-radius: 45% 45% 48% 48% / 35% 35% 50% 50%;
    z-index: 2;
    box-shadow:
        inset -10px 0 20px rgba(0,0,0,0.05),
        inset 10px 0 20px rgba(255,255,255,0.3);
}

/* Fluffy chest fur */
.pet-chest-patch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 70px;
    background: radial-gradient(ellipse at 50% 30%, #ffffff 0%, #fff9f5 50%, transparent 70%);
    border-radius: 50% 50% 45% 45%;
}

/* ===== HEAD - Round anime cat face ===== */
.pet-head {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 110px;
    background: var(--pet-color);
    border-radius: 50% 50% 45% 45% / 52% 52% 42% 42%;
    z-index: 5;
    box-shadow:
        inset -8px 0 15px rgba(0,0,0,0.05),
        inset 8px 0 15px rgba(255,255,255,0.2);
    animation: headBreathe 4s ease-in-out infinite;
}

/* White muzzle area - cat's lighter snout */
.pet-head::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 35px;
    background: radial-gradient(ellipse at 50% 60%, #ffffff 0%, #fffaf7 60%, transparent 80%);
    border-radius: 45% 45% 50% 50%;
    z-index: 1;
}


@keyframes headBreathe {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.015); }
}

/* Pattern overlay on head */
.pet-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50% 50% 45% 45% / 52% 52% 42% 42%;
    pointer-events: none;
    z-index: 1;
}

/* ========== REALISTIC CAT PATTERNS ========== */

/* Pattern: Tabby - Classic mackerel stripes */
.pet-head.pattern-tabby .pet-pattern-overlay {
    background:
        /* Dorsal stripe down spine */
        linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 100%) no-repeat,
        /* Left side stripes - vertical fishbone pattern */
        linear-gradient(170deg, transparent 30%, rgba(0,0,0,0.2) 32%, rgba(0,0,0,0.2) 35%, transparent 37%) no-repeat,
        linear-gradient(168deg, transparent 42%, rgba(0,0,0,0.18) 44%, rgba(0,0,0,0.18) 47%, transparent 49%) no-repeat,
        linear-gradient(172deg, transparent 54%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.2) 59%, transparent 61%) no-repeat,
        linear-gradient(166deg, transparent 66%, rgba(0,0,0,0.18) 68%, rgba(0,0,0,0.18) 71%, transparent 73%) no-repeat,
        /* Right side stripes */
        linear-gradient(190deg, transparent 30%, rgba(0,0,0,0.2) 32%, rgba(0,0,0,0.2) 35%, transparent 37%) no-repeat,
        linear-gradient(192deg, transparent 42%, rgba(0,0,0,0.18) 44%, rgba(0,0,0,0.18) 47%, transparent 49%) no-repeat,
        linear-gradient(188deg, transparent 54%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.2) 59%, transparent 61%) no-repeat,
        linear-gradient(194deg, transparent 66%, rgba(0,0,0,0.18) 68%, rgba(0,0,0,0.18) 71%, transparent 73%) no-repeat;
    background-size:
        6px 55%,
        50% 100%, 50% 100%, 50% 100%, 50% 100%,
        50% 100%, 50% 100%, 50% 100%, 50% 100%;
    background-position:
        50% 0%,
        0% 0%, 0% 0%, 0% 0%, 0% 0%,
        100% 0%, 100% 0%, 100% 0%, 100% 0%;
}

/* Pattern: Tuxedo - White chest, belly, and paws */
.pet-head.pattern-tuxedo .pet-pattern-overlay {
    background:
        /* White chest/belly - large bib */
        radial-gradient(ellipse 50% 70% at 50% 90%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 50%, transparent 70%),
        /* White chin */
        radial-gradient(ellipse 30% 25% at 50% 100%, rgba(255,255,255,0.8) 0%, transparent 70%),
        /* White inner chest highlight */
        radial-gradient(ellipse 25% 40% at 50% 85%, rgba(255,255,255,0.9) 0%, transparent 60%);
}

/* Pattern: Calico - Orange, black, and white patches */
.pet-head.pattern-calico .pet-pattern-overlay {
    background:
        /* White base patches */
        radial-gradient(ellipse 40% 50% at 50% 85%, rgba(255,255,255,0.7) 0%, transparent 60%),
        /* Orange/ginger patches */
        radial-gradient(ellipse 35% 30% at 15% 30%, rgba(232,168,87,0.6) 0%, rgba(232,168,87,0.3) 50%, transparent 70%),
        radial-gradient(ellipse 28% 35% at 75% 70%, rgba(232,168,87,0.55) 0%, rgba(232,168,87,0.25) 50%, transparent 70%),
        /* Black/dark patches */
        radial-gradient(ellipse 30% 40% at 85% 25%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, transparent 70%),
        radial-gradient(ellipse 25% 30% at 25% 65%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 50%, transparent 70%),
        radial-gradient(ellipse 20% 25% at 60% 40%, rgba(0,0,0,0.25) 0%, transparent 70%);
}

/* Pattern: Spotted - Bengal/Leopard rosettes */
.pet-head.pattern-spotted .pet-pattern-overlay {
    background:
        /* Large rosettes with lighter centers */
        radial-gradient(ellipse 16px 20px at 22% 28%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.1) 50%, transparent 65%),
        radial-gradient(ellipse 18px 15px at 72% 22%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.1) 50%, transparent 65%),
        radial-gradient(ellipse 14px 18px at 50% 50%, rgba(0,0,0,0.28) 35%, rgba(0,0,0,0.08) 50%, transparent 65%),
        radial-gradient(ellipse 16px 14px at 18% 72%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.1) 50%, transparent 65%),
        radial-gradient(ellipse 17px 19px at 78% 68%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.1) 50%, transparent 65%),
        /* Smaller solid spots */
        radial-gradient(circle at 42% 32%, rgba(0,0,0,0.22) 6px, transparent 6px),
        radial-gradient(circle at 35% 78%, rgba(0,0,0,0.2) 5px, transparent 5px),
        radial-gradient(circle at 88% 45%, rgba(0,0,0,0.2) 5px, transparent 5px),
        radial-gradient(circle at 65% 75%, rgba(0,0,0,0.18) 4px, transparent 4px);
}

/* Pattern: Bicolor - Half and half or cap and saddle */
.pet-head.pattern-bicolor .pet-pattern-overlay {
    background:
        /* White lower half */
        linear-gradient(180deg, transparent 0%, transparent 45%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.9) 100%),
        /* White blaze on face/chest area */
        radial-gradient(ellipse 35% 60% at 50% 80%, rgba(255,255,255,0.85) 0%, transparent 70%);
}

/* Pattern: Pointed - Siamese style darker extremities */
.pet-head.pattern-pointed .pet-pattern-overlay {
    background:
        /* Darker face mask */
        radial-gradient(ellipse 60% 50% at 50% 75%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 40%, transparent 70%),
        /* Ear tips darkening (simulated) */
        radial-gradient(ellipse 30% 25% at 20% 10%, rgba(0,0,0,0.2) 0%, transparent 70%),
        radial-gradient(ellipse 30% 25% at 80% 10%, rgba(0,0,0,0.2) 0%, transparent 70%),
        /* Darker paw hints at bottom */
        radial-gradient(ellipse 25% 15% at 25% 98%, rgba(0,0,0,0.2) 0%, transparent 70%),
        radial-gradient(ellipse 25% 15% at 75% 98%, rgba(0,0,0,0.2) 0%, transparent 70%),
        /* Lighter cream body center */
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,0.15) 0%, transparent 70%);
}

/* Pattern: Tortie - Tortoiseshell mottled orange and black */
.pet-head.pattern-tortie .pet-pattern-overlay {
    background:
        /* Mottled orange patches */
        radial-gradient(ellipse 25% 30% at 18% 25%, rgba(232,168,87,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 30% 25% at 70% 35%, rgba(232,168,87,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 22% 28% at 40% 70%, rgba(232,168,87,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 28% 22% at 85% 75%, rgba(232,168,87,0.45) 0%, transparent 70%),
        /* Mottled dark patches interspersed */
        radial-gradient(ellipse 28% 35% at 45% 30%, rgba(0,0,0,0.25) 0%, transparent 70%),
        radial-gradient(ellipse 32% 28% at 25% 55%, rgba(0,0,0,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 25% 32% at 75% 55%, rgba(0,0,0,0.25) 0%, transparent 70%),
        radial-gradient(ellipse 30% 25% at 55% 80%, rgba(0,0,0,0.2) 0%, transparent 70%);
}

/* ===== HAIR TUFT - Hidden by default for cleaner look ===== */
.pet-hair-tuft {
    display: none;
}

/* ===== EARS - Tall pointed anime cat ears ===== */
.pet-ear {
    position: absolute;
    width: 30px;
    height: 50px;
    background: linear-gradient(180deg, var(--pet-color) 0%, var(--pet-color-dark) 100%);
    top: -12px;
    z-index: 4;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    box-shadow:
        inset -3px 0 8px rgba(0,0,0,0.1),
        inset 3px 0 8px rgba(255,255,255,0.2);
}

/* Pink inner ear - offset to show outward angle */
.pet-ear::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 32px;
    background: linear-gradient(180deg, #FFB5BA 0%, #FFC9CF 100%);
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Left ear - angled outward */
.pet-ear.left {
    left: 0px;
    top: -16px;
    transform: rotate(-35deg);
    animation: earWiggleLeft 5s ease-in-out infinite;
}

.pet-ear.left::after {
    left: 40%;
}

/* Right ear - angled outward */
.pet-ear.right {
    right: 0px;
    top: -16px;
    transform: rotate(35deg);
    animation: earWiggleRight 5s ease-in-out infinite;
}

.pet-ear.right::after {
    left: 60%;
}

/* ===== FACE ===== */
.pet-face {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 75px;
    z-index: 6;
}

/* ===== EYES - Huge anime style with sparkles ===== */
.pet-eyes {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.pet-eye {
    position: relative;
    width: 40px;
    height: 44px;
    background: radial-gradient(ellipse at 50% 40%, var(--pet-eye-color) 0%, color-mix(in srgb, var(--pet-eye-color) 70%, black) 100%);
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
    border: 0.5px solid rgba(100,80,60,0.25);
    animation: blink 5s ease-in-out infinite;
    overflow: hidden;
    box-shadow:
        inset 0 -5px 15px rgba(0,0,0,0.2),
        inset 0 5px 10px rgba(255,255,255,0.1);
}

/* Inner eye depth/pupil area - bigger and bolder */
.pet-eye::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 28px;
    background: radial-gradient(ellipse, #050202 0%, #1a0f08 100%);
    border-radius: 50%;
}

/* Single bright sparkle highlight - larger */
.pet-eye::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    top: 8px;
    left: 5px;
    animation: sparkleEyes 3s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255,255,255,0.9);
}

@keyframes sparkleEyes {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ===== NOSE - Small cat triangle nose ===== */
.pet-nose {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 6px;
    background: #FF8899;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    z-index: 2;
}

/* Small line from nose to mouth */
.pet-nose::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 5px;
    background: rgba(50,30,20,0.3);
    border-radius: 1px;
}

/* ===== BLUSH MARKS - Cute anime cheek blush ===== */
.pet-blush {
    position: absolute;
    width: 20px;
    height: 10px;
    background: rgba(255,100,140,0.45);
    border-radius: 50%;
    top: 40px;
    z-index: 15;
}

.pet-blush.left {
    left: 8px;
}

.pet-blush.right {
    right: 8px;
}

/* ===== WHISKERS - Delicate, emanating from nose ===== */
.pet-whiskers {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 10px;
    pointer-events: none;
}

.pet-whisker {
    position: absolute;
    width: 18px;
    height: 1px;
    background: rgba(200,200,200,0.5);
    border-radius: 1px;
}

/* Left whiskers - all from same point beside nose, fanning outward */
.pet-whisker.left-1 { right: 50px; top: 5px; transform: rotate(20deg); transform-origin: right center; }
.pet-whisker.left-2 { right: 50px; top: 5px; transform: rotate(0deg); transform-origin: right center; }
.pet-whisker.left-3 { right: 50px; top: 5px; transform: rotate(-20deg); transform-origin: right center; }

/* Right whiskers - all from same point beside nose, fanning outward */
.pet-whisker.right-1 { left: 50px; top: 5px; transform: rotate(-20deg); transform-origin: left center; }
.pet-whisker.right-2 { left: 50px; top: 5px; transform: rotate(0deg); transform-origin: left center; }
.pet-whisker.right-3 { left: 50px; top: 5px; transform: rotate(20deg); transform-origin: left center; }

/* ===== MOUTH - Cute cat "w" shape ===== */
.pet-mouth {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: transparent;
}

/* Left curve of the "w" */
.pet-mouth::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(50,30,20,0.5);
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 8px;
}

/* Right curve of the "w" */
.pet-mouth::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(50,30,20,0.5);
    border-top: none;
    border-left: none;
    border-radius: 0 0 8px 0;
}

/* Happy mouth - bigger w */
.pet-mouth.happy {
    width: 20px;
    height: 10px;
}

.pet-mouth.happy::before,
.pet-mouth.happy::after {
    width: 10px;
    height: 10px;
}

/* Okay mouth - normal w */
.pet-mouth.okay {
    width: 16px;
    height: 8px;
}

/* Hungry mouth - small open "o" */
.pet-mouth.hungry {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(50,30,20,0.4);
}

.pet-mouth.hungry::before,
.pet-mouth.hungry::after {
    display: none;
}

/* Starving mouth - bigger open mouth */
.pet-mouth.starving {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(50,30,20,0.4);
}

.pet-mouth.starving::before,
.pet-mouth.starving::after {
    display: none;
}

/* Sleepy mouth - small line */
.pet-mouth.sleepy {
    width: 10px;
    height: 0;
    border-bottom: 2px solid rgba(50,30,20,0.4);
}

.pet-mouth.sleepy::before,
.pet-mouth.sleepy::after {
    display: none;
}

/* ===== FRONT PAWS - Elegant sitting position ===== */
.pet-paws {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 30px;
    z-index: 4;
}

/* Left front paw */
.pet-paw.left {
    position: absolute;
    left: 5px;
    bottom: 0;
}

/* Right front paw */
.pet-paw.right {
    position: absolute;
    right: 5px;
    bottom: 0;
}

/* Paw base - oval shapes */
.pet-paw::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 16px;
    background: linear-gradient(180deg, var(--pet-color) 0%, #ffffff 100%);
    border-radius: 50% 50% 45% 45%;
    box-shadow:
        inset -3px 0 6px rgba(0,0,0,0.08),
        inset 3px 0 6px rgba(255,255,255,0.3);
}

/* Paw toe details */
.pet-paw::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 6px;
    background: transparent;
    border-radius: 50%;
    box-shadow:
        -4px 0 0 0 rgba(180,150,130,0.2),
        4px 0 0 0 rgba(180,150,130,0.2);
}

/* ===== TAIL - S-shaped curved tail ===== */
.pet-tail {
    position: absolute;
    bottom: 40px;
    left: 15px;
    width: 55px;
    height: 14px;
    background: linear-gradient(180deg, var(--pet-color) 0%, var(--pet-color-dark) 100%);
    border-radius: 50px;
    z-index: 1;
    transform: rotate(-30deg);
    animation: tailSway 3s ease-in-out infinite;
    transform-origin: right center;
    box-shadow:
        inset -2px 0 6px rgba(0,0,0,0.1),
        inset 2px 0 6px rgba(255,255,255,0.15);
}

/* Middle curve of S - overlaps with base */
.pet-tail::before {
    content: '';
    position: absolute;
    left: -26px;
    top: -14px;
    width: 45px;
    height: 14px;
    background: linear-gradient(180deg, var(--pet-color) 0%, var(--pet-color-dark) 100%);
    border-radius: 50px;
    transform: rotate(55deg);
    box-shadow:
        inset -2px 0 6px rgba(0,0,0,0.1),
        inset 2px 0 6px rgba(255,255,255,0.15);
}

/* Tip of S-tail - overlaps with middle */
.pet-tail::after {
    content: '';
    position: absolute;
    left: -43px;
    top: -26px;
    width: 35px;
    height: 12px;
    background: linear-gradient(180deg, var(--pet-color) 0%, var(--pet-color-dark) 100%);
    border-radius: 50px;
    transform: rotate(-5deg);
    box-shadow:
        inset -2px 0 6px rgba(0,0,0,0.1),
        inset 2px 0 6px rgba(255,255,255,0.15);
}

@keyframes tailSway {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-25deg); }
}

/* Legacy selectors for compatibility */
.pet-arms { display: none; }
.pet-feet { display: none; }
.pet-cheeks { display: none; }
.pet-cheek { display: none; }

/* Hearts floating animation (when feeding) */
.floating-hearts {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 100;
}

.heart {
    position: absolute;
    font-size: 24px;
    opacity: 0;
    animation: floatHeart 1.5s ease-out forwards;
    z-index: 100;
}

@keyframes floatHeart {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1.2);
    }
}

/* Speech Bubble */
.speech-bubble {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid #ffe0e6;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.4s ease;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

.speech-bubble.show {
    animation: popIn 0.3s ease forwards;
    opacity: 1;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Scratch animation */
.pet-wrapper.scratching .pet-head {
    animation: wiggle 0.4s ease;
}

@keyframes wiggle {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-50%) rotate(-5deg); }
    75% { transform: translateX(-50%) rotate(5deg); }
}

/* ========== ANIMATIONS ========== */

@keyframes breathe {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
}

@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.9); }
}

@keyframes earWiggleLeft {
    0%, 100% { transform: rotate(-20deg); }
    25% { transform: rotate(-25deg); }
    75% { transform: rotate(-15deg); }
}

@keyframes earWiggleRight {
    0%, 100% { transform: rotate(20deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(25deg); }
}

@keyframes waveLeft {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(30deg); }
}

@keyframes waveRight {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-30deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-15px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-50%) rotate(-5deg); }
    75% { transform: translateX(-50%) rotate(5deg); }
}

/* Feeding animation */
.pet-head.feeding {
    animation: bounce 0.5s ease-in-out 3;
}

/* Hungry shake */
.pet-head.hungry-shake {
    animation: shake 0.5s ease-in-out infinite;
}

/* State variations */
.pet-wrapper.hungry .pet-head {
    filter: saturate(0.8);
}

.pet-wrapper.starving .pet-head {
    filter: saturate(0.6);
    animation: shake 1s ease-in-out infinite;
}

.pet-wrapper.starving .pet-eye::before {
    animation: none;
    opacity: 0.6;
}

.pet-wrapper.starving .pet-eye::after {
    animation: none;
    opacity: 0.6;
}

/* Droopy eyes when very hungry */
.pet-wrapper.starving .pet-eye {
    height: 28px;
    animation: none;
}

/* ========== DYING STATE (hunger = 0) ========== */

.pet-wrapper.dying {
    filter: grayscale(0.7) brightness(0.8);
}

/* Head droops when dying */
.pet-wrapper.dying .pet-head {
    top: 20px;
    transform: translateX(-50%) rotate(-8deg);
    animation: dyingBreathe 5s ease-in-out infinite;
}

/* Face adjustment */
.pet-wrapper.dying .pet-face {
    transform: translateX(-50%) scale(0.95);
}

/* Eyes adjustment */
.pet-wrapper.dying .pet-eyes {
    top: 2px;
}

/* X eyes */
.pet-wrapper.dying .pet-eye {
    background: transparent;
    width: 22px;
    height: 22px;
    animation: none;
    border: none;
    box-shadow: none;
}

.pet-wrapper.dying .pet-eye::before {
    content: '×';
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #2a1a10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    width: auto;
    height: auto;
    border-radius: 0;
    opacity: 1;
}

.pet-wrapper.dying .pet-eye::after {
    display: none;
}

/* Sad open mouth */
.pet-wrapper.dying .pet-mouth,
.pet-mouth.dying {
    width: 10px;
    height: 8px;
    background: rgba(50,30,20,0.5);
    border-radius: 50%;
}

.pet-wrapper.dying .pet-mouth::before,
.pet-wrapper.dying .pet-mouth::after {
    display: none;
}

.pet-wrapper.dying .pet-mouth::before,
.pet-wrapper.dying .pet-mouth::after,
.pet-mouth.dying::before,
.pet-mouth.dying::after {
    display: none;
}

/* Ears drooping when dying */
.pet-wrapper.dying .pet-ear {
    animation: none;
}

.pet-wrapper.dying .pet-ear.left {
    animation: none;
    transform: rotate(-50deg);
    left: 8px;
}

.pet-wrapper.dying .pet-ear.right {
    animation: none;
    transform: rotate(50deg);
    right: 8px;
}

/* Dim paws and tail when dying */
.pet-wrapper.dying .pet-paws {
    opacity: 0.5;
}

.pet-wrapper.dying .pet-tail {
    animation: none;
    opacity: 0.5;
}


@keyframes dyingBreathe {
    0%, 100% { transform: translateX(-50%) rotate(-10deg) scale(1); }
    50% { transform: translateX(-50%) rotate(-10deg) scale(0.98); }
}

/* ========== DEAD STATE (starving for 5+ days) ========== */

.pet-wrapper.dead {
    filter: grayscale(1) brightness(0.5);
    pointer-events: none;
}

.pet-wrapper.dead .pet-head {
    opacity: 0.4;
    top: 50px;
    transform: translateX(-50%) rotate(-20deg);
    animation: none;
}

.pet-wrapper.dead .pet-body {
    opacity: 0.4;
}

.pet-wrapper.dead .pet-face {
    display: none;
}

.pet-wrapper.dead .pet-ear {
    display: none;
}

.pet-wrapper.dead .pet-paws {
    display: none;
}

.pet-wrapper.dead .pet-tail {
    display: none;
}

.pet-wrapper.dead .sleeping-zzz {
    display: none;
}

/* Gravestone overlay */
.pet-wrapper.dead::after {
    content: '🪦';
    position: absolute;
    font-size: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    filter: grayscale(0) brightness(1);
}

.hunger-bar .progress-bar.hunger-dead {
    background: linear-gradient(90deg, #2a2a2a, #3a3a3a);
}

/* Sick/Constipated State - Green cloud overlay */
.pet-wrapper.sick {
    position: relative;
}

.pet-wrapper.sick::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -30px;
    right: -30px;
    bottom: -20px;
    background: radial-gradient(ellipse at center, rgba(100, 180, 100, 0.4) 0%, rgba(120, 200, 120, 0.25) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: sickCloudFadeIn 1s ease-out forwards, sickCloudPulse 2s ease-in-out 1s infinite;
}

@keyframes sickCloudFadeIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 0.8; transform: scale(1); }
}

@keyframes sickCloudPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Healing/curing constipation - fade out */
.pet-wrapper.sick.healing::before {
    animation: sickCloudFadeOut 1s ease-out forwards;
}

@keyframes sickCloudFadeOut {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* Sleeping zzz */
.sleeping-zzz {
    position: absolute;
    top: 20px;
    right: -10px;
    display: none;
    z-index: 15;
}

.sleeping-zzz span {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #9B8AC4;
    opacity: 0;
}

.sleeping-zzz span:nth-child(1) {
    animation: floatZ 2s ease-in-out infinite;
    right: 0;
}

.sleeping-zzz span:nth-child(2) {
    animation: floatZ 2s ease-in-out infinite 0.5s;
    font-size: 22px;
    right: 15px;
}

.sleeping-zzz span:nth-child(3) {
    animation: floatZ 2s ease-in-out infinite 1s;
    font-size: 26px;
    right: 35px;
}

@keyframes floatZ {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}

/* Sleepy/overfed state */
.pet-wrapper.sleepy {
    /* Pet is sleepy from being overfed */
}

.pet-wrapper.sleepy .sleeping-zzz {
    display: block;
    top: -10px;
    right: -15px;
}

/* Head tilts when sleepy */
.pet-wrapper.sleepy .pet-head {
    animation: sleepyBreathe 4s ease-in-out infinite;
}

/* Closed eyes - cute curved arcs (^_^) */
.pet-wrapper.sleepy .pet-eye {
    width: 24px;
    height: 12px;
    background: transparent;
    border: none;
    border-bottom: 4px solid var(--pet-eye-color);
    border-radius: 0 0 50% 50%;
    animation: none;
    box-shadow: none;
    overflow: visible;
}

.pet-wrapper.sleepy .pet-eye::before {
    display: none;
}

.pet-wrapper.sleepy .pet-eye::after {
    display: none;
}

/* Ears droop when sleepy */
.pet-wrapper.sleepy .pet-ear.left {
    animation: none;
    transform: rotate(-30deg);
}

.pet-wrapper.sleepy .pet-ear.right {
    animation: none;
    transform: rotate(30deg);
}

/* Tail stops wagging */
.pet-wrapper.sleepy .pet-tail {
    animation: none;
}

.pet-wrapper.sleepy .pet-mouth {
    width: 10px;
    height: 0;
    background: transparent;
    border-bottom: 2px solid rgba(50,30,20,0.4);
    border-radius: 0;
}

.pet-wrapper.sleepy .pet-mouth::before,
.pet-wrapper.sleepy .pet-mouth::after {
    display: none;
}

@keyframes sleepyBreathe {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.02); }
}

/* ========== UI ELEMENTS ========== */

.pet-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 15px 0 0;
    position: relative;
    z-index: 2;
}

.pet-name {
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
    font-weight: 700;
    cursor: pointer;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 107, 138, 0.6);
    letter-spacing: 0.5px;
}

.pet-name:hover {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.7);
}

.pet-age {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-top: 2px;
    position: relative;
    z-index: 2;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.rename-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s, filter 0.2s;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.rename-btn:hover {
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.pet-actions-row {
    display: none; /* Hidden - gear icon now on pet thumbnail */
}

/* Cat Settings Button */
.cat-settings-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cat-settings-btn:hover {
    transform: scale(1.1);
    border-color: #FF6B8A;
    box-shadow: 0 2px 8px rgba(255, 107, 138, 0.3);
}

.cat-settings-btn .settings-icon {
    font-size: 18px;
    line-height: 1;
}

.cat-settings-btn .settings-icon-gear {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 12px;
    background: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ========== CAT SETTINGS MODAL ========== */

.cat-settings-header {
    background: linear-gradient(135deg, #fff5f8 0%, #ffe8f0 100%);
    border-bottom: 2px solid #ffe0e6;
}

.cat-settings-header .modal-title {
    color: #FF6B8A;
    font-weight: 600;
}

.settings-section {
    margin-bottom: 20px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-label {
    display: block;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* Fur Color Grid */
.fur-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.fur-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.fur-color-swatch:hover {
    transform: scale(1.15);
}

.fur-color-swatch.active {
    border-color: #333;
}

/* Set swatch colors using data attribute */
.fur-color-swatch[data-color="#F5E6D3"] { background: #F5E6D3; }
.fur-color-swatch[data-color="#FFB6C1"] { background: #FFB6C1; }
.fur-color-swatch[data-color="#E8A857"] { background: #E8A857; }
.fur-color-swatch[data-color="#B8860B"] { background: #B8860B; }
.fur-color-swatch[data-color="#A0A0A0"] { background: #A0A0A0; }
.fur-color-swatch[data-color="#4A4A4A"] { background: #4A4A4A; }
.fur-color-swatch[data-color="#D2B48C"] { background: #D2B48C; }
.fur-color-swatch[data-color="#8B4513"] { background: #8B4513; }
.fur-color-swatch[data-color="#B6D7FF"] { background: #B6D7FF; }
.fur-color-swatch[data-color="#E4B6FF"] { background: #E4B6FF; }

.fur-color-custom {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ddd;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.fur-color-custom:hover {
    transform: scale(1.15);
}

.fur-color-custom input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fur-color-custom span {
    font-size: 14px;
    pointer-events: none;
}

/* Eye Color Grid */
.eye-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.eye-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
    position: relative;
}

.eye-color-swatch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
}

.eye-color-swatch:hover {
    transform: scale(1.15);
}

.eye-color-swatch.active {
    border-color: #333;
}

/* Eye Color Custom Picker */
.eye-color-custom {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ddd;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.eye-color-custom:hover {
    transform: scale(1.15);
}

.eye-color-custom input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.eye-color-custom span {
    font-size: 12px;
    pointer-events: none;
}

/* Set eye swatch colors */
.eye-color-swatch[data-color="#4A3728"] { background: radial-gradient(circle, #6B5344 30%, #4A3728 100%); }
.eye-color-swatch[data-color="#2E8B57"] { background: radial-gradient(circle, #3CB371 30%, #2E8B57 100%); }
.eye-color-swatch[data-color="#4169E1"] { background: radial-gradient(circle, #6495ED 30%, #4169E1 100%); }
.eye-color-swatch[data-color="#DAA520"] { background: radial-gradient(circle, #F4C430 30%, #DAA520 100%); }
.eye-color-swatch[data-color="#FF8C00"] { background: radial-gradient(circle, #FFA500 30%, #FF8C00 100%); }
.eye-color-swatch[data-color="#40E0D0"] { background: radial-gradient(circle, #7FFFD4 30%, #40E0D0 100%); }
.eye-color-swatch[data-color="#9370DB"] { background: radial-gradient(circle, #BA55D3 30%, #9370DB 100%); }
.eye-color-swatch[data-color="#DC143C"] { background: radial-gradient(circle, #FF6B6B 30%, #DC143C 100%); }

/* Pattern Grid */
.pattern-grid-lg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pattern-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.pattern-option:hover {
    background: #f5f5f5;
    transform: scale(1.05);
}

.pattern-option.active {
    background: #ffe0e6;
}

.pattern-option span {
    font-size: 11px;
    color: #666;
    margin-top: 5px;
}

.pattern-preview-box {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Pattern preview styles */
.pattern-preview-box.pattern-solid {
    background: linear-gradient(135deg, #FFB6C1, #FF91A4);
}

.pattern-preview-box.pattern-tabby {
    background:
        linear-gradient(170deg, transparent 35%, rgba(0,0,0,0.2) 37%, rgba(0,0,0,0.2) 40%, transparent 42%),
        linear-gradient(190deg, transparent 55%, rgba(0,0,0,0.2) 57%, rgba(0,0,0,0.2) 60%, transparent 62%),
        linear-gradient(135deg, #E8A857, #D4954A);
}

.pattern-preview-box.pattern-tuxedo {
    background:
        radial-gradient(ellipse 60% 50% at 50% 85%, rgba(255,255,255,0.9) 0%, transparent 70%),
        linear-gradient(135deg, #4A4A4A, #333);
}

.pattern-preview-box.pattern-calico {
    background:
        radial-gradient(ellipse 40% 40% at 70% 70%, rgba(255,255,255,0.8) 0%, transparent 70%),
        radial-gradient(ellipse 35% 35% at 25% 30%, rgba(232,168,87,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 30% 35% at 75% 35%, rgba(0,0,0,0.4) 0%, transparent 70%),
        linear-gradient(135deg, #F5E6D3, #E8DCC8);
}

.pattern-preview-box.pattern-spotted {
    background:
        radial-gradient(ellipse 8px 10px at 30% 35%, rgba(0,0,0,0.3) 35%, transparent 60%),
        radial-gradient(ellipse 9px 8px at 70% 60%, rgba(0,0,0,0.3) 35%, transparent 60%),
        linear-gradient(135deg, #E8A857, #D4954A);
}

.pattern-preview-box.pattern-bicolor {
    background:
        linear-gradient(180deg, #4A4A4A 0%, #4A4A4A 45%, rgba(255,255,255,0.9) 55%, white 100%);
}

.pattern-preview-box.pattern-pointed {
    background:
        radial-gradient(ellipse 50% 40% at 50% 75%, rgba(139,90,43,0.5) 0%, transparent 70%),
        linear-gradient(135deg, #F5E6D3, #E8DCC8);
}

.pattern-preview-box.pattern-tortie {
    background:
        radial-gradient(ellipse 30% 35% at 25% 35%, rgba(232,168,87,0.6) 0%, transparent 70%),
        radial-gradient(ellipse 35% 30% at 70% 65%, rgba(232,168,87,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 25% 30% at 55% 40%, rgba(0,0,0,0.35) 0%, transparent 70%),
        linear-gradient(135deg, #4A4A4A, #333);
}

.partner-info {
    color: #888;
    font-size: 0.95rem;
}

#partner-name {
    font-weight: 600;
    color: #FF6B8A;
}

/* Hunger Bar */
.hunger-section {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8ec 100%);
    padding: 15px;
    border-radius: 16px;
    border: 2px solid #ffe0e6;
}

.hunger-label {
    font-weight: 600;
    color: #FF6B8A;
}

.hunger-value {
    font-weight: 700;
    color: #FF6B8A;
}

.hunger-bar {
    height: 24px;
    border-radius: 12px;
    background: #ffe0e6;
    overflow: hidden;
}

.hunger-bar .progress-bar {
    border-radius: 12px;
    transition: width 0.5s ease, background-color 0.5s ease;
}

/* Hunger colors based on level */
.hunger-bar .progress-bar.hunger-sleepy {
    background: linear-gradient(90deg, #9B8AC4, #C4B8E0);
}

.hunger-bar .progress-bar.hunger-happy {
    background: linear-gradient(90deg, #FF6B8A, #FF8FA3);
}

.hunger-bar .progress-bar.hunger-okay {
    background: linear-gradient(90deg, #FFB347, #FFCC70);
}

.hunger-bar .progress-bar.hunger-hungry {
    background: linear-gradient(90deg, #FF8C42, #FF6B35);
}

.hunger-bar .progress-bar.hunger-starving {
    background: linear-gradient(90deg, #E63946, #FF6B6B);
}

.hunger-bar .progress-bar.hunger-dying {
    background: linear-gradient(90deg, #4a4a4a, #6a6a6a);
}

/* Feed Button */
#feed-btn {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FF6B8A 0%, #FF8FA3 100%);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.4);
}

#feed-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 138, 0.5);
}

#feed-btn:active {
    transform: translateY(0);
}

/* Last Fed Info */
.last-fed-info {
    color: #999;
    font-size: 0.85rem;
}

/* Invite Code Display */
.invite-code-display {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #FF6B8A;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8ec 100%);
    padding: 15px 25px;
    border-radius: 16px;
    font-family: monospace;
    border: 2px solid #ffe0e6;
}

#copy-code-btn {
    font-size: 0.85rem;
    color: #FF6B8A;
    border-color: #FF6B8A;
}

#copy-code-btn:hover {
    background: #FF6B8A;
    color: white;
}

/* Input styling */
#invite-code-input {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    border-radius: 12px;
    border: 2px solid #ffe0e6;
}

#invite-code-input:focus {
    border-color: #FF6B8A;
    box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.2);
}

.btn-outline-primary {
    color: #FF6B8A;
    border-color: #FF6B8A;
}

.btn-outline-primary:hover {
    background: #FF6B8A;
    border-color: #FF6B8A;
    color: white;
}

.btn-primary {
    background: #FF6B8A;
    border-color: #FF6B8A;
}

.btn-primary:hover {
    background: #FF5277;
    border-color: #FF5277;
}

/* Modal */
.modal-content {
    border-radius: 20px;
    border: none;
}

.modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.modal-title {
    color: #FF6B8A;
    font-weight: 600;
}

.modal-footer {
    border-top: none;
}

/* Rename button */
#rename-btn {
    font-size: 0.8rem;
    text-decoration: none;
    color: #999;
}

#rename-btn:hover {
    text-decoration: underline;
    color: #FF6B8A;
}

/* Color Picker */
.color-picker {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.active {
    border-color: #333;
}

/* Color Wheel */
.color-wheel-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ddd;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    transition: transform 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.color-wheel-wrapper:hover {
    transform: scale(1.15);
}

.color-wheel-wrapper input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.color-wheel-icon {
    font-size: 14px;
    pointer-events: none;
}

/* Pattern Picker */
.pattern-picker {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.pattern-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid #ddd;
    transition: transform 0.2s, border-color 0.2s;
    overflow: hidden;
    background: #fff;
}

.pattern-swatch:hover {
    transform: scale(1.15);
}

.pattern-swatch.active {
    border-color: #333;
}

.pattern-preview {
    display: block;
    width: 100%;
    height: 100%;
}

.pattern-preview.pattern-none {
    background: linear-gradient(135deg, #FFB6C1, #FF91A4);
}

/* Stripes - Tabby preview */
.pattern-preview.pattern-stripes {
    background:
        linear-gradient(160deg, transparent 30%, rgba(0,0,0,0.2) 32%, rgba(0,0,0,0.2) 36%, transparent 38%),
        linear-gradient(200deg, transparent 55%, rgba(0,0,0,0.2) 57%, rgba(0,0,0,0.2) 61%, transparent 63%),
        #FFB6C1;
}

/* Tuxedo - White chest preview */
.pattern-preview.pattern-zigzag {
    background:
        radial-gradient(ellipse 60% 50% at 50% 90%, rgba(255,255,255,0.7) 0%, transparent 70%),
        #FFB6C1;
}

/* Dots - Freckles preview */
.pattern-preview.pattern-dots {
    background:
        radial-gradient(circle at 30% 40%, rgba(0,0,0,0.25) 2px, transparent 2px),
        radial-gradient(circle at 70% 35%, rgba(0,0,0,0.25) 2px, transparent 2px),
        radial-gradient(circle at 50% 60%, rgba(0,0,0,0.2) 2px, transparent 2px),
        #FFB6C1;
}

/* Calico - Patches preview */
.pattern-preview.pattern-triangles {
    background:
        radial-gradient(ellipse 50% 40% at 25% 30%, rgba(255,140,50,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 75% 65%, rgba(0,0,0,0.2) 0%, transparent 70%),
        #FFB6C1;
}

/* Spots - Rosettes preview */
.pattern-preview.pattern-spots {
    background:
        radial-gradient(ellipse 6px 8px at 30% 35%, rgba(0,0,0,0.25) 40%, transparent 60%),
        radial-gradient(ellipse 7px 6px at 70% 60%, rgba(0,0,0,0.25) 40%, transparent 60%),
        #FFB6C1;
}

/* Hearts - Heart shape preview */
.pattern-preview.pattern-hearts {
    background:
        radial-gradient(circle at 40% 35%, rgba(0,0,0,0.25) 4px, transparent 4px),
        radial-gradient(circle at 60% 35%, rgba(0,0,0,0.25) 4px, transparent 4px),
        #FFB6C1;
}

/* Stars - Star marking preview */
.pattern-preview.pattern-stars {
    background:
        radial-gradient(ellipse 2px 8px at 50% 40%, rgba(255,255,255,0.6) 0%, transparent 70%),
        radial-gradient(ellipse 8px 2px at 50% 40%, rgba(255,255,255,0.6) 0%, transparent 70%),
        #FFB6C1;
}

/* Waves - Marble preview */
.pattern-preview.pattern-waves {
    background:
        radial-gradient(ellipse 80% 40% at 40% 50%, transparent 30%, rgba(0,0,0,0.15) 35%, transparent 40%),
        #FFB6C1;
}

/* Pattern Wheel Button */
.pattern-wheel-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid #ddd;
    background: #f8f8f8;
    font-size: 14px;
    padding: 0;
    transition: transform 0.2s, border-color 0.2s;
}

.pattern-wheel-btn:hover {
    transform: scale(1.15);
    border-color: #999;
}

/* Pattern Modal Grid */
.pattern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pattern-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.pattern-grid-item:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.pattern-grid-item.active {
    background: #ffe0e6;
}

.pattern-preview-lg {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.pattern-preview-lg.pattern-none {
    background: linear-gradient(135deg, #FFB6C1, #FF91A4);
}

/* Stripes - Tabby */
.pattern-preview-lg.pattern-stripes {
    background:
        linear-gradient(160deg, transparent 25%, rgba(0,0,0,0.2) 27%, rgba(0,0,0,0.2) 31%, transparent 33%),
        linear-gradient(155deg, transparent 45%, rgba(0,0,0,0.18) 47%, rgba(0,0,0,0.18) 51%, transparent 53%),
        linear-gradient(200deg, transparent 60%, rgba(0,0,0,0.2) 62%, rgba(0,0,0,0.2) 66%, transparent 68%),
        #FFB6C1;
}

/* Dots - Freckles */
.pattern-preview-lg.pattern-dots {
    background:
        radial-gradient(circle at 25% 35%, rgba(0,0,0,0.25) 3px, transparent 3px),
        radial-gradient(circle at 75% 30%, rgba(0,0,0,0.25) 3px, transparent 3px),
        radial-gradient(circle at 50% 55%, rgba(0,0,0,0.2) 2px, transparent 2px),
        radial-gradient(circle at 30% 70%, rgba(0,0,0,0.2) 2px, transparent 2px),
        radial-gradient(circle at 70% 65%, rgba(0,0,0,0.2) 2px, transparent 2px),
        #FFB6C1;
}

/* Tuxedo - White chest */
.pattern-preview-lg.pattern-zigzag {
    background:
        radial-gradient(ellipse 55% 50% at 50% 85%, rgba(255,255,255,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 25% 15% at 50% 95%, rgba(255,255,255,0.5) 0%, transparent 70%),
        #FFB6C1;
}

/* Spots - Rosettes */
.pattern-preview-lg.pattern-spots {
    background:
        radial-gradient(ellipse 8px 10px at 25% 30%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.1) 50%, transparent 60%),
        radial-gradient(ellipse 9px 7px at 70% 40%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.1) 50%, transparent 60%),
        radial-gradient(ellipse 7px 9px at 45% 70%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.1) 50%, transparent 60%),
        #FFB6C1;
}

/* Hearts - Heart marking */
.pattern-preview-lg.pattern-hearts {
    background:
        radial-gradient(circle at 40% 35%, rgba(0,0,0,0.25) 6px, transparent 6px),
        radial-gradient(circle at 60% 35%, rgba(0,0,0,0.25) 6px, transparent 6px),
        radial-gradient(circle at 75% 70%, rgba(0,0,0,0.18) 3px, transparent 3px),
        radial-gradient(circle at 82% 70%, rgba(0,0,0,0.18) 3px, transparent 3px),
        #FFB6C1;
}

/* Stars - Star marking */
.pattern-preview-lg.pattern-stars {
    background:
        radial-gradient(ellipse 3px 12px at 50% 35%, rgba(255,255,255,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 12px 3px at 50% 35%, rgba(255,255,255,0.7) 0%, transparent 70%),
        radial-gradient(ellipse 2px 6px at 25% 65%, rgba(255,255,255,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 6px 2px at 25% 65%, rgba(255,255,255,0.4) 0%, transparent 70%),
        #FFB6C1;
}

/* Waves - Marble */
.pattern-preview-lg.pattern-waves {
    background:
        radial-gradient(ellipse 70% 35% at 35% 40%, transparent 30%, rgba(0,0,0,0.15) 33%, rgba(0,0,0,0.15) 36%, transparent 39%),
        radial-gradient(ellipse 60% 40% at 65% 65%, transparent 35%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0.12) 41%, transparent 44%),
        #FFB6C1;
}

.pattern-label {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

/* Back link */
a.text-muted {
    color: #999 !important;
    text-decoration: none;
}

a.text-muted:hover {
    color: #FF6B8A !important;
}

/* ========== LITTER BOX ========== */

.litter-box-section {
    background: linear-gradient(135deg, #f5f0e6 0%, #e8e0d0 100%);
    padding: 15px;
    border-radius: 16px;
    border: 2px solid #d4c9b8;
}

.litter-box-label {
    font-weight: 600;
    color: #8B7355;
}

.poop-count {
    font-weight: 700;
    color: #8B4513;
}

/* Litter box container */
.litter-box {
    position: relative;
    height: 85px;
    margin-top: 10px;
}

/* Main 3D box container */
.litter-box .litter-box-3d {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 300px;
}

/* Front wall of box */
.litter-box .litter-front {
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 22px;
    background: linear-gradient(180deg,
        #5ab0c0 0%,
        #4a9db2 30%,
        #3d8fa3 60%,
        #358090 100%
    );
    border-radius: 0 0 5px 5px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.25),
        inset 0 -4px 8px rgba(0,0,0,0.15);
    border: 1px solid #2d7080;
    border-top: none;
}

/* Left wall edge */
.litter-box .litter-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 55px;
    background: linear-gradient(90deg,
        #3d8090 0%,
        #4a95a5 50%,
        #4090a0 100%
    );
    border-radius: 3px 0 0 5px;
    box-shadow: inset 2px 0 4px rgba(255,255,255,0.15);
    border: 1px solid #2d7080;
    border-right: none;
}

/* Right wall edge */
.litter-box .litter-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 55px;
    background: linear-gradient(90deg,
        #3a8595 0%,
        #4590a0 50%,
        #3d8090 100%
    );
    border-radius: 0 3px 5px 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.15);
    border: 1px solid #2d7080;
    border-left: none;
}

/* Top rim of box */
.litter-box .litter-rim {
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    height: 10px;
    background: linear-gradient(180deg,
        #9dd5e5 0%,
        #7ac5d8 25%,
        #5ab5c8 50%,
        #4aa5b8 75%,
        #5ab0c0 100%
    );
    border-radius: 6px 6px 0 0;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.5),
        inset 0 -1px 2px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.2);
    border: 1px solid #3a9aaa;
}

/* Inner cavity */
.litter-box .litter-inner {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 20px;
    background: linear-gradient(180deg, #1a3a42 0%, #2a4a52 100%);
    border-radius: 2px;
    box-shadow:
        inset 0 6px 15px rgba(0,0,0,0.6),
        inset 0 0 8px rgba(0,0,0,0.3);
}

/* Back wall visible inside */
.litter-box .litter-back {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 14px;
    background: linear-gradient(180deg,
        #2d5560 0%,
        #254550 100%
    );
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

/* Sand/litter surface */
.litter-box .litter {
    position: absolute;
    bottom: 22px;
    left: 10px;
    right: 10px;
    height: 38px;
    border-radius: 2px;
    z-index: 1;
    /* Realistic clumping cat litter texture */
    background:
        /* Highlight grains on top */
        radial-gradient(ellipse 4px 2px at 12% 8%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(ellipse 3px 2px at 38% 5%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(ellipse 4px 2px at 65% 10%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(ellipse 3px 2px at 88% 6%, rgba(255,255,255,0.3) 0%, transparent 100%),
        /* Large clay granules */
        radial-gradient(ellipse 5px 3px at 18% 25%, #e8e0d0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 42% 18%, #ddd5c5 100%, transparent),
        radial-gradient(ellipse 5px 3px at 72% 22%, #e3dbd0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 28% 45%, #d8d0c0 100%, transparent),
        radial-gradient(ellipse 5px 3px at 82% 38%, #e8e0d0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 55% 50%, #ddd5c5 100%, transparent),
        radial-gradient(ellipse 5px 3px at 15% 65%, #e3dbd0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 68% 68%, #d8d0c0 100%, transparent),
        radial-gradient(ellipse 5px 3px at 92% 58%, #e8e0d0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 35% 78%, #ddd5c5 100%, transparent),
        /* Medium granules */
        radial-gradient(ellipse 2.5px 1.5px at 8% 35%, #ccc4b4 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 25% 32%, #d4ccc0 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 48% 38%, #c8c0b0 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 78% 30%, #d0c8b8 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 58% 62%, #ccc4b4 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 85% 72%, #d4ccc0 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 22% 85%, #c8c0b0 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 75% 88%, #d0c8b8 100%, transparent),
        /* Base - layered sand with depth */
        linear-gradient(180deg,
            #c4bcac 0%,
            #d0c8b8 15%,
            #dcd4c4 40%,
            #e4dcd0 70%,
            #ece4d8 100%
        );
    box-shadow:
        inset 0 8px 20px rgba(0,0,0,0.3),
        inset 0 2px 6px rgba(0,0,0,0.2),
        inset 0 -2px 4px rgba(255,255,255,0.15);
}

/* Surface texture overlay for grainy effect */
.litter-box .litter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.12;
    border-radius: 2px;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Subtle shine on sand surface */
.litter-box .litter::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 55%;
    height: 25%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    border-radius: 2px;
    pointer-events: none;
}

/* Shadow under the box */
.litter-box-shadow {
    position: absolute;
    bottom: -6px;
    left: 5%;
    right: 5%;
    height: 10px;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0,0,0,0.3) 0%, transparent 70%);
    filter: blur(2px);
}

.litter-box .poops {
    position: absolute;
    bottom: 28px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    gap: 5px;
    z-index: 2;
}

.litter-box .poop {
    font-size: 14px;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.4));
    animation: poopAppear 0.3s ease-out;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.litter-box .poop.fading {
    opacity: 0;
    transform: scale(0.3) translateY(10px);
}

@keyframes poopAppear {
    0% {
        transform: scale(0) translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.litter-box.dirty .litter {
    background:
        /* Wet clumps from use */
        radial-gradient(ellipse 10px 5px at 28% 30%, #a89880 100%, transparent),
        radial-gradient(ellipse 8px 5px at 72% 45%, #a09078 100%, transparent),
        /* Highlight grains on top */
        radial-gradient(ellipse 4px 2px at 12% 8%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(ellipse 3px 2px at 55% 6%, rgba(255,255,255,0.15) 0%, transparent 100%),
        /* Large clay granules */
        radial-gradient(ellipse 5px 3px at 18% 55%, #d8d0c0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 48% 20%, #d0c8b8 100%, transparent),
        radial-gradient(ellipse 5px 3px at 85% 60%, #dcd4c4 100%, transparent),
        radial-gradient(ellipse 4px 3px at 58% 72%, #ccc4b4 100%, transparent),
        /* Medium granules */
        radial-gradient(ellipse 2.5px 1.5px at 8% 78%, #c4bcac 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 38% 82%, #ccc4b4 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 92% 38%, #c8c0b0 100%, transparent),
        /* Base - slightly yellowed */
        linear-gradient(180deg,
            #bab2a2 0%,
            #c8c0b0 15%,
            #d4ccbc 40%,
            #dcd4c8 70%,
            #e4dcd0 100%
        );
}

.litter-box.very-dirty .litter {
    background:
        /* Multiple wet clumps */
        radial-gradient(ellipse 12px 6px at 22% 28%, #8a7860 100%, transparent),
        radial-gradient(ellipse 10px 6px at 65% 38%, #806850 100%, transparent),
        radial-gradient(ellipse 9px 5px at 45% 58%, #8a7860 100%, transparent),
        radial-gradient(ellipse 8px 5px at 82% 65%, #907a62 100%, transparent),
        /* Some visible granules */
        radial-gradient(ellipse 5px 3px at 10% 70%, #c8c0b0 100%, transparent),
        radial-gradient(ellipse 4px 3px at 35% 15%, #c0b8a8 100%, transparent),
        radial-gradient(ellipse 5px 3px at 90% 20%, #ccc4b4 100%, transparent),
        /* Medium granules */
        radial-gradient(ellipse 2.5px 1.5px at 5% 15%, #b8b0a0 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 55% 85%, #c0b8a8 100%, transparent),
        radial-gradient(ellipse 2.5px 1.5px at 78% 10%, #b4aca0 100%, transparent),
        /* Base - darker, more soiled */
        linear-gradient(180deg,
            #a8a090 0%,
            #b8b0a0 15%,
            #c8c0b0 40%,
            #d0c8bc 70%,
            #d8d0c4 100%
        );
}

#clean-btn {
    color: #8B7355;
    border-color: #8B7355;
}

#clean-btn:hover {
    background: #8B7355;
    color: white;
}

.last-cleaned-info {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Clean animation with sparkles */
@keyframes sparkleClean {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.litter-box.cleaning {
    animation: sparkleClean 0.6s ease-in-out;
}

/* Litter box lid for open/close animation */
.litter-box .litter-lid {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 50px;
    background: linear-gradient(180deg,
        #6bc0d0 0%,
        #5ab0c0 20%,
        #4a9db2 50%,
        #3d8fa3 80%,
        #358090 100%
    );
    border-radius: 2px;
    transform-origin: top center;
    transform: rotateX(-85deg);
    transition: transform 0.4s ease-in-out;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -4px 8px rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid #2d7080;
    z-index: 5;
}

.litter-box.closed .litter-lid {
    transform: rotateX(0deg);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.1),
        0 4px 8px rgba(0,0,0,0.3);
}

/* Hide poops when closed */
.litter-box.closed .poops {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.litter-box .poops {
    transition: opacity 0.2s ease-in-out 0.25s;
}

/* Also dim litter when closed */
.litter-box.closed .litter {
    filter: brightness(0.7);
    transition: filter 0.3s ease-in-out;
}

.litter-box .litter {
    transition: filter 0.3s ease-in-out;
}

/* Sparkle particles */
.sparkle-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fff 0%, #fffacd 40%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(0.5px);
    box-shadow: 0 0 6px 2px rgba(255, 255, 200, 0.8);
}

.sparkle::before,
.sparkle::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, #fff, transparent);
}

.sparkle::before {
    width: 12px;
    height: 2px;
    top: 3px;
    left: -2px;
}

.sparkle::after {
    width: 2px;
    height: 12px;
    top: -2px;
    left: 3px;
}

@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(-15px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-25px) scale(0.5);
    }
}

.sparkle.animate {
    animation: sparkleFloat 0.8s ease-out forwards;
}

/* ========== POOP BUTTON NEAR BUTT ========== */

.poop-btn-butt {
    position: absolute;
    bottom: 15px;
    right: -35px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #d4a574;
    background: linear-gradient(135deg, #fff9e6 0%, #ffe4b8 100%);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.poop-btn-butt:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}

.poop-btn-butt:active {
    transform: scale(0.95);
}

.poop-btn-butt:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Poop emerges straight from bottom center of cat */
.falling-poop {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 15;
}

.falling-poop .poop-drop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-size: 22px;
    opacity: 0;
    animation: poopEmerge 1s ease-out forwards;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.3));
}

@keyframes poopEmerge {
    /* Start at bottom - tiny */
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(0);
    }
    /* Peeking out */
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(10px) scale(0.5);
    }
    /* Pushing out */
    45% {
        opacity: 1;
        transform: translateX(-50%) translateY(25px) scale(0.8);
    }
    /* Fully out */
    65% {
        opacity: 1;
        transform: translateX(-50%) translateY(45px) scale(1);
    }
    /* Dropping */
    85% {
        opacity: 0.7;
        transform: translateX(-50%) translateY(75px) scale(1);
    }
    /* Gone */
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px) scale(0.9);
    }
}

/* No cat movement during pooping - cat stays still */
.pet-wrapper.pooping .pet-eye {
    /* Squinting eyes while pooping */
    height: 20px !important;
    animation: none !important;
}

/* Preview pet in invite view */
#pet-preview .pet-wrapper {
    transform: scale(0.7);
    margin-top: -30px;
}

/* ========== WHITEBOARD ========== */

.whiteboard-section {
    background: linear-gradient(135deg, #fff5f8 0%, #ffe8f0 100%);
    padding: 15px;
    border-radius: 16px;
    border: 2px solid #ffe0e6;
}

.whiteboard-label {
    font-weight: 600;
    color: #FF6B8A;
}

#draw-btn {
    font-size: 0.85rem;
}

.whiteboard-display {
    background: white;
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 8px;
    min-height: 160px;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.whiteboard-display:hover {
    border-color: #FF6B8A;
}

.whiteboard-display img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.whiteboard-empty {
    text-align: center;
    color: #999;
}

.whiteboard-empty span {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.whiteboard-empty small {
    font-size: 0.8rem;
    color: #bbb;
}

.whiteboard-info {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Drawing Modal */
.drawing-modal-header {
    background: linear-gradient(135deg, #fff5f8 0%, #ffe8f0 100%);
    border-bottom: 2px solid #ffe0e6;
}

.drawing-modal-header .modal-title {
    color: #FF6B8A;
}

.drawing-modal-body {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* #drawing-canvas inherits from .whiteboard-canvas-container canvas */

.drawing-modal-footer {
    background: #f8f8f8;
    border-top: 1px solid #eee;
    gap: 10px;
}

.drawing-modal-footer .btn {
    min-width: 100px;
}

/* Responsive */
@media (max-width: 576px) {
    body {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .card-front,
    .card-back {
        padding: 20px;
        border-radius: 20px;
    }

    .settings-drawer {
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
    }

    .pet-wrapper {
        transform: scale(0.85);
    }

    .invite-code-display {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    #pet-preview .pet-wrapper {
        transform: scale(0.6);
    }

    .whiteboard-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .whiteboard-title {
        order: -1;
        width: 100%;
        text-align: center;
    }
}

/* ===========================================
   Multi-Pet Carousel (mini pet thumbnails)
   =========================================== */

.pet-carousel {
    margin-bottom: 15px;
}

/* Pet thumbnails container - max 6 per row */
.pet-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    max-width: 350px;
    margin: 0 auto;
}

/* Individual pet thumbnail */
.pet-thumb {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.pet-thumb:hover {
    border-color: #eee;
    opacity: 0.8;
}

.pet-thumb.active {
    border-color: #f5e0e5;
    background: #fff;
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 107, 138, 0.15);
}

/* Gear icon on selected pet thumbnail */
.pet-thumb-gear {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ff6b8a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s, background 0.2s;
    z-index: 2;
}

.pet-thumb-gear:hover {
    transform: scale(1.15);
    background: #ff4d73;
}

.pet-thumb-gear i {
    line-height: 1;
}

/* Settings Drawer (slides down between carousel and title) */
.settings-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background: #f5f0f2;
    position: relative;
    /* Pull drawer to edges of card (counteract .besties-card padding) */
    margin-left: -30px;
    margin-right: -30px;
    width: calc(100% + 60px);
    /* Inset shadow - top and bottom (opening INTO the interface) */
    /* Always present so it doesn't disappear before close animation */
    box-shadow:
        /* Top shadows */
        inset 0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 4px 6px rgba(0, 0, 0, 0.1),
        inset 0 2px 3px rgba(0, 0, 0, 0.08),
        /* Bottom shadows (reversed) */
        inset 0 -8px 16px rgba(0, 0, 0, 0.15),
        inset 0 -4px 6px rgba(0, 0, 0, 0.1),
        inset 0 -2px 3px rgba(0, 0, 0, 0.08);
}

.settings-drawer.open {
    max-height: 400px;
    padding: 12px 0 16px 0;
    transition: max-height 0.4s ease-in, padding 0.3s ease-in;
}

.settings-drawer-content {
    padding: 0 15px;
}

.drawer-section {
    margin-bottom: 12px;
}

.drawer-section:last-child {
    margin-bottom: 0;
}

.drawer-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-align: center;
}

.drawer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* Smaller swatches for drawer */
.drawer-grid .fur-color-swatch,
.drawer-grid .eye-color-swatch {
    width: 28px;
    height: 28px;
}

.drawer-grid .fur-color-custom {
    width: 28px;
    height: 28px;
}

.drawer-grid .fur-color-custom span {
    font-size: 14px;
}

/* Small pattern options for drawer */
.pattern-grid-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.pattern-option-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #eee;
    overflow: hidden;
    transition: all 0.2s;
}

.pattern-option-sm:hover {
    border-color: #ff6b8a;
    transform: scale(1.1);
}

.pattern-option-sm.selected {
    border-color: #ff6b8a;
    box-shadow: 0 0 0 2px rgba(255, 107, 138, 0.3);
}

.pattern-preview-sm {
    width: 100%;
    height: 100%;
    background: var(--pet-color, #FFB6C1);
}

/* Add pet (plus) button */
.pet-thumb.add-pet-thumb {
    opacity: 0.8;
    border: 2px dashed #FFB6C1;
    background: #fff5f7;
}

.pet-thumb.add-pet-thumb:hover {
    opacity: 1;
    border-color: #FF6B8A;
    background: #ffecef;
}

.pet-thumb.add-pet-thumb i {
    font-size: 1.3rem;
    color: #FF6B8A;
}

/* Mini pet face inside thumbnail */
.pet-thumb-inner {
    position: relative;
    width: 36px;
    height: 36px;
}

.mini-face {
    width: 30px;
    height: 26px;
    background: var(--pet-color, #FFB6C1);
    border-radius: 50% 50% 45% 45%;
    position: absolute;
    top: 10px;
    left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-ear {
    width: 12px;
    height: 14px;
    background: var(--pet-color, #FFB6C1);
    position: absolute;
    top: 2px;
}

.mini-ear.left {
    left: 2px;
    border-radius: 50% 50% 0 50%;
    transform: rotate(-15deg);
}

.mini-ear.right {
    right: 2px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(15deg);
}

.mini-ear::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 8px;
    background: #ffb6c1;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

.mini-eyes {
    display: flex;
    gap: 6px;
    margin-top: -2px;
}

.mini-eye {
    width: 6px;
    height: 6px;
    background: var(--pet-eye-color, #4A4A4A);
    border-radius: 50%;
}

/* Shared with info */
.caretakers-info {
    text-align: center;
    margin: 5px 0 10px 0;
    font-size: 0.85rem;
    color: #999;
}

/* Invite code section */
.invite-code-section {
    text-align: center;
    margin: 0;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f5 100%);
    border-radius: 16px;
    border: 2px solid #e0e5eb;
    display: flex;
    flex-direction: column;
}

.invite-code-label {
    font-weight: 600;
    color: #666;
}

.invite-qr-container {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.invite-qr-code {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: white;
    padding: 4px;
    border: 2px solid #FFB6C1;
}

.invite-code-display-small {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #FF6B8A;
    background: white;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px dashed #FFB6C1;
    text-align: center;
    word-break: break-all;
}

.invite-code-section h6 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
}

.invite-code-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.invite-code-text {
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 3px;
    color: #333;
    background: white;
    padding: 8px 15px;
    border-radius: 8px;
    border: 2px solid #eee;
}

.btn-copy-invite {
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--primary-pink);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-invite:hover {
    background: #FF4D6D;
    transform: scale(1.05);
}

.btn-copy-invite i {
    font-size: 1rem;
}

/* Leave pet button */
#leave-pet-btn {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #999;
    background: transparent;
    border: 1px solid #ddd;
    padding: 6px 15px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

#leave-pet-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: #fff5f5;
}

/* Pet actions container adjustment */
.pet-actions-container {
    margin-top: 10px;
}

/* Multi-pet responsive adjustments */
@media (max-width: 576px) {
    .pet-dots {
        gap: 10px;
        padding: 8px 0;
    }

    .pet-thumb {
        width: 44px;
        height: 44px;
    }

    .pet-thumb-inner {
        width: 32px;
        height: 32px;
    }

    .mini-face {
        width: 26px;
        height: 22px;
        top: 10px;
        left: 3px;
    }

    .mini-ear {
        width: 10px;
        height: 12px;
    }

    .mini-eye {
        width: 5px;
        height: 5px;
    }

    .mini-eyes {
        gap: 5px;
    }

    .invite-code-text {
        font-size: 1.2rem;
        letter-spacing: 2px;
        padding: 6px 12px;
    }
}