@font-face {
  font-family: "DSEG7Classic";
  src: url("../gps/fonts/DSEG7Classic-Bold.woff2");
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #E0E0E0;
  --clr1: #C0C0C0;
  --clr2: #B0B0B0;
  --clr3: #A0A0A0;
}

body {
  margin: 12px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

main {
  /* margin: auto; */
  /* width: fit-content; */
  display: flex;
  flex-direction: column;
  gap: 12px;
}


#board {
  /* --columns: 10; */
  width: fit-content;
  margin: auto;
  flex-grow: 1;
  background-color: var(--clr1);
  /* border: 1px solid black; */
  border: 2px solid var(--clr1);
  display: grid;
  grid-template-columns: repeat(var(--columns, 10), fit-content(50px));
  gap: 2px;
  transition: filter 200ms;
  z-index: 1;
}
#board.gameover {
  opacity: 0.8;
  transition: filter 1s;
  z-index: 0;
}
#board.gameover[data-state="won"] {
  border: 2px solid limegreen;
}
#board.gameover[data-state="lost"] {
  border: 2px solid red;
}

.cell {
  --size: 30px;
  padding: 0;
  font-size: calc(var(--size) * 0.6);
  font-weight: 600;
  text-align: center;
  background-color: var(--clr2);
  height: var(--size);
  width: var(--size);
  border: calc(var(--size) / 6) solid var(--clr2);
  border-top-color: var(--clr1);
  border-left-color: var(--clr1);
  border-right-color: var(--clr3);
  border-bottom-color: var(--clr3);
}
.cell[data-state="shown"] {
  background-color: var(--clr);
  border-color: var(--clr);
}
.cell[data-state="flagged"] {
  /* background-color: red; */
  background-image: url(./icons/flag.png);
  background-size: contain;
}
.cell[data-type="bomb"] {
  /* background-color: black; */
  background-image: url(./icons/bomb.png);
  background-size: contain;
}
.cell[data-setter] {
  border-color: red;
}
.cell[data-value="1"] { color: blue; }
.cell[data-value="2"] { color: limegreen; }
.cell[data-value="3"] { color: orange; }
.cell[data-value="4"] { color: blueviolet; }
.cell[data-value="5"] { color: red; }
.cell[data-value="6"] { color: darkred; }
.cell[data-value="7"] { color: darkslategray; }
.cell[data-value="8"] { color: gray; }

#info {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 1.5rem;
}

#resume[hidden] {
  display: none;
}
#resume {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

#resume #result {
  font-size: 2rem;
}

#resume #score {
  font-size: 1.5rem;
}
#resume #score #cells,
#resume #stats span {
  font-weight: bold;
}
/* #resume > * {
  margin: 0;
  margin-bottom: 8px;
} */
/* #resume > *:last-child {
  margin-bottom: 0;
} */

#form-wrapper {
  text-align: center;
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  column-gap: 20px;
  row-gap: 5px;
}
#form-wrapper .input {
  display: inline-block;
}
#form-wrapper label {
  display: block;
}
#form-wrapper .input input {
  padding: 2px;
  width: 100%;
}
#form-wrapper button { padding: 2px 4px; }