add matchmaking progress screen

frontend/src/styles.css

@@ -204,7 +204,87 @@ input {
   cursor: default;
 }
 
+/* Экран поиска соперника */
+.search-screen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 40px 20px 80px;
+}
+
+.search-label {
+  font-family: 'Comfortaa';
+  font-size: clamp(24px, 4vw, 36px);
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: 0.5px;
+}
+
+.search-error {
+  font-family: 'Comfortaa';
+  font-size: clamp(20px, 3.5vw, 28px);
+  font-weight: 700;
+  color: var(--danger);
+  text-align: center;
+  max-width: min(520px, 90vw);
+}
+
+.search-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: min(320px, 90vw);
+}
+
+.btn-secondary {
+  color: var(--primary);
+  background: #fff;
+  border: 2px solid var(--primary-light);
+  box-shadow: 0 4px 0 rgba(29, 107, 216, 0.15);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--primary-soft);
+}
+
+/* Три прыгающие точки */
+.bouncing-dots {
+  display: flex;
+  gap: 14px;
+}
+
+.bouncing-dots span {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
+  animation: dot-bounce 1s infinite ease-in-out;
+}
+
+.bouncing-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.bouncing-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes dot-bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: translateY(-16px);
+    opacity: 1;
+  }
+}
+
 /* Профиль внизу */
+
 .profile-bar {
   display: flex;
   justify-content: center;