feat: 1vs BOT

src/app/pages/welcome/welcome.component.css

@@ -142,3 +142,69 @@ p {
     font-size: 0.95rem;
   }
 }
+
+.difficulty-selector {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+}
+
+.difficulty-selector p {
+  margin: 0 0 var(--size-md);
+  font-weight: 600;
+}
+
+.difficulty-buttons {
+  display: flex;
+  gap: var(--size-md-gap);
+  flex-wrap: wrap;
+}
+
+.difficulty-btn {
+  flex: 1;
+  min-width: 80px;
+  padding: var(--size-md-padding);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.difficulty-btn.easy {
+  background: var(--color-success-light, #d4edda);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.easy:hover:enabled {
+  background: var(--color-success, #28a745);
+  color: white;
+}
+
+.difficulty-btn.medium {
+  background: var(--color-warning-light, #fff3cd);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.medium:hover:enabled {
+  background: var(--color-warning, #ffc107);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.hard {
+  background: var(--color-danger-light, #f8d7da);
+  color: var(--color-text-primary);
+}
+
+.difficulty-btn.hard:hover:enabled {
+  background: var(--color-danger, #dc3545);
+  color: white;
+}
+
+.difficulty-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}