#divGeckoFour {
    display: none;
    align-items: center;
    justify-content: center;
    width: 840px;
    height: 600px;
}

#divGeckoFourGecko,
#divGeckoFourGecko2 {
    transform: rotate(2deg);
    width: 190px;
    position: relative;
    top: 16px;
    left: -71px;
}

#imgGeckoFourFullBackground,
#imgGeckoFourForeground {
    position: fixed;
    width: 840px;
    height: 600px;
}


#divGeckoFourGecko2 {
    left: 44px;
}

#divGeckoPainting {
    /* width: 2400px;
    height: 389px;
    position: relative;
    top: -97px;
    left: -12px;
    background-color: #ffffff;
    transform: perspective(2350px) rotateY(-15deg);
    transform-origin: left center; */
    width: 680px;
    height: 415px;
    position: relative;
    top: -87px;
    left: -13px;
    background-color: #ffffff;
    transform-origin: left center;
    transform: skewX(0.2deg) skewY(-0.8deg) scaleX(1.023) rotate(0.5deg)
}

.painting-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 0;
    box-sizing: border-box;
}

/* Grid layouts for different numbers of paintings */
.painting-grid.grid-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.painting-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.painting-grid.grid-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.painting-grid.grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Special layout for 3 items - first item spans 2 columns */
.painting-grid.grid-3 .painting-cell:first-child {
    grid-column: 1 / 3;
}

.painting-cell {
    border: 3px solid #ccc;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.painting-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}

#paintingControls {
    display: none;
    /* Hidden by default, shown only when divGeckoFour is active */
    font-size: 12px;
}

#divGeckoFour.active #paintingControls {
    display: block;
}

#paintingControls input[type="number"] {
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

#paintingControls input[type="color"] {
    border: 1px solid #ccc;
    cursor: pointer;
}

#paintingControls input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

#paintingControls input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

#paintingControls button {
    transition: background-color 0.2s;
}

#paintingControls button:hover {
    background: #45a049 !important;
}

#resetBackgroundBtn:hover,
#resetBorderBtn:hover {
    background: #555 !important;
}

.painting-cell.empty {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px dashed #666;
}

.painting-image.placeholder {
    opacity: 0.3;
    filter: grayscale(100%);
}