It doesn’t render correctly on firefox but does in edge, it’s a rectangle, not a square.
Since the scaling is based on the font size, using `em` + `line-height: 1` allows it to scale correctly by adding it to 
`.sudoku-field`.
Fixing it by wrapping the numbers and adding `height: 100%` fixes the individual cells, but the whole table is still a 
rectangle but causes the cells to overlap (inside out size issues was excuse).

There is a bunch of unused code

Autosolver is broken, I had to move the function around

Switched .forEach to for loop for performance (recommended practice, but honestly it’s not a big deal)

Convert the keyboard key lookup to a map, mostly stylistic but I imagine it’s also easier to edit.

Not sure why there is a col and row class that manages cells if the layout is flat

Getters, setter, properties, functions and constructors are all mixed together, it's hard to read

A custom event manager is used, EventTarget is built into the browser not sure why it’s not used

Usage of `_` instead of `#` for private variables

It's not recommended to setup the elements in the constructor https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#implementing_a_custom_element

You can use `||=` for assigning to an undefined variable (if it's undefined) 

Borders are on all grid elements, causing a double border on the edges

I'd recommend running Biome.js or ESlint + Prettier to clean up the code
(if you're using ML you can even make these strict enough about ordering and naming conventions)