/* Shake animation for incorrect moves */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    20% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    30% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    40% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    50% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    60% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    70% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    80% {
        transform: translateX(5px) rotate(-0.5deg);
    }

    90% {
        transform: translateX(-5px) rotate(0.5deg);
    }

    100% {
        transform: translateX(0);
    }
}

.shake-effect {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Bounce-in animation for successful moves feedback */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounce-in-effect {
    animation: bounceIn 0.7s forwards;
}

/* Fireworks effect */
.firework {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    animation: firework-burst 1s forwards;
    z-index: 99; /* Below feedback overlay */
}

@keyframes firework-burst {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    10% {
        opacity: 1;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

/* Full-page overlay for feedback */
.overlay-feedback {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* On top of everything */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when hidden */
    transition: opacity 0.3s ease-in-out;
}

    .overlay-feedback.show {
        opacity: 1;
        pointer-events: auto; /* Block clicks when visible */
    }

.overlay-feedback-icon {
    font-size: 15rem; /* Large icon size */
    font-weight: bold;
    color: white; /* Icon color */
    text-shadow: 0 0 20px rgba(0,0,0,0.5); /* Optional shadow for pop */
    animation: bounceIn 0.7s forwards; /* Apply bounce to the icon itself */
}

.overlay-success {
    background-color: rgba(76, 175, 80, 0.5); /* Green with 50% opacity */
}

.overlay-error {
    background-color: rgba(244, 67, 54, 0.5); /* Red with 50% opacity */
}

.fidel-grouping-puzzle-pieces-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(4rem, 8rem));
    gap: 0.25rem;
    justify-items: center;
    align-items: center;
    background-color: #fff; /* White background for puzzle pieces grid */
    border-radius: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem; /* Space before the line */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Darker shadow for separation */
    border-bottom: none; /* Removed dashed border */
    padding:.25rem;
}

.puzzle-piece {
    background-color: #FBC02D; /* Yellow */
    color: #1B5E20; /* Dark Green text */
    border-radius: 15px;
/*    padding: 15px 20px;
*/    font-size: 3rem;
    font-weight: 700;
    cursor: grab;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-align: center;
    user-select: none;
    line-height: 1; /* Adjust line height to center text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    padding:1rem;
    width:100%;
}

    .puzzle-piece:active {
        cursor: grabbing;
        transform: scale(1.05);
    }

.fidel-grouping-drop-targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* Adjusted for larger rectangular targets */
    gap: .25rem;
    justify-items: center;
    align-items: start; /* Align to top for collected pieces */
    background-color: #fff; /* White background for drop targets grid */
    padding: .5rem;
    border-radius: 15px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.drop-target {
    background-color: #8BC34A; /* Lighter Green */
    color: #1B5E20; /* Dark Green text for base letter */
    border-radius: 15px; /* Rectangular */
    padding: 0; /* Remove padding to allow full control of inner elements */
    font-size: 3rem; /* Base font size for the container */
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid #388E3C; /* Solid Darker Green border */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    /* Grid for collected pieces arrangement */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(3, 1fr); /* 3 rows */
    align-items: center; /* Center items in their cells */
    justify-items: center; /* Center items in their cells */

    width: 150px; /* Fixed width for consistency */
    height: 150px; /* Fixed height for consistency */
    position: relative; /* For absolute positioning of feedback */
    overflow: hidden; /* Crucial to keep collected pieces within bounds */
}

.drop-target-base-letter { /* New class for the base letter itself */
    grid-area: 2 / 2; /* Center cell of the 3x3 grid */
    font-size: 2.5rem; /* Slightly smaller to make room */
    font-weight: 700;
    color: #D32F2F; /* Keep base letter color (Red) */
    line-height: 1;
    margin: 5px; /* Small margin to separate from collected pieces */
    z-index: 2; /* Ensure it's above collected pieces */
}


.drop-target.drag-over {
    background-color: #689F38; /* Darker green on drag over */
    border-color: #FBC02D; /* Darker yellow border */
}

.collected-piece {
    font-size: 1.2rem; /* Smaller font */
    font-weight: 400;
    color: #1B5E20; /* Dark Green text for collected piece */
    background-color: #FFFDE7; /* Very light yellow background for collected piece */
    padding: 3px 6px;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    /* Initial state for animation */
    opacity: 0;
    transform: scale(0);
    animation: bounceIn 0.5s forwards; /* Animation when collected */
    z-index: 1; /* Below base letter */
}

.button-group-container { /* New container for all buttons */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between rows of buttons */
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
}

.fidel-grouping-level-buttons-group {
/*    display: flex;
*/    justify-content: center;
    gap: 10px; /* Space between level buttons */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.level-button, .play-again-button, .show-solution-button, .level-toggle-button {
    background-color: #D32F2F; /* Red */
    color: white;
    padding: 10px 20px; /* Slightly smaller padding for level buttons */
    border-radius: 15px;
    font-size: 1.2rem; /* Slightly smaller font for level buttons */
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    line-height: 1.3; /* Adjust line height for bilingual text */
}

    .level-button:hover, .play-again-button:hover, .show-solution-button:hover, .level-toggle-button:hover {
        background-color: #B71C1C; /* Darker Red */
        transform: translateY(-2px);
    }

    .level-button.active {
        background-color: #388E3C; /* Green for active level */
        box-shadow: 0 0 0 3px #FBC02D, 0 4px 8px rgba(0, 0, 0, 0.3); /* Yellow outline */
        transform: scale(1.05);
    }

/* Adjustments for Play Again/Show Solution buttons */
.play-again-button, .show-solution-button {
    padding: 15px 30px;
    font-size: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .puzzle-piece {
        font-size: 2.75rem;
    }

    .drop-target {
        font-size: 2rem; /* Adjusted for smaller screen */
        width: 120px; /* Adjusted for smaller screen */
        height: 120px; /* Adjusted for smaller screen */
        min-height: 120px;
    }

    .drop-target-base-letter {
        font-size: 1.8rem; /* Adjusted for smaller screen */
    }

    .fidel-grouping-puzzle-pieces-grid {
        grid-template-columns: repeat(8, minmax(3rem, 5rem));
    }
    
    .fidel-grouping-drop-targets-grid {
        padding: .5rem;
    }

    .overlay-feedback-icon {
        font-size: 10rem;
    }

    .level-button, .play-again-button, .show-solution-button, .level-toggle-button {
        font-size: 1.1rem;
        padding: 8px 15px;
    }

    .play-again-button, .show-solution-button { /* Override for main action buttons */
        font-size: 1.3rem;
        padding: 12px 25px;
    }

    .collected-piece {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .puzzle-piece {
        font-size: 2.5rem;
    }

    .drop-target {
        font-size: 1.5rem; /* Adjusted for smallest screen */
        width: 100px;
        height: 100px; /* Adjusted for smallest screen */
        min-height: 100px;
    }

    .drop-target-base-letter {
        font-size: 1.5rem;
    }

    .puzzle-container {
        padding: 15px;
        margin: 20px auto;
    }

    .overlay-feedback-icon {
        font-size: 7rem;
    }

    .collected-piece {
        font-size: 0.9rem;
        padding: 2px 4px;
    }

    .level-button, .play-again-button, .show-solution-button, .level-toggle-button {
        font-size: 1rem;
        padding: 6px 12px;
    }

    .play-again-button, .show-solution-button { /* Override for main action buttons */
        font-size: 1.1rem;
        padding: 10px 20px;
    }

    .fidel-grouping-level-buttons-group {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 10px;
    }

    .play-again-button-group {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 10px;
    }

    .fidel-grouping-puzzle-pieces-grid {
        grid-template-columns: repeat(4, minmax(3rem, 5rem));
    }
}