/* KindTaken - Virtual Pet Sprite Styles */

.pet-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 20px;
}

.pet-container-mini {
    padding: 4px;
}

/* ===== SPRITE WRAPPER ===== */
.pet-sprite-wrapper {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.pet-sprite {
    background-repeat: no-repeat;
}

.pet-mini-wrapper {
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

/* ===== EGG IDLE ANIMATIONS ===== */
.egg-wobble {
    -webkit-animation: eggWobble 3s ease-in-out infinite;
    animation: eggWobble 3s ease-in-out infinite;
}

.egg-wobble-fast {
    -webkit-animation: eggWobbleFast 0.3s ease infinite;
    animation: eggWobbleFast 0.3s ease infinite;
}

/* ===== PET WRAPPER ANIMATIONS ===== */
.pet-bounce {
    -webkit-animation: petBounce 0.6s ease 3;
    animation: petBounce 0.6s ease 3;
}

.pet-bounce-loop {
    -webkit-animation: petBounce 0.6s ease infinite;
    animation: petBounce 0.6s ease infinite;
}

.pet-shake {
    -webkit-animation: petShake 0.2s ease infinite;
    animation: petShake 0.2s ease infinite;
}

.pet-dance {
    -webkit-animation: petDanceMove 0.5s ease infinite;
    animation: petDanceMove 0.5s ease infinite;
}

.pet-celebrate {
    -webkit-animation: petCelebrate 1s ease;
    animation: petCelebrate 1s ease;
}

/* ===== ANIMATION OVERLAY ===== */
.pet-anim-overlay {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    pointer-events: none;
    z-index: 20;
}

/* ===== FLOATING FOOD ANIMATION ===== */
.pet-food-float {
    position: absolute;
    left: -30%;
    top: 50%;
    font-size: 36px;
    opacity: 0;
    -webkit-transition: none;
    transition: none;
}
.pet-food-float.active {
    -webkit-animation: foodFloat 1s ease-in forwards;
    animation: foodFloat 1s ease-in forwards;
}

.pet-nom-text {
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 800;
    color: #ff7043;
    -webkit-animation: nomBounce 0.5s ease 3;
    animation: nomBounce 0.5s ease 3;
}

/* Toy bounce */
.pet-toy-bounce {
    position: absolute;
    top: 10%;
    left: 50%;
    font-size: 32px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: toyBounce 0.6s ease infinite;
    animation: toyBounce 0.6s ease infinite;
}

/* Sparkles */
.pet-sparkle-1, .pet-sparkle-2, .pet-sparkle-3 {
    position: absolute;
    font-size: 20px;
    -webkit-animation: sparkleFloat 1.5s ease-out infinite;
    animation: sparkleFloat 1.5s ease-out infinite;
}
.pet-sparkle-1 { top: 10%; left: 20%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.pet-sparkle-2 { top: 20%; right: 15%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.pet-sparkle-3 { top: 5%; left: 50%; -webkit-animation-delay: 1s; animation-delay: 1s; }

.pet-sparkle-burst {
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 40px;
    -webkit-animation: sparkleGrow 0.5s ease forwards;
    animation: sparkleGrow 0.5s ease forwards;
}

/* Bubbles for washing */
.pet-bubble {
    position: absolute;
    font-size: 20px;
    -webkit-animation: bubbleFloat 2s ease-out forwards;
    animation: bubbleFloat 2s ease-out forwards;
}
.pet-bubble.b1 { bottom: 30%; left: 25%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.pet-bubble.b2 { bottom: 25%; right: 20%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.pet-bubble.b3 { bottom: 35%; left: 40%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.pet-bubble.b4 { bottom: 20%; right: 35%; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }

/* Music notes for dancing */
.pet-note {
    position: absolute;
    font-size: 24px;
    -webkit-animation: noteFloat 1.5s ease-out infinite;
    animation: noteFloat 1.5s ease-out infinite;
}
.pet-note.n1 { top: 10%; left: 10%; -webkit-animation-delay: 0s; animation-delay: 0s; }
.pet-note.n2 { top: 5%; right: 10%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.pet-note.n3 { top: 15%; left: 25%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.pet-note.n4 { top: 8%; right: 25%; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }

/* Hearts floating */
.pet-hearts {
    position: absolute;
    top: -10px;
    left: 50%;
    pointer-events: none;
}

.pet-heart {
    position: absolute;
    font-size: 20px;
    -webkit-animation: heartFloat 1.5s ease-out forwards;
    animation: heartFloat 1.5s ease-out forwards;
    opacity: 0;
}

.pet-heart:nth-child(1) { left: -20px; -webkit-animation-delay: 0s; animation-delay: 0s; }
.pet-heart:nth-child(2) { left: 0px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.pet-heart:nth-child(3) { left: 20px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

/* ===== PET STATS ===== */
.pet-stats {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
}

.pet-level-badge {
    background: linear-gradient(135deg, #7c4dff, #536dfe);
    color: white;
    border-radius: 20px;
    padding: 6px 20px;
    font-size: 18px;
    font-weight: 700;
}

.pet-xp-bar {
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    overflow: hidden;
}

.pet-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c4dff, #e040fb);
    border-radius: 7px;
    -webkit-transition: width 0.5s ease;
    transition: width 0.5s ease;
}

.pet-happiness {
    display: -webkit-flex;
    display: flex;
    gap: 4px;
    font-size: 22px;
}

.pet-happiness-heart {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.pet-happiness-heart.empty {
    opacity: 0.25;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.pet-streak {
    font-size: 16px;
    font-weight: 600;
    color: #ff9800;
}

.pet-name-tag {
    font-size: 14px;
    color: #888;
    margin-top: 8px;
}

/* ===== ROOM STYLES (v2 - Image-based) ===== */
.pet-room-wrapper {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.pet-room {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.pet-room-wall {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    z-index: 0;
}

.pet-room-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 43%;
    z-index: 0;
}

/* Baseboard between wall and floor */
.pet-room-baseboard {
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, #8d6e63, #6d4c41);
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Window on the wall */
.pet-room-window {
    position: absolute;
    top: 10%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100px;
    height: 80px;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 4px #8d6e63, 0 3px 8px rgba(0,0,0,0.15);
}

.window-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
}

.window-frame-h {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: #8d6e63;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.window-frame-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #8d6e63;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
}

.window-sill {
    position: absolute;
    bottom: -6px;
    left: -8px;
    right: -8px;
    height: 8px;
    background: #795548;
    border-radius: 0 0 4px 4px;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Pet positioned in room */
.pet-room-pet {
    position: absolute;
    bottom: 18%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 5;
}

.pet-room-pet .pet-container {
    padding: 0;
}

/* ===== ROOM SLOTS ===== */
.room-slot {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.room-slot:active {
    opacity: 0.7;
}

.room-slot.empty {
    border: 2px dashed rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
}

.room-slot .slot-plus {
    font-size: 22px;
    color: rgba(255,255,255,0.35);
    font-weight: 300;
    -webkit-align-self: center;
    align-self: center;
}

/* Item images inside slots */
.room-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}

/* Wall slot positions */
.room-slot-wall-l {
    top: 6%;
    left: 5%;
    width: 90px;
    height: 90px;
}

.room-slot-wall-r {
    top: 6%;
    right: 5%;
    width: 90px;
    height: 90px;
}

/* Floor slot positions - outer slots for large furniture */
.room-slot-floor-l {
    bottom: 1%;
    left: 1%;
    width: 155px;
    height: 150px;
}

/* Floor slot positions - inner slots for small items */
.room-slot-floor-ml {
    bottom: 3%;
    left: 27%;
    width: 75px;
    height: 85px;
}

.room-slot-floor-mr {
    bottom: 3%;
    right: 27%;
    width: 75px;
    height: 85px;
}

/* Floor slot positions - outer slots for large furniture */
.room-slot-floor-r {
    bottom: 1%;
    right: 1%;
    width: 155px;
    height: 150px;
}

/* Rug slot - centered below pet, BEHIND furniture */
.room-slot-rug {
    bottom: 8%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 180px;
    height: 70px;
    z-index: 1;
}

/* Room item picker modal */
.room-pick-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* Toast message */
.toast-msg {
    position: fixed;
    bottom: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    -webkit-animation: toastIn 0.3s ease;
    animation: toastIn 0.3s ease;
}

@-webkit-keyframes toastIn {
    0% { -webkit-transform: translateX(-50%) translateY(20px); opacity: 0; }
    100% { -webkit-transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes toastIn {
    0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ===== COINS DISPLAY ===== */
.coins-display {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    color: #5d4037;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255,179,0,0.3);
}

.coins-display .coin-icon {
    font-size: 20px;
}

/* Floating coin reward */
.coin-float {
    position: fixed;
    font-size: 18px;
    font-weight: 700;
    color: #ff8f00;
    pointer-events: none;
    z-index: 9999;
    -webkit-animation: coinFloatUp 1.5s ease-out forwards;
    animation: coinFloatUp 1.5s ease-out forwards;
}

/* ===== HATCH SCENE ===== */
.hatch-scene {
    text-align: center;
    padding: 40px 20px;
}

.hatch-title {
    font-size: 24px;
    font-weight: 700;
    color: #1c1c1e;
    margin-bottom: 20px;
}

.hatch-subtitle {
    font-size: 16px;
    color: #8e8e93;
    margin-bottom: 24px;
}

.hatch-pet-area {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 24px;
}

.hatch-btn {
    display: inline-block;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 14px 32px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    -webkit-animation: hatchBtnPulse 1.5s ease-in-out infinite;
    animation: hatchBtnPulse 1.5s ease-in-out infinite;
}

.hatch-btn:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

/* ===== KEYFRAMES ===== */

/* Egg wobble (gentle) */
@-webkit-keyframes eggWobble {
    0%, 100% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(-3deg); }
    75% { -webkit-transform: rotate(3deg); }
}
@keyframes eggWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Egg wobble (fast, for petting) */
@-webkit-keyframes eggWobbleFast {
    0%, 100% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(-6deg); }
    75% { -webkit-transform: rotate(6deg); }
}
@keyframes eggWobbleFast {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-6deg); }
    75% { transform: rotate(6deg); }
}

/* Pet bounce */
@-webkit-keyframes petBounce {
    0%, 100% { -webkit-transform: translateY(0) scale(1); }
    50% { -webkit-transform: translateY(-16px) scale(1.05); }
}
@keyframes petBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-16px) scale(1.05); }
}

/* Pet shake (washing) */
@-webkit-keyframes petShake {
    0%, 100% { -webkit-transform: translateX(0); }
    25% { -webkit-transform: translateX(-4px); }
    75% { -webkit-transform: translateX(4px); }
}
@keyframes petShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Pet dance */
@-webkit-keyframes petDanceMove {
    0% { -webkit-transform: translateY(0) rotate(0deg); }
    25% { -webkit-transform: translateY(-12px) rotate(-8deg); }
    50% { -webkit-transform: translateY(0) rotate(0deg); }
    75% { -webkit-transform: translateY(-12px) rotate(8deg); }
    100% { -webkit-transform: translateY(0) rotate(0deg); }
}
@keyframes petDanceMove {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-12px) rotate(-8deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-12px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Pet celebrate */
@-webkit-keyframes petCelebrate {
    0% { -webkit-transform: rotate(0deg) scale(1); }
    25% { -webkit-transform: rotate(90deg) scale(1.2); }
    50% { -webkit-transform: rotate(180deg) scale(1); }
    75% { -webkit-transform: rotate(270deg) scale(1.2); }
    100% { -webkit-transform: rotate(360deg) scale(1); }
}
@keyframes petCelebrate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Hatch button pulse */
@-webkit-keyframes hatchBtnPulse {
    0%, 100% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.05); }
}
@keyframes hatchBtnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Heart float */
@-webkit-keyframes heartFloat {
    0% { -webkit-transform: translateY(0) scale(0); opacity: 0; }
    20% { -webkit-transform: translateY(-10px) scale(1); opacity: 1; }
    100% { -webkit-transform: translateY(-60px) scale(0.5); opacity: 0; }
}
@keyframes heartFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { transform: translateY(-10px) scale(1); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
}

/* Food float to pet */
@-webkit-keyframes foodFloat {
    0% { -webkit-transform: translate(0, 0) scale(1); opacity: 1; }
    100% { -webkit-transform: translate(80px, -20px) scale(0.3); opacity: 0; }
}
@keyframes foodFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(80px, -20px) scale(0.3); opacity: 0; }
}

/* Nom text bounce */
@-webkit-keyframes nomBounce {
    0%, 100% { -webkit-transform: translateX(-50%) scale(1); }
    50% { -webkit-transform: translateX(-50%) scale(1.3); }
}
@keyframes nomBounce {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.3); }
}

/* Toy bounce */
@-webkit-keyframes toyBounce {
    0%, 100% { -webkit-transform: translateX(-50%) translateY(0); }
    50% { -webkit-transform: translateX(-50%) translateY(-25px); }
}
@keyframes toyBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-25px); }
}

/* Sparkle float */
@-webkit-keyframes sparkleFloat {
    0% { -webkit-transform: scale(0) rotate(0deg); opacity: 0; }
    50% { -webkit-transform: scale(1.2) rotate(180deg); opacity: 1; }
    100% { -webkit-transform: scale(0) rotate(360deg); opacity: 0; }
}
@keyframes sparkleFloat {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* Sparkle burst */
@-webkit-keyframes sparkleGrow {
    0% { -webkit-transform: translateX(-50%) scale(0); opacity: 0; }
    50% { -webkit-transform: translateX(-50%) scale(1.5); opacity: 1; }
    100% { -webkit-transform: translateX(-50%) scale(0.8); opacity: 0; }
}
@keyframes sparkleGrow {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    50% { transform: translateX(-50%) scale(1.5); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.8); opacity: 0; }
}

/* Bubble float */
@-webkit-keyframes bubbleFloat {
    0% { -webkit-transform: translateY(0) scale(0.5); opacity: 0; }
    20% { -webkit-transform: translateY(-10px) scale(1); opacity: 1; }
    100% { -webkit-transform: translateY(-80px) scale(0.3); opacity: 0; }
}
@keyframes bubbleFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-10px) scale(1); opacity: 1; }
    100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}

/* Note float (dancing) */
@-webkit-keyframes noteFloat {
    0% { -webkit-transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { -webkit-transform: translateY(-5px) rotate(10deg); opacity: 1; }
    100% { -webkit-transform: translateY(-50px) rotate(-20deg); opacity: 0; }
}
@keyframes noteFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { transform: translateY(-5px) rotate(10deg); opacity: 1; }
    100% { transform: translateY(-50px) rotate(-20deg); opacity: 0; }
}

/* Coin float up */
@-webkit-keyframes coinFloatUp {
    0% { -webkit-transform: translateY(0); opacity: 1; }
    100% { -webkit-transform: translateY(-60px); opacity: 0; }
}
@keyframes coinFloatUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-60px); opacity: 0; }
}