Optimize board sizing for constrained 16:9 container - reduce gaps and padding

src/styles.css

@@ -81,10 +81,10 @@ button {
 .layout {
   width: 100%;
   height: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.85rem;
+  gap: 0.5rem;
   overflow: hidden;
 }
 
@@ -201,10 +201,11 @@ label span,
   flex: 1;
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.85fr);
-  gap: 0.85rem;
+  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.85fr);
+  gap: 0.5rem;
   min-height: 0;
-  align-items: start;
+  align-items: center;
+  overflow: hidden;
 }
 
 .board-shell,
@@ -217,18 +218,25 @@ label span,
 
 .board-shell {
   min-height: 0;
-  padding: 0.8rem;
+  padding: 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
 .board {
   position: relative;
-  width: 100%;
-  height: auto;
+  width: auto;
+  height: 100%;
+  max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--board-columns) / var(--board-rows);
   display: grid;
-  gap: 0.32rem;
+  gap: 0.15rem;
   margin: 0 auto;
+  align-content: center;
+  justify-content: center;
 }
 
 .board__lines {