/* style.css */
.puzzle-container {
    display: grid;
    grid-template-columns: repeat(3, 100px); /* Adjust based on your puzzle size */
    grid-template-rows: repeat(3, 100px);   /* Adjust based on your puzzle size */
    width: 300px; /* Adjust as needed */
    height: 300px; /* Adjust as needed */
    border: 2px solid black;
    position: relative;
}

.tile {
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    background-color: lightgray; /* Example tile color */
    border: 1px solid darkgray;
    position: absolute;
    transition: all 0.5s ease-in-out; /* Smooth sliding animation */
}

/* Position tiles using grid areas or direct top/left properties */
/* Example for tile 1 in initial position */
.tile1 {
    top: 0;
    left: 0;
}
.tile2 {
    top: 0;
    left: 100;
}

/* Styling for empty tile */
.empty-tile {
    background-color: white; 
    border: none;
}

/* Use CSS selectors (e.g., :checked + label + .tile) to control tile positions based on radio button state */
/* Example: When tile1_pos2 is checked, move tile1 */
#tile1_pos2:checked ~ .tile1 {
    top: 0;
    left: 100px; /* Example: Move tile 1 to the next position */
}

/* You'll need many CSS rules like the above to define the movement for each tile based on various radio button states and the empty space */