* {
  box-sizing: border-box;
}
:root {
  font-size: 24px;
  --boxSize: 1em;
  --rowCount: 16;
  --width: calc(var(--rowCount) * var(--rowSize));
  --height: var(--width);
}
body,
html {
  padding: 0;
  margin: 0;
}

aside {
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  padding-block: 0.2rem;
  background: #eee;
  border-inline-end: 3px solid #0004;
  border-block-end: 3px solid #000a;
  height: max-content;
}

aside[expanded] {
  height: max-content;
}

aside[expanded] #settings {
  display: block;
}

main {
  width: max-content;
  margin: auto;
}

.game {
  margin: auto;
}

#toggle-settings {
  text-align: center;
}

#settings {
  display: none;
  text-align: start;
  font-size: 0.8rem;
  user-select: none;
}
.game {
  height: var(--height);
  width: var(--width);
  border: 1px solid;
}

.col {
  width: var(--boxSize);
  height: var(--boxSize);
  border: 1px solid;
  background-size: contain;
  background-color: white;
  user-select: none;
}

.row {
  display: flex;
}

.col {
  text-rendering: auto;
  stroke-opacity: 0;
  stroke: #000000;
  stroke-width: 0;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  letter-spacing: 0;
  text-anchor: middle;
  word-spacing: 0;
  text-align: center;
  font-family: Kristen ITC;
  font-size: 1rem;
  border: 2px outset;
}

.col[flagged] {
  background-image: url("./img/flag.svg");
  background-position: center;
  background-size: contain;
}

.restart-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.col[revealed]:not(.exploded) {
  background-color: #eee;
  border: inset 2px;
}

.exploded {
  background-image: url("./img/bomb.svg");
  background-color: red;
  border-style: inset;
  border-color: red;
}

.exploded[flagged] {
  background-color: #ee0;
  border-color: #ee0;
  border-style: outset;
}

[win] .exploded {
  background-color: greenyellow;
  border-color: green;
}