feat: new spec

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

@@ -75,6 +75,54 @@ h2 {
   border: var(--border-width) solid var(--color-border);
 }
 
+.game-completion-alert {
+  background: linear-gradient(135deg, var(--color-secondary-mint, #B9DAD1) 0%, var(--color-secondary-blue, #B9C2DA) 100%);
+  border: 2px solid var(--color-secondary-mint, #B9DAD1) !important;
+  border-radius: var(--border-radius-lg) !important;
+  padding: var(--size-xl-padding) !important;
+  box-shadow: 0 8px 16px rgba(185, 218, 209, 0.3);
+  animation: slideIn 0.4s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.completion-title {
+  color: var(--color-text-primary);
+  font-size: 1.75rem;
+  margin: 0 0 var(--size-md) 0;
+  font-weight: 700;
+  text-align: center;
+}
+
+.completion-subtitle {
+  text-align: center;
+  color: var(--color-text-primary);
+  font-size: 1rem;
+}
+
+.completion-link {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-text-primary);
+  transition: all 0.3s ease;
+  padding-bottom: 2px;
+}
+
+.completion-link:hover {
+  color: var(--color-secondary-blue);
+  border-bottom-color: var(--color-secondary-blue);
+}
+
 @media (max-width: 991px) {
   .game-card {
     padding: clamp(var(--size-md), 1.5vw, var(--size-lg));