:root {
    --boxSize: 70px;
    --shipBoxSize: 68px;
    --boxMargin: 1px;
    --mediumgray: #afaeae;
    --lightblue: #dbf5f7;
    --darkblue: #439acc;
    --hitPNG: url('../images/hit.png');
    --missPNG: url('../images/miss.png')
}

body {
    margin: 0;
    gap: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: 'Arial Black', sans-serif;
    /* background-color: rgb(43, 87, 124); for viewing purpose only */
}

button {
    font-family: 'Arial Black', sans-serif;
    border: none;
    cursor: pointer;
}

header {
    padding-top: 20px;
    font-size: 80px;
    color: var(--darkblue);
    text-shadow: 2px 2px 2px black;
}

footer {
    font-family: Arial;
    display: flex;
    align-items: center;
}

/* INTRO SCREEN */
.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.boardContainer {
    display: grid;
    grid-template-columns: var(--boxSize) 1fr;
    grid-template-rows: var(--boxSize) 1fr;
    padding-bottom: 20px;
}

.boardGrid {
    display: flex;
    flex-direction: column;
    grid-area: 2 / 2 / 3 / 3;
}

.boardGrid .row {
    display: flex;
}

.boardYHeader {
    display: flex;
    grid-area: 1 / 2 / 2 / 3;
}

.boardXHeader {
    display: flex;
    flex-direction: column;
    grid-area: 2 / 1 / 3 / 2;
}

.boxHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--boxSize);
    height: var(--boxSize);
}

.boardYHeader .boxHeader {
    margin: 0px var(--boxMargin);
}

.boardXHeader .boxHeader {
    margin: var(--boxMargin) 0px;
}

.box {
    background-color: var(--lightblue);
    width: var(--boxSize);
    height: var(--boxSize);
    border-radius: 5px;
    margin: var(--boxMargin);
}


/* box state */
.hovered { 
    background-color: rgb(0, 0, 0);
}

.dropped {
    background-color: var(--mediumgray);
}

.hit {
    background-image: var(--hitPNG);
    background-size: fit-content;

}

.miss {
    background-image: var(--missPNG);
    background-size: fit-content;
    /* add noise effect */
}

.disabled {
    pointer-events: none;
}

.permanentlyDisabled {
    pointer-events: none;
}

/* ships */
.shipyard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.shipComponents {
    height: calc(var(--shipBoxSize) * 5);
    display: flex;
    column-gap: 10px;
    justify-content: center;
    align-items: center;
} 

.ship {
    height: var(--shipBoxSize);
    cursor: move;
    background-color: var(--mediumgray);
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 9px;
}

#carrier {
    width: calc(var(--shipBoxSize) * 5);
}

#carrier,
.box.carrier {
    background-color: #ef476f;
}

#battleship {
    width: calc(var(--shipBoxSize) * 4);
}

#battleship, 
.box.battleship {
    background-color: #ffd166;
}

#cruiser,
#submarine {
    width: calc(var(--shipBoxSize) * 3);
}

#cruiser,
.box.cruiser {
    background-color: #06d6a0;
}

#submarine,
.box.submarine {
    background-color: #118ab2;
}

#destroyer {
    width: calc(var(--shipBoxSize) * 2);
}

#destroyer,
.box.destroyer {
    background-color: #073b4c;
}


button.beginBattle {
    display: none;
    height: 50px;
    width: calc(var(--shipBoxSize) * 4);
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--darkblue);
}

button.resetShipyard {
    height: 50px;
    width: calc(var(--shipBoxSize) * 4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.main, 
.outro {
    display: none;
}


/*MAIN SCREEN*/

.mainHeader {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    text-align: center;
    font-size: 30px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mainHeader .restart {
    height: 50px;
    width: calc(var(--shipBoxSize) * 3);
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: var(--darkblue);
}

.playerSide,
.botSide {
    display: flex;
    flex-direction: column;
    grid-template: 1fr / 1fr 1fr;
}

.playerSide {
    margin: 0px 30px 0px 0px;
}

.botSide {
    margin: 0px 0px 0px 30px;
}

.pGraveyard,
.bGraveyard {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: min-content 1fr;
    justify-content: center;
}

.fleetHeader {
    grid-column: 1 / 3;
    text-align: center;
    font-size: 1.5rem;
    color: var(--darkblue);
}

.graveyardHeader {
    height: 2rem;
    text-align: center;
}

.pSunkShips,
.bSunkShips {
    display: grid;
    justify-items: center;
    row-gap: 10px;
}