* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: #f4f4f4; /* Color de fondo exacto */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    overflow: hidden;
}

.main-container {
    position: relative;
    width: 95%; /* Asegura que en móvil no se pegue a los bordes */
    max-width: 600px; 
    aspect-ratio: 1080 / 1280; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

.background-base {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mantiene la proporción de la invitación */
    display: block;
}

/* Configuración de los Legos */
.lego {
    position: absolute;
    height: auto;
    filter: drop-shadow(8px 12px 10px rgba(0,0,0,0.2));
    z-index: 10;
}

/* --- POSICIONES Y ROTACIONES --- */

.lego-violeta-top {
    width: 19%;
    top: 4%;
    left: -2%;
    transform: rotate(-15deg);
    animation: float1 5s ease-in-out infinite;
}

.lego-azul-top {
    width: 15%;
    top: 2%;
    right: 2%;
    transform: rotate(20deg);
    animation: float2 6s ease-in-out infinite;
}

.lego-morada-right {
    width: 9%;
    top: 22%;
    right: 5%;
    transform: rotate(-10deg);
    animation: float3 4s ease-in-out infinite;
}

.lego-amarilla-mid {
    width: 18%;
    top: 45%;
    right: -3%;
    transform: rotate(12deg);
    animation: float1 7s ease-in-out infinite;
}

.lego-morada-left {
    width: 15%;
    top: 52%;
    left: -2%;
    transform: rotate(-25deg);
    animation: float2 5.5s ease-in-out infinite;
}

.lego-azul-bottom {
    width: 17%;
    bottom: 4%;
    left: 4%;
    transform: rotate(15deg);
    animation: float3 6.5s ease-in-out infinite;
}

.lego-violeta-bottom {
    width: 19%;
    bottom: 6%;
    right: 4%;
    transform: rotate(-8deg);
    animation: float1 5.8s ease-in-out infinite;
}

/* --- ANIMACIONES --- */

@keyframes float1 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(-2deg); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0) rotate(15deg); }
    50% { transform: translateY(-15px) rotate(18deg); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-25px) rotate(-12deg); }
}

/* Optimización para móviles */
@media (max-width: 480px) {
    .lego {
        filter: drop-shadow(4px 6px 6px rgba(0,0,0,0.15));
    }
    .main-container {
        width: 100%; /* En móviles muy pequeños aprovecha el ancho */
        padding: 10px;
    }
}