.hide {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Start of Grouped CSS */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #111827; /* bg-gray-900 */
}

/* Header Starts here */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.header-text {
    font-family: 'Orbitron', sans-serif;
}

.header-text h1 {
    font-size: 3rem;
    margin-bottom: 0;
    color: rgb(0, 195, 221);
}

.header-text p {
    color: rgb(180, 178, 178);
}

.header-info {
    background-color: #283142;
    width: 50%;
    height: 9rem;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    color: rgb(180, 178, 178);
}
.header-info p {
    margin-top: 0px;
    font-size: 1.1rem;
}

.header-buttons {
    display: flex;
    gap: 1rem;
} 

.header-buttons button {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-size: medium;
}

.header-buttons #play-button {
    background-color: rgb(0, 138, 156);
    color: white;
    font-weight: bold;
}

#restart-button, #swap-button {
    background-color: #59595a;
    color: white;
    font-weight: bold;
}

.header-buttons button:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

.header-buttons button:active {
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
/* Header Ends here */

/* main boards start here */
#board-container {
    display: flex;
    justify-content: center;
    gap: 7rem;
}

.player-fleet, .enemy-fleet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.player-fleet p {
    font-size: 2rem;
    font-weight: bold;
    color: rgb(0, 132, 150);
}

.enemy-fleet p {
    font-size: 2rem;
    font-weight: bold;
    color: rgb(175, 3, 3);
}

#player-board, #computer-board{
    gap: 0.4rem;
}

.board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: 40rem;
    height: 30rem;
    border: none;
}

.cell {
    display: flex;
    position: relative;
    background-color: #1d2638;
    border-radius: 2px;
}

#player-board .ship {
    background-color: rgb(54, 54, 230);
}

.miss {
    background-color: #6d7581;
}



.hit {
    background-color: rgb(0, 0, 77);
}

.hit::before,
.hit::after {
    content: ''; 
    position: absolute; 
    top: 50%;
    left: 50%;
    background-color: rgb(172, 0, 0); 
}


.hit::before {
    width: 20px; 
    height: 4px;  
    transform: translate(-50%, -50%) rotate(45deg); 
}


.hit::after {
    width: 20px; /* Make sure the dimensions match the ::before element */
    height: 4px;
    transform: translate(-50%, -50%) rotate(-45deg); 
}

#computer-board .cell:hover {
    cursor: crosshair;
    background-color: #424a58;
    transform: scale(1.05);
    transition: all 0.1s ease-in-out;
}

#computer-board .cell:active {
    transform: scale(0.95);
    transition: all 0.1s ease-in-out;
}

.display-message.winner {
    color: green;
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.display-message.loser {
    color: red;
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 0;
    padding-bottom: 10px;
}

/*# sourceMappingURL=main.7a5563baad25f8924d75.css.map*/