:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --radius: 4px;

  --fg: white;
  /* --bg: #1f281f; */
  /* --bg: #708090; */
  --bg: #1a1a1a;
  --fg2: #2d1e2d;
  --hover: rgba(255, 255, 255, 0.05);
  --accent: #76002c;
}

* {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}

body {
  color: var(--fg);
  background: var(--bg);
  /* max-width: 600px; */
  margin: 40px auto;
  padding: 0 var(--space-4);

  --w: 10;
}

#board {
  --cell-size: 25px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(var(--w), var(--cell-size));
  grid-auto-rows: var(--cell-size);
  justify-content: center;
  cursor: default;
  /* background: yellow; */

  > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--p);
    border-radius: 4px;
    /* font-weight: bold; */

    &:after {
      content: "";
      position: absolute;
      inset: 0;
      /* border: 1px solid #555; */
      border-radius: 4px;
      border-top: 1px solid #555;
      border-bottom: 2px solid #222;
      border-bottom-color: #222;
      /* background: currentColor; */
      /* border-top-color: #555; */
      /* border-top-color: #555; */
      /* border-left-color: #555; */
      /* border-right-color: #222; */

      background: #444;
      transform-origin: center;
      will-change: transform, opacity;
      /* transition-delay: 3000ms; */
      transition:
        transform 0.35s,
        opacity 0.35s;
      /* transition-delay: 3s; */
      transition-delay: calc(var(--delay) * 30ms);
    }

    &.show::after {
      transform: scale(0.2);
      opacity: 0;
    }

    &.flag {
      background: blue !important;
    }
    &.flag::after {
      transform: scale(0.2);
      opacity: 0;
    }

    &.mine {
      /* background: yellow; */
    }
  }
}

/* DARK MODE */
/**/
/* @media (prefers-color-scheme: dark) { */
/*   :root { */
/*     --fg: white; */
/*     --bg: #1b1220; */
/*     --fg2: #2d1e2d; */
/*   } */
/* } */