@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --c-bg: rgb(211, 211, 211);
    --c-bg-d: rgb(169, 169, 169);
    --c-bg-dr: rgb(255, 255, 255);
    --c-bg-vd: rgb(132, 132, 132);
    --c-bg-p: rgb(0, 0, 0);
    --c-n-1: rgb(0, 0, 255);
    --c-n-2: rgb(2, 130, 2);
    --c-n-3: rgb(255, 0, 0);
    --c-n-4: rgb(10, 0, 195);
    --c-n-5: rgb(165, 0, 0);
    --c-n-6: rgb(0, 115, 180);
    --c-n-7: rgb(0, 0, 0);
    --c-n-8: rgb(55, 55, 55);
}

/*body and general*/

* {
    box-sizing: border-box;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    user-select: none;
}

body {
    display: flex;
    justify-content: center;
    background-color: var(--c-bg-vd);
    flex-wrap: wrap;
}

.credits-section {
    width: 100%;
    text-align: center;
}

.credits-section > h3 > a {
    color: var(--c-bg);
}

.credits-section > h3 > a:hover {
    color: var(--c-bg-dr);
}

/* top panels and buttons */

input.panel {
    background-color: black;
    border: 1px solid black;
    color: red;
    font-family: 'Roboto Mono';
    font-size: xx-large;
    width: 65px;
    height: 54px;
    margin: 0.5rem 0rem;
    text-align: center;
    pointer-events: none;
}

input.setting {
    background-color: var(--c-bg-dr);
    border: 2px solid var(--c-bg-d);
    padding: .25rem;
    border-radius: 4px;
    width: 50px;
}

.btn {
    background-color: var(--c-bg-p);
    color: var(--c-bg-d);
    border: 2px inset var(--c-bg-d);
    padding: .5rem;
    border-radius: 8px;
    font-size: medium;
}

.btn:active {
    background-color: var(--c-bg-d);
    color: var(--c-bg-p);
}

.status div:not(.face-container) {
    width: fit-content;
}

/* game */

.game,
#settings {
    padding: .75rem;
    background-color: var(--c-bg);
    border: 5px outset var(--c-bg-dr);
    box-shadow: 0rem 0rem 1rem var(--c-bg-d);
    max-width: 100vw;
    outline: 3px solid var(--c-bg-p);
}

.top-game {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bottom-game {
    padding: 20px;
    text-align: center;
}

.status {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    width: 256px;
}

/* settings modal */

#settings {
    /*max-width: 350px;
    align-items: center;*/
    height: fit-content;
    position: relative;
}

#warning-row p {
    width: initial;
}

.top-row {
    h1 {
        width: fit-content;
        margin: 0px 0px 0px 0px;
    }
    display: flex;
    justify-content: space-between;
}

.top-row, .bottom-row {
    width: 100%;
    text-align: center;
    margin: 0px 0px 20px 0px;
}

form > div {
    text-align: start;
}

#new-game-form {
    overflow-x: auto;
}

.input-row {
    margin: 0px 0px 20px 0px;
}

#second-row {
    margin-top: .25rem;
}

#modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

#modal.active {
    display: flex;
    justify-content: center;
}

.top-game, .bottom-game, .board {
    border: 5px inset var(--c-bg-dr);
}

/* table */

table {
    border-collapse: collapse;
}

th {
    background-color: var(--c-bg-vd);
}

.tr-start {
    text-align: start;
}

#btn-close {
    padding: 0;
    border: none;
    background: none;
    float: right;
}

/* face status */

#face-container {
    display: flex;
    justify-content: center;
    order: 1;
}

.face {
    text-align: center;
    width: fit-content;
    border: 5px outset var(--c-bg-dr);
    cursor: default;
}

.face:active {
    background-color: var(--c-bg-d);
    border: 5px var(--c-bg-dr);
    border-style: inset;
    color: rgba(0, 0, 0, 0.75);
}

#mine-container {
    order: 0;
}

#time-container {
    order: 2;
}

@media screen and (max-width : 300px) {
    body {
        margin: 0;
    }
    #modal {
        padding-top: 0;
    }
}

/* board */

.board {
    margin: 1rem 0rem;
    overflow: scroll;
}

.row {
    display: flex;
    width: fit-content;
}

span {
    font-family: monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: x-large;
    text-align: center;
    width: 32px;
    height: 32px;
    cursor: default;
    font-weight: 600;
}

span,
.flag {
    background-color: var(--c-bg);
    border: 5px outset var(--c-bg-dr);
}

.open {
    background-color: var(--c-bg);
    border: 1px solid var(--c-bg-d);
}

.bomb {
    background-color: darkred;
}

.flag.miss {
    background-color: lightpink;
}

span.count-1 {
    color: var(--c-n-1);
}

span.count-2 {
    color: var(--c-n-2);
}

span.count-3 {
    color: var(--c-n-3);
}

span.count-4 {
    color: var(--c-n-4);
}

span.count-5 {
    color: var(--c-n-5);
}

span.count-6 {
    color: var(--c-n-6);
}

span.count-7 {
    color: var(--c-n-7);
}

span.count-8 {
    color: var(--c-n-8);
}