.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 40px);
  grid-template-rows: repeat(9, 40px);
  margin: 20px auto;
  width: max-content;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #888; /* default thin border */
  /* width: 40px;
  height: 40px;
  font-size: 1.2em; */
  user-select: none;
}

/* Thicker borders for sectors */
.cell.r2, .cell.r5 {
  border-bottom: 3px solid #333;
}

.cell.c2, .cell.c5 {
  border-right: 3px solid #333;
}

/* Optional: add thicker outer borders */
.cell.r0 { border-top: 3px solid #333; }
.cell.r8 { border-bottom: 3px solid #333; }
.cell.c0 { border-left: 3px solid #333; }
.cell.c8 { border-right: 3px solid #333; }

.cell[data-given="True"] {
  font-weight: bold;
  color: #314158;
  background: #ffffff;
}
.cell[data-given="False"] {
  color: #f30f0f;
  background:#d4d4d4;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.cell[data-given="False"]:hover {
  color: #f30f0f;
  background:#fee685;
}
.cell.revealed {
  font-weight: bold;
  color: #312c85;
  background: #f0f9ff;
  cursor:unset;
}
.cell.revealed:hover {
  font-weight: bold;
  color: #312c85;
  background: #f0f9ff;
  cursor:unset;
}
.masked {
  color: transparent;
  background-color: #d4d4d4;
  border-radius: 4px;
  padding: 2px 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}
.masked.revealed {
  color: inherit;
  background-color: transparent;
  font-weight: bold;
}