Update style.css

style.css

@@ -1,3 +1,4 @@
+/* Layout & Base */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     margin: 0;
@@ -11,6 +12,7 @@ body {
     color: #333;
 }
 
+/* Title */
 h1 {
     font-size: 28px;
     margin: 20px 0;
@@ -18,6 +20,7 @@ h1 {
     text-align: center;
 }
 
+/* Game Container */
 .game-container {
     border: 1px solid #e0e0e0;
     border-radius: 16px;
@@ -28,6 +31,7 @@ h1 {
     max-width: 800px;
 }
 
+/* Control Buttons */
 .controls {
     margin: 20px 0;
     display: flex;
@@ -59,30 +63,35 @@ button:hover {
     color: #007aff;
 }
 
+/* Grid Wrapper + Grid */
 .grid-wrapper {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
+    width: 100%;
+    max-width: 700px;
+    aspect-ratio: 1 / 1;
     background-color: #f0f0f0;
     border: 2px solid #d0d0d0;
     border-radius: 12px;
     box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
+    padding: 8px;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
 }
 
-
 .grid {
+    flex: 1;
     display: grid;
-    grid-template-columns: repeat(15, minmax(30px, 1fr));
-    grid-template-rows: repeat(15, minmax(30px, 1fr));
+    grid-template-columns: repeat(15, 1fr);
+    grid-template-rows: repeat(15, 1fr);
     gap: 2px;
     background-color: #ccc;
     border-radius: 8px;
-    overflow: hidden;
-    max-width: 100%;
 }
 
+/* Grid Cells */
 .cell {
     width: 100%;
+    height: 100%;
     aspect-ratio: 1 / 1;
     background-color: #fff;
     cursor: pointer;
@@ -98,6 +107,7 @@ button:hover {
     border: 1px solid #005bb5;
 }
 
+/* Stats Display */
 .stats {
     margin-top: 20px;
     font-size: 16px;