#gameArea {
    display: grid;
    gap: 2px;
    background-color: black; /* This creates grid lines */
    border: 2px solid black;
    margin-bottom: 20px;
    position: relative;
}

.grid-cell {
    background-color: white; /* Or any default background color */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px; /* Adjust based on your preference */
    aspect-ratio: 1 / 1;
    position: relative; /* This is important for layering */
}

/* Styles for strip mode */
.strip-mode {
    width: 100%;
    height: auto !important;
    grid-template-rows: 1fr !important;
}

.character {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: 38px;
    transition: transform 0.9s ease;
}

.character-icon {
    display: inline-block;
    transition: transform 0.9s ease;
}

.target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Below the character */
}

.direction-buttons {
    width: 200px;
    height: 200px;
    position: relative;
}

.direction-buttons .btn {
    position: absolute;
    width: 60px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

#moveUp, #moveForward {
    top: 0;
    left: 70px;
}

#moveDown, #moveBackward {
    bottom: 0;
    left: 70px;
}

#moveLeft, #rotateLeft {
    left: 0;
    top: 70px;
}

#moveRight, #rotateRight {
    right: 0;
    top: 70px;
}

#goButton {
    top: 70px;
    left: 70px;
}

/* New styles for highlighted moves */
.highlighted-move {
    color: #007bff;
    font-weight: bold;
}

/* Ensure buttons are visible */
.btn {
    z-index: 20;
}

.wall {
    background-color: #333 !important; /* Dark gray for walls */
    border: 1px solid #000;
}

.traced {
    position: relative;
}

.traced::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 1;
}