/* =====================================
   Puzzle UX — shared interaction layer
   ===================================== */

.puzzleTargetActive {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
    transform: translateY(-2px);
}

.puzzlePlacementCell {
    position: relative;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        outline-color 140ms ease,
        background-color 140ms ease;
}

.puzzlePlacementCell.puzzleTargetActive {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.puzzlePlacementCell.puzzlePlacementFilled {
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .14);
}

.puzzlePlacementInput {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 120ms ease;
}

.puzzlePlacementInput:focus {
    outline: none;
    transform: scale(1.04);
}

.puzzlePlacementInput::placeholder {
    opacity: .55;
}

.puzzlePlacementAnimation {
    animation: puzzlePlacementSnap 180ms ease-out;
}

.puzzleFeedbackCorrect,
.puzzleFeedbackWrong,
.puzzleFeedbackNeutral {
    transition: opacity 160ms ease, transform 160ms ease;
}

.puzzleFeedbackCorrect {
    transform: scale(1.03);
}

.puzzleFeedbackWrong {
    transform: translateX(-2px);
}

@keyframes puzzlePlacementSnap {
    0% {
        transform: scale(.96);
        opacity: .72;
    }
    65% {
        transform: scale(1.04);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .puzzlePlacementCell,
    .puzzlePlacementInput {
        transition: none;
    }

    .puzzlePlacementAnimation {
        animation: none;
    }
}