body {
    font-family: 'Comic Sans MS', sans-serif;
    margin: 0;
    background: url(images/board-abs.png) no-repeat center, black;
    min-width: 800px;
    background-size: cover;
    background-attachment: fixed;
}
img {
    user-select: none;
    user-drag: none;
    -webkit-user-drag: none;
}
body:has(div#board[disabled]) {
    background-blend-mode: luminosity;
}
div#board[disabled] {
    pointer-events: none;
    filter: grayscale(1);
    transition: .3s;
}
div#board {
    display: flex;
    flex-direction: column;
    transition: .8s;
}
.pre-messageArea:has(div#messageArea:empty) {opacity: 0;}
.pre-messageArea {
    height: 4rem;
    background: #00000059;
    box-shadow: 0 5px 10px -5px;
    display: flex;
    transition: .3s;
    z-index: 1;
    user-select: none;
    position: relative;
}
div#messageArea:empty {opacity: 0;}
div#messageArea {
    text-shadow: 0 0 8px black, 0 0 8px black;
    border-radius: 15px;
    transition: .3s;
    margin: 16px auto;
    width: fit-content;
    font-size: 24px;
    color: white;
    font-weight: bold;
}
.mainboard {
    border: solid 5px lawngreen;
    box-shadow: 0 0 15px 10px lawngreen;
    width: fit-content;
    margin: auto;
    background: #00000080;
}
.mainboard tr::before {
    content: attr(data-xcnt);
    font-size: 34px;
    transform: translate(-10px, 50px);
    line-height: 0;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
    position: absolute;
    color: black;
    font-weight: bold;
}
.mainboard td:empty {
    box-shadow: inset 0 0 5px lawngreen;
    background: #00000090;
    transition: .3s;
}
.mainboard td[class] {
    border: solid 1px black;
    box-shadow: inset 0 0 15px black;
}
.mainboard td::before {
    content: attr(data-xcnt);
    font-size: 34px;
    transform: translate(35px, -45px);
    line-height: 0;
    text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
    position: absolute;
    color: black;
    font-weight: bold;
}
.mainboard td {
    width: 94px;
    height: 94px;
}
form {
    padding: 15px;
    border-radius: 15px;
    background-color: darkcyan;
}
form input {
    background-color: rgb(152,207,113);
    border-color: rgb(83,175,19);
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Comic Sans MS', sans-serif;
}
.hit {
    background:url("images/ship-orange-w.png") no-repeat center center!important;
}
.miss {
    background:url("images/miss-gray.png") no-repeat center center!important;
}
.fireplace {
    width: fit-content;
    display: flex;
    justify-content: center;
    margin: 2rem auto;
    box-shadow: 0 0 20px 10px black;
    border-radius: 15px;
}
.fireplace #fireButton:hover {animation: juggle .5s infinite ease; transition: .7s;}
.shownMsgWin {
    animation: dancing 4s infinite ease-in-out;
    transition: .2s;
    font-size: 56px;
    color: lime;
    text-shadow: 0 3px 20px lime;
    width: fit-content;
    margin: 1rem auto;
}
.btn-reset[disabled] {
    pointer-events: none;
    filter: grayscale(1);
}
.btn-reset {
    margin: 4rem auto 1rem;
    font-size: 24px;
    width: fit-content;
    padding: .5rem;
    border-radius: 15px;
    cursor: pointer;
    border: solid 3px gold;
    color: gold;
    box-shadow: 0 0 18px 1px gold;
    transition: .3s;
}
.btn-reset:hover, .btn-info:hover {
    transform: scale(1.1);
}
.showSpecMsg.hidden {transform: scale(0)!important;}
.showSpecMsg {
    position: absolute;
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    place-content: center;
    top: 0;
    transform: scale(1);
    animation: showMsg .8s;
    transition: .8s;
}
.showSpecMsg .container {
    padding: 1rem;
    background: rgb(100 149 237 /50%);
    font-weight: bold;
    box-shadow: 0 0 20px 15px rgb(100 149 237 /54%);
    user-select: none;
}
.showSpecMsg .container > div {
    border-radius: 15px;
    background: rgb(100 149 237 /50%);
    box-shadow: 0 0 20px 15px rgb(100 149 237 / 54%);
    backdrop-filter: blur(10px);
}
@keyframes juggle {
    0% {box-shadow: 0 0 1px 1px red;} 66% {box-shadow: 0 0 15px 10px maroon;}
}
@keyframes dancing {
    0% {transform: translate(0px, 0px);}
    20% {transform: translate(15px, -15px);}
    40% {transform: translate(15px, 15px);}
    60% {transform: translate(-15px, -15px);}
    80% {transform: translate(-15px, 15px);}
    100% {transform: translate(0px, 0px);}
}
@keyframes showMsg {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
.mode-choose {cursor: pointer; position: relative;}
.mode-choose div {
    transition: .3s;
    border-radius: 50%;
    width: 150px;
    background-repeat: no-repeat;
    height: 150px;
    background-size: contain;
    border: solid 5px white;
}
.mode-choose[disabled] div {
    filter: grayscale(1);
}
.mode-choose:not([disabled]):hover div {
    border: solid 5px lawngreen!important;
    transform: translateY(-8px);
}
.mode-choose[disabled] {
    cursor: not-allowed;
}
.mode-choose[disabled]:before {
    content: 'СКОРО';
    position: absolute;
    font-size: 30px;
    color: red;
    z-index: 1;
    transform: rotate(16deg);
    top: 40%;
    left: 20%;
}
.generateSquare {
    background: black;
    display: flex;
    flex-wrap: wrap;
}
.generateSquare .dot.off {
    background: black;
}
.generateSquare .dot {
    margin: 8px;
    min-width: 16px;
    height: 16px;
    background: white;
    transition: .3s;
}