/* container: fixed size, green border, hide native scrollbars */
#grid-container {
    width: 700px;
    height: 800px;
    border: 2px solid green;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background: lightpink;
}
#grid-container:active {
    cursor: grabbing;
}

/* inner grid: 100×100 cells of 100×100px each */
#grid {
    width: 2000px;   /* 100 cols × 100px 10000 */
    height: 2000px;  /* 100 rows × 100px 10000 */
    display: grid;
    grid-template-columns: repeat(20, 100px);
    grid-template-rows:    repeat(20, 100px);
    position: relative;
}

#grid div.circle-tile {
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}

/* each SVG cell */
.circle-svg {
    width: 100px;
    height: 100px;
    display: block;
}

/* the circle itself: 50px radius, thin black stroke */
.circle {
    stroke: black;
    stroke-width: 1;
}

/* ------ LETTER PALETTE ------ */
#letter-palette {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    user-select: none;
    touch-action: none;
    background: lightskyblue;
}

/* your existing #grid-container, #grid, .circle-svg, .circle styles go here... */

/* draggable letter circles */
.draggable-svg {
    width: 100px;
    height: 100px;
    cursor: move;
    touch-action: none;   /* enable jQuery UI touch handling */
    transition-property: transform, filter;
    transition-duration: 160ms;
    transition-timing-function: ease; /* <- here */
    transform-origin: 50% 50%;
}

.draggable-svg.ui-draggable-dragging {
    transform: scale(1.50);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}

div.dropoff {
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: lightgoldenrodyellow;
}