/* Semillero Digital — estilos base compartidos entre juegos/simuladores */
/* (Tailwind CDN, sin build step). Cargar ANTES del <style> con las reglas */
/* propias de cada juego (mismo <link>, siempre arriba de ese <style>), */
/* así por cascada lo específico de cada página sigue pudiendo pisar lo */
/* genérico si hace falta (ej. un body con gradiente propio en vez del */
/* fondo gris plano de acá). */

body {
    color: #191716;
    background-color: #F3F4F6;
}

/* Degradé institucional violeta, usado en banners/headers destacados */
.bg-semillero-gradient {
    background: linear-gradient(135deg, #5A25AB 0%, #3E187A 100%);
}

/* Scrollbar prolija, consistente en todos los juegos */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Entrada suave para tarjetas/resultados que aparecen dinámicamente por JS */
@keyframes semillero-bounce-in {
    0% { transform: scale(0.9); opacity: 0; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-bounce-short {
    animation: semillero-bounce-in 0.35s ease-out;
}

/* Borde pulsante sutil, para llamar la atención sobre un elemento activo */
.pulse-subtle {
    animation: semillero-pulse-border 2s infinite;
}
@keyframes semillero-pulse-border {
    0%, 100% { border-color: rgba(80, 198, 154, 0.4); }
    50% { border-color: rgba(250, 133, 52, 0.9); }
}

/* Hover genérico de tarjeta interactiva (checkpoints, resultados, cards) */
.card-pop {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-pop:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(90, 37, 171, 0.15);
}

/* Confetti de celebración (usar junto con la función launchConfetti() de games-theme.js) */
.confetti-piece {
    position: fixed; top: -12px; z-index: 200; pointer-events: none; border-radius: 2px;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(var(--spin)); opacity: .9; }
}