.tile {
    display: block;
    height: 300px;
    width: 300px;
    border: 4px black solid;
    background-image: url("../images/battleship-squares-512.png");
    background-size: cover;
    background-position: 0 0;
}

.tile-with-destroyer-icon {
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 0;
}

.tile-with-cruiser-icon {
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 -300px;
}

.tile-with-submarine-icon {
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 -600px;
}

.tile-with-battleship-icon {
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 -900px;
}

.tile-with-carrier-icon {
    background-image: url("../images/battleship-icons-5.png");
    background-size: cover;
    background-position: 0 0;
}

.board {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 2px;
}

.destroyer-icon {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 0;
}

.destroyer-icon-explosion {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 -128px;
}

.cruiser-icon {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 768px;
}

.cruiser-icon-explosion {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 640px;
}

.submarine-icon {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 512px;
}

.submarine-icon-explosion {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 384px;
}

.battleship-icon {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 256px;
}

.battleship-icon-explosion {
    height: 128px;
    width: 128px;
    background-image: url("../images/battleship-icons-1-4.png");
    background-size: cover;
    background-position: 0 128px;
}

.carrier-icon {
    height: 128px;
    width: 256px;
    background-image: url("../images/battleship-icons-5.png");
    background-size: cover;
    background-position: 0 0;
}

.carrier-icon-explosion {
    height: 128px;
    width: 256px;
    background-image: url("../images/battleship-icons-5.png");
    background-size: cover;
    background-position: 0 128px;
}

.ammo-icon {
    height: 64px;
    width: 128px;
    background-image: url("../images/ammo-icon.png");
    background-size: cover;
}

.player-ship {
    height: 128px;
    width: 256px;
    background-image: url("../images/player-ship.png");
    background-size: cover;
    background-position: 0 0;
}

.crosshairs {
    height: 128px;
    width: 128px;
    background-image: url("../images/crosshair_4.png");
    background-size: cover;

    position: absolute;
    top: 50vh;
    left: 50vw;
    cursor: none;
}

.gameover-dialog {
    background-color: #1d839b;
    padding: 16px;
    border-radius: 24px;
    box-shadow: 4px 6px 12px 0 black;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}