table {
    border-collapse: collapse;
    border-spacing: 0; /* Ensures no gaps between cells */
    margin: 0 auto;
    color: #EEE2DC; /* Sets the text color to white */
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    background-color: #EEE2DC;

}

td {

    text-align: center; /* Center text horizontally */
    vertical-align: middle; /* Center text vertically */      
    user-select: none; /* Prevents text selection */
    font-size: clamp(5px, 2vw, 6px); /* Dynamically adjusts font size */
    /*font-size: clamp(5px, 2vw, 10px); /* Dynamically adjusts font size */
    overflow: hidden; /* Ensures text doesn't overflow */
    white-space: nowrap; /* Prevents text wrapping */
    text-overflow: ellipsis; /* Adds ellipsis if text overflows */
    min-width: 8px;   
    height: 8px;
    
}


td.black {
    background-color: rgb(60, 60, 60); /* Sets the background color to black */
    box-shadow: 0 0 0 1px rgb(60, 60, 60); /* Simulates a border */

}
td.spot {
    background-color: #123C69; 
    /* border: 1px solid #EEE2DC; */
    border-radius: 3px; 



}

td.road {
    background-color: #FBEAEB; 


}
td.path {
    background: repeating-linear-gradient(
        90deg, /* Vertical lines */
        black 0px,
        black 1px,
        transparent 1px,
        transparent 2px
    );

}
td.pathV {
    background: repeating-linear-gradient(
        0deg, /* Vertical lines */
        black 0px,
        black 1px,
        transparent 1px,
        transparent 2px
    );

}
td.white {
    background-color: #EEE2DC;
    border: 0px solid;

}

td.start {
    background-color: #AC3B61;
}
td.target {
    background-color: #AC3B61;
;
}
td.highlight {
    position: relative; /* Enable positioning for the dot */
}
td.road.highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: grey; /* Initial color is grey */
    border-radius: 50%; /* Make it a circle */
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add a shadow to the dot */
    transform: translate(-50%, -50%); /* Center the dot */
    animation: colorSwitch 1s infinite alternate; /* Add animation to switch colors */
}
@keyframes colorSwitch {
    0% {
        background-color: #AC3B61;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    100% {
        background-color: #efeafb;
        
    }
}
td.target.highlight {
    background-color: #AC3B61; /* Changes the background color of the cell */
    animation: pulsate 1.5s infinite; /* Adds a pulsating animation */
    z-index: 1; /* Ensures the cell appears above others */
    position: relative; /* Allows the cell to overlap others */
}
@keyframes pulsate {
    0% {
        transform: scale(1.25);
        opacity: 1;
    }
    50% {
        transform: scale(1.45);
        opacity: 1;
    }
    100% {
        transform: scale(1.25);
        opacity: 1;
    }
}