:root {
    --primary-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-color: #f3f4f6;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
    z-index: -1;
    animation: drift 20s infinite linear;
}

.main-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 20px;
    z-index: 1; /* Asegurar que esté por debajo del overlay */
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.upload-area {
    border: 2px dashed #ccc;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}
.upload-area:hover { background: #f8f9fa; border-color: #764ba2; }
.file-input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }

.video-container, .preview-img {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#camera-view { width: 100%; transform: scaleX(-1); }

.btn-gradient {
    background: var(--primary-grad);
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    transition: transform 0.2s;
}
.btn-gradient:hover { color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4); }
.btn-gradient:disabled { background: #ccc; transform: none; }

/* --- ESTILOS DEL NUEVO OVERLAY DE GANADOR --- */
.winner-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro */
    backdrop-filter: blur(8px);
    z-index: 9999; /* Por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.winner-content {
    text-align: center;
    color: white;
    position: relative;
    animation: zoomBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.winner-icon { font-size: 5rem; display: block; margin-bottom: 10px; text-shadow: 0 0 30px rgba(255,255,255,0.5); }
.winner-title { font-size: 3.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin: 0; text-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.winner-subtitle { font-size: 1.2rem; opacity: 0.9; }

/* Colores específicos para el texto del ganador */
.text-fruta { color: #ff6b6b; }
.text-lacteo { color: #4dabf7; }
.text-grano { color: #fcc419; }

@keyframes zoomBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* --- NUEVA ANIMACIÓN DE LLUVIA (ZOOM + VISIBILIDAD) --- */
.floating-img {
    position: fixed;
    bottom: -100px;
    width: 80px; /* Tamaño base */
    z-index: 9998; /* Justo debajo del texto del overlay */
    pointer-events: none;
    opacity: 1; /* Totalmente visible */
    animation: floatZoom 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes floatZoom {
    0% {
        bottom: -100px;
        transform: rotate(0deg) scale(0.5); /* Empieza pequeño */
        opacity: 1;
    }
    100% {
        bottom: 110vh; /* Se va por arriba */
        transform: rotate(360deg) scale(1.5); /* Termina GRANDE (Zoom In) */
        opacity: 0; /* Se desvanece solo al final */
    }
}