feat: more components

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

@@ -44,56 +44,17 @@ h2 {
 .top-section {
   display: grid;
   gap: var(--size-md);
-  margin-bottom: var(--size-sm);
+  margin-top: var(--size-sm);
   flex: 0 0 auto;
 }
 
-.move-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--size-lg);
+.move-card {
+  padding: var(--size-lg-padding);
 }
 
-.move-form label {
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.board-hint {
-  margin: 0;
-  color: var(--color-text-primary);
-}
-
-.move-form button {
-  border: var(--button-border);
-  border-radius: var(--border-radius-md);
-  background: var(--color-bg-button);
-  color: var(--color-text-primary);
-  padding: var(--button-padding);
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.move-form button:hover {
-  background: var(--color-bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-
-/* Unified form input class for all text inputs and textareas */
-.form-input {
-  border: var(--form-input-border);
-  border-radius: var(--form-input-radius);
-  background: var(--color-bg-input);
-  padding: var(--form-input-padding);
-  font-family: inherit;
-  min-width: 180px;
-}
-
-.form-input:focus {
-  outline: none;
-  background: var(--color-bg-input-focus);
-  border-color: var(--color-primary);
+.move-card .btn {
+  align-self: flex-start;
+  width: auto;
 }
 
 .center-column {
@@ -109,47 +70,6 @@ h2 {
   container-type: size;
 }
 
-.import-card {
-  background: var(--color-bg-card);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--border-radius-md);
-  padding: var(--size-lg-padding);
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-lg-gap);
-}
-
-.import-card label {
-  color: var(--color-text-primary);
-  font-weight: 700;
-  margin-bottom: var(--size-xs);
-}
-
-.import-card textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-.import-card input {
-  min-width: unset;
-}
-
-.btn {
-  border: var(--button-border);
-  border-radius: var(--border-radius-sm);
-  background: var(--color-bg-button);
-  color: var(--color-text-primary);
-  padding: var(--button-padding);
-  cursor: pointer;
-  font-weight: 600;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.btn:hover {
-  background: var(--color-bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-
 .alert {
   border-radius: var(--border-radius-sm);
   border: var(--border-width) solid var(--color-border);
@@ -197,49 +117,9 @@ h2 {
     margin-bottom: var(--size-xs);
   }
 
-  .move-form {
-    flex-direction: column;
-    gap: var(--size-md);
-  }
-
-  .move-form label {
-    align-self: flex-start;
-  }
-
-  .move-form input {
-    width: 100%;
-    min-width: unset;
-  }
-
-  .move-form button {
-    width: 100%;
-    padding: var(--size-sm-padding);
-  }
-
   .board-section {
     min-height: 300px;
   }
-
-  .import-card {
-    padding: var(--size-md-padding);
-    gap: var(--size-md-gap);
-  }
-
-  .import-card label {
-    font-size: 0.9rem;
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 70px;
-    font-size: 0.9rem;
-    padding: var(--size-sm-padding);
-  }
-
-  .btn {
-    padding: var(--size-sm-padding);
-    font-size: 0.9rem;
-  }
 }
 
 @media (max-width: 480px) {
@@ -272,16 +152,4 @@ h2 {
   .board-section {
     min-height: 250px;
   }
-
-  .import-card {
-    padding: var(--size-sm-padding);
-    gap: var(--size-sm-gap);
-  }
-
-  .import-card textarea,
-  .import-card input {
-    min-height: 50px;
-    font-size: 0.8rem;
-    padding: var(--size-xs-padding);
-  }
 }