/* Drag and Drop Styles */

/* Dragging tile styles */
.tile.dragging {
    opacity: 0.6;
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: grabbing !important;
    z-index: 1000;
    pointer-events: none;
}

/* Dim effect for other tiles during drag */
.tile-container.dragging-active .tile:not(.dragging):not(.drag-over) {
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Drag hover state */
.tile.drag-over {
    transform: scale(1.02);
    background: rgba(26, 127, 100, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(26, 127, 100, 0.2);
    opacity: 1 !important; /* Override dim effect for hover target */
}

/* Draggable tile base styles */
.tile[draggable="true"] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.tile[draggable="true"]:active {
    cursor: grabbing;
}

/* Enhanced drop animation */
@keyframes dropComplete {
    0% {
        transform: scale(1.05);
        background-color: rgba(26, 127, 100, 0.2);
        box-shadow: 0 8px 16px rgba(26, 127, 100, 0.3);
    }
    50% {
        transform: scale(1.02);
        background-color: rgba(26, 127, 100, 0.1);
        box-shadow: 0 4px 8px rgba(26, 127, 100, 0.2);
    }
    100% {
        transform: scale(1);
        background-color: transparent;
        box-shadow: none;
    }
}

.tile.drop-complete {
    animation: dropComplete 0.5s ease-out forwards;
}

/* Mobile touch support */
@media (hover: none) {
    .tile[draggable="true"] {
        touch-action: none;
    }
}

#drag-image {
    opacity: 0.6;
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1000;
}