.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: var(--puzzle-width, 100%);
    max-width: var(--puzzle-max-width, none);
    aspect-ratio: 1/1;
    position: relative;
    --puzzle-gap: 2%;
    --puzzle-tile-size: calc((100% - (3 * var(--puzzle-gap))) / 4);
}

.puzzle-grid .tile {
    width: var(--puzzle-tile-size);
    height: var(--puzzle-tile-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-radius: 20px; 
    overflow: hidden;
}

.puzzle-grid .tile img {
    width: 101%;  /* To hide the underlying shadow box */
    height: 101%; 
    object-fit: contain;
}

.puzzle-grid .tile:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.puzzle-grid .empty {
    background: transparent;
    box-shadow: none;
    border: none;
    cursor: default;
}

.puzzle-grid .empty:hover {
    transform: none;
    box-shadow: none;
}

.puzzle-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    font-size: clamp(16px, 3vw, 18px);
    color: #666;
}

/* Position classes will be generated by PHP */