src/app/pages/game/game.component.css

@@ -65,14 +65,6 @@ h2 {
   color: #5A2C28;
 }
 
-.move-form input {
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  min-width: 180px;
-}
-
 .move-form button {
   border: 2px solid #5A2C28;
   border-radius: 10px;
@@ -88,6 +80,22 @@ h2 {
   color: #F3C8A0;
 }
 
+/* Unified form input class for all text inputs and textareas */
+.form-input {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  background: #B9DAD1;
+  padding: 0.6rem 0.75rem;
+  font-family: inherit;
+  min-width: 180px;
+}
+
+.form-input:focus {
+  outline: none;
+  background: #B9C2DA;
+  border-color: #BA6D4B;
+}
+
 .center-column {
   width: 100%;
 }
@@ -118,21 +126,12 @@ h2 {
 }
 
 .import-card textarea {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
   resize: vertical;
   min-height: 100px;
-  font-family: inherit;
 }
 
 .import-card input {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
-  font-family: inherit;
+  min-width: unset;
 }
 
 .btn {

src/app/pages/game/game.component.html

@@ -18,6 +18,7 @@
               <textarea
                 id="fenImport"
                 name="fenImport"
+                class="form-input"
                 [(ngModel)]="facade.fenInput"
                 rows="4"
                 placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
@@ -32,7 +33,7 @@
               <section class="top-section">
                 <form class="move-form" (ngSubmit)="facade.submitMove()">
                   <label for="uciMove">Play move (UCI)</label>
-                  <input id="uciMove" name="uciMove" [(ngModel)]="facade.moveInput" placeholder="e2e4" />
+                  <input id="uciMove" name="uciMove" class="form-input" [(ngModel)]="facade.moveInput" placeholder="e2e4" />
                   <button type="submit">Send Move</button>
                 </form>
                 <p class="board-hint">Click your piece to highlight legal targets.</p>
@@ -56,6 +57,7 @@
               <textarea
                 id="pgnImport"
                 name="pgnImport"
+                class="form-input"
                 [(ngModel)]="facade.pgnInput"
                 rows="4"
                 placeholder="1. e4 e5 2. Nf3 Nc6 *"