/* Centers all page content and sets a clean default font  */
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

/* Adds spacing below the main Battleship title */
h1 {
    margin-bottom: 20px;
}

/* Removes gaps between table borders and centers each board*/
table {
    border-collapse: collapse;
    margin: 0 auto;
}

/* Styles all board cells and header cells with fixed size and borders */
td, th {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid black;
    font-weight: bold;
}

/* Labels */
.label {
    background-color: #ddd;
}

/* Cell States */
.water {
    background-color: #79afd2;
    color: white;
}
.hit {
    background-color: #e74c3c;
    color: white;
}
.miss {
    background-color: #ecf0f1;
    color: black; }

/* Ship cell style for human-board, shows the player's own ships */
.ship {
    background-color: #5d8a61;
    color: white;
}

/* Outline computer's last move with orange*/
.last-computer-move {
    outline: 3px solid orange;
    outline-offset: -3px;
}

/* Places both boards side-by-side with spacing */
.boards-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Styles section headings above each board */
.board-section h2 {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

/*
 * Sunk ship cells: dark background with a black-and-yellow pulsing glow.
 * Applied to every cell of a ship the moment it is fully destroyed.
 * Uses !important to override the .hit background so the sunk state
 * is always visually distinct from a regular hit.
 */

.sunk {
    background-color: #1a1a1a !important;
    color: #f1c40f !important;
    box-shadow: none;
    animation: none;
}

/* Shows crosshair cursor for clickable attack cells */
#computer-board td.water { cursor: crosshair; }

/* Shows blocked cursor for already attacked cells */
#computer-board td.hit,
#computer-board td.miss { cursor: not-allowed; }

/* Uses normal cursor on the player's board */
#human-board td { cursor: default; }