fix: board aspect ratio - use padding-top trick for reliable square board

The board was getting vertically squished because aspect-ratio doesn't
work reliably inside flex containers. Switch to the padding-top: 100%
technique with absolute-positioned board inside.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/chessboard.css

@@ -87,15 +87,31 @@
   align-items: stretch;
   width: 100%;
   max-width: 600px;
-  margin: 0 auto;
+  margin: 4px auto;
 }
 
 .board-wrapper {
   position: relative;
-  width: 100%;
-  aspect-ratio: 1;
+  flex: 1;
+  min-width: 0;
   direction: ltr;
-  margin: 4px 0;
+}
+
+.board-wrapper::before {
+  content: '';
+  display: block;
+  padding-top: 100%;
+}
+
+.board-wrapper > .board {
+  position: absolute;
+  inset: 0;
+}
+
+/* Standalone board (puzzles page etc) */
+.puzzle-board-area .board-wrapper {
+  max-width: 480px;
+  margin: 0 auto;
 }
 
 .board {
@@ -104,12 +120,12 @@
   grid-template-rows: repeat(8, 1fr);
   width: 100%;
   height: 100%;
-  border: 2px solid var(--border-strong);
   border-radius: var(--radius-sm);
   overflow: hidden;
   user-select: none;
   touch-action: none;
   direction: ltr;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
 }
 
 .square {
@@ -174,45 +190,45 @@
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
 }
 
-/* Coordinate labels */
+/* Coordinate labels - inside squares */
 .board-coords-file, .board-coords-rank {
   position: absolute;
   display: flex;
   font-family: var(--font-en);
   font-size: 10px;
   font-weight: 700;
-  color: var(--text-3);
   pointer-events: none;
-  opacity: 0.7;
+  z-index: 2;
 }
 
 .board-coords-file {
-  bottom: 2px;
+  bottom: 1px;
   left: 0;
   right: 0;
-  justify-content: space-around;
-  padding: 0 2%;
 }
 
 .board-coords-file span {
-  width: 12.5%;
-  text-align: center;
+  flex: 1;
+  text-align: right;
+  padding-right: 2px;
+  color: var(--text-3);
+  opacity: 0.8;
 }
 
 .board-coords-rank {
   top: 0;
   bottom: 0;
-  left: 2px;
+  left: 1px;
   flex-direction: column;
-  justify-content: space-around;
-  align-items: flex-start;
-  padding: 1% 0;
 }
 
 .board-coords-rank span {
-  height: 12.5%;
+  flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  padding-top: 1px;
+  color: var(--text-3);
+  opacity: 0.8;
 }
 
 /* Arrow Canvas */
@@ -653,17 +669,17 @@
 
   .game-board-column {
     flex: 0 0 auto;
-    max-width: 560px;
+    width: min(560px, calc(100vh - 180px));
   }
 
   .game-board-section {
-    max-width: 590px;
+    max-width: 100%;
   }
 
   .game-side-panel {
     display: flex;
     flex: 0 1 280px;
-    max-height: 560px;
+    max-height: min(560px, calc(100vh - 180px));
   }
 
   .game-mobile-panel {
@@ -671,7 +687,7 @@
   }
 
   .game-header {
-    max-width: 560px;
+    max-width: 100%;
   }
 }
 
@@ -713,10 +729,6 @@
     max-width: 100%;
   }
 
-  .board-wrapper {
-    max-width: 100vw;
-  }
-
   .game-header {
     border-radius: var(--radius-sm);
     max-width: 100%;