/* Estilos personalizados para la aplicación */
        html, body {
            overflow: hidden; /* Evita el scroll en la página principal */
            height: 100%;
            font-family: 'Fredoka', sans-serif;
        }

        /* Estilos para las piezas del rompecabezas */
        .puzzle-piece {
            background-size: cover;
            background-repeat: no-repeat;
            transition: all 0.2s ease-in-out;
            cursor: grab;
            /* El borde se eliminará para piezas con forma, ya que el clip-path lo define */
            border: 2px solid white; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 4px;
        }
        
        /* Estilo específico para piezas con forma para quitar el borde cuadrado */
        .puzzle-piece.shaped {
            border: none;
            border-radius: 0;
            /* Agregamos un filtro de sombra para dar profundidad */
            filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
        }


        /* Estilo para la pieza que se está arrastrando */
        .dragging {
            opacity: 0.7;
            cursor: grabbing;
            transform: scale(1.1);
            z-index: 10;
        }

        /* Estilos para el contenedor del rompecabezas cuando está activo */
        #puzzle-container.grid-active {
            display: grid;
            border: 4px dashed #a7f3d0; /* Un borde verde menta */
            padding: 4px;
            background-color: rgba(255, 255, 255, 0.5);
        }

        /* Estilos para el rompecabezas completado */
        #puzzle-container.puzzle-complete {
            border: none;
            padding: 0;
            background-color: transparent;
        }
        #puzzle-container.puzzle-complete .puzzle-piece {
            border: none;
            border-radius: 0;
            box-shadow: none;
            cursor: default;
        }

        /* Animación para el modal de victoria */
        #win-modal > div {
            animation: zoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes zoomIn {
            from { transform: scale(0.5); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }