/* ========================================= */
/* base.css - ESTRUCTURA Y ANIMACIONES BASE  */
/* ========================================= */

.hidden { display: none !important; }

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0b1a2e; 
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(77, 208, 225, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        linear-gradient(rgba(77, 208, 225, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 208, 225, 0.15) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: 0 0, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; user-select: none;
}

#game-container {
    width: 100%; max-width: 400px; height: 100vh; max-height: 850px; 
    position: relative; overflow: hidden; background: #fff;
    border-radius: 24px;
    box-shadow: 0 0 0 12px #0f172a, 0 20px 50px rgba(0,0,0,0.8), 0 0 80px rgba(77, 208, 225, 0.3); 
}

.app-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f4f6f8; overflow-y: auto; overflow-x: hidden;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-2px, -2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translate(2px, 2px) rotate(1deg); }
}
.shake-effect { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes healPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(76, 175, 80, 0)); }
    50% { filter: brightness(1.5) drop-shadow(0 0 15px rgba(76, 175, 80, 1)); }
}
.heal-effect { animation: healPulse 0.6s ease-out; }

@keyframes happyJump { 
    0%, 100% { transform: translate(-50%, -50%) scale(1, 1); } 
    30% { transform: translate(-50%, -80px) scale(0.9, 1.1); } 
    50% { transform: translate(-50%, -50%) scale(1.05, 0.95); } 
    70% { transform: translate(-50%, -70px) scale(0.95, 1.05); } 
}
.happy-jump { animation: happyJump 0.5s ease-in-out !important; }

@keyframes wobbleLight { 
    0%, 100% { transform: translate(-50%, -50%) scale(1); } 
    50% { transform: translate(-50%, -50%) scale(0.96); } 
}
.wobble-light { animation: wobbleLight 0.15s ease-in-out; }

@keyframes floatUpHeart { 
    0% { opacity: 1; transform: translateY(0) scale(1); } 
    100% { opacity: 0; transform: translateY(-40px) scale(1.5); } 
}
.heart-particle { 
    position: absolute; color: #E91E63; font-size: 24px; pointer-events: none; 
    animation: floatUpHeart 1s ease-out forwards; z-index: 20; text-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

@keyframes floatBubble {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -4px); }
}