responsive

src/index.css

@@ -349,3 +349,65 @@ ol {
     transform: scale(1);
   }
 }
+
+@media (max-width: 720px) {
+  #game-board button {
+    width: 3.8rem;
+    height: 3.8rem;
+    font-size: 2em;
+  }
+
+  #players button {
+    width: 3rem;
+    border: none;
+    background: none;
+    color: #c3ba78;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: color 0.2s;
+    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
+    text-align: center;
+  }
+  
+  #players button:hover {
+    color: #f8ca31;
+  }
+  
+  .player {
+    border: 2px solid transparent;
+    padding: 0.5rem;
+    border-radius: 4px;
+    font-weight: bold;
+  }
+  
+  .player-name {
+    display: inline-block;
+    width: 3rem;
+    font-size: 0.9rem;
+    color: #e1dec7;
+    text-transform: uppercase;
+    margin-right: 0.7em;
+    border-radius: 4px;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+  
+  .player input {
+    font: inherit;
+    font-size: 1rem;
+    width: 3rem;
+    border: none;
+    padding: 0.5rem;
+    animation: pulse-text 2s infinite;
+    background-color: #46432f;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  
+  .player-symbol {
+    margin-left: 1rem;
+    font-size: 1rem;
+    color: #e1dec7;
+  }
+  
+}