Simulated rules so they are winnable, added win and lose

src/css/style.css

@@ -337,35 +337,6 @@ h1 br {
     left: 2.5em;
 }
 
-
-
-/* https://github.com/mbostock/d3/blob/master/lib/colorbrewer/colorbrewer.css */
-.Paired .q0-12{fill:rgb(166,206,227)}
-.Paired .q1-12{fill:rgb(31,120,180)}
-.Paired .q2-12{fill:rgb(178,223,138)}
-.Paired .q3-12{fill:rgb(51,160,44)}
-.Paired .q4-12{fill:rgb(251,154,153)}
-.Paired .q5-12{fill:rgb(227,26,28)}
-.Paired .q6-12{fill:rgb(253,191,111)}
-.Paired .q7-12{fill:rgb(255,127,0)}
-.Paired .q8-12{fill:rgb(202,178,214)}
-.Paired .q9-12{fill:rgb(106,61,154)}
-.Paired .q10-12{fill:rgb(255,255,153)}
-.Paired .q11-12{fill:rgb(177,89,40)}
-
-.Paired .q0-12{color:rgb(166,206,227)}
-.Paired .q1-12{color:rgb(31,120,180)}
-.Paired .q2-12{color:rgb(178,223,138)}
-.Paired .q3-12{color:rgb(51,160,44)}
-.Paired .q4-12{color:rgb(251,154,153)}
-.Paired .q5-12{color:rgb(227,26,28)}
-.Paired .q6-12{color:rgb(253,191,111)}
-.Paired .q7-12{color:rgb(255,127,0)}
-.Paired .q8-12{color:rgb(202,178,214)}
-.Paired .q9-12{color:rgb(106,61,154)}
-.Paired .q10-12{color:rgb(255,255,153)}
-.Paired .q11-12{color:rgb(177,89,40)}
-
 .Red {color:red;}
 .Black {color:black;}
 
@@ -394,9 +365,7 @@ h1 br {
     background: white;
     font-size: 22px;
 }
-#card-deck{
-    font-size: 75px;
-}
+
 .ui-grid-cell-contents{
     font-size: 22px;
 }
@@ -404,6 +373,10 @@ h1 br {
     font-size: 22px;
 }
 
+
+#card-deck{
+    font-size: 75px;
+}
 .card-panel {
     min-height: 130px;
     min-width: 100px;
@@ -413,6 +386,8 @@ h1 br {
     /*margin: 15px;*/
     /*font-size: 20px;*/
 }
+
+
 .short-lines {
     line-height: 3em;
 }
@@ -434,6 +409,9 @@ h1 br {
 .left-list ul{
     padding-left: 5px;
 }
+
+
+/* hypothesis ane */
 .hypotheses select{
     height:20px;
     padding:1px;
@@ -514,89 +492,8 @@ h1 br {
     }
 }
 
-/* you can also define the transition style
-   on the base class as well (.repeat-item) */
-.repeat-item.ng-enter,
-.repeat-item.ng-leave {
-  -webkit-transition:0.25s linear all;
-  transition:0.25s linear all;
-}
 
-.repeat-item.ng-enter,
-.repeat-item.ng-leave.ng-leave-active {
-  opacity:0;
-}
-.repeat-item.ng-leave,
-.repeat-item.ng-enter.ng-enter-active {
-  opacity:1;
-}
-
-.add-item.ng-enter {
-  -webkit-transition:0.25s linear all;
-  transition:0.25s linear all;
-}
-
-.add-item.ng-enter {
-  opacity:0;
-}
-
-.fadein,
-.fadeout {
-  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-}
-
-.fadein.ng-hide-remove,
-.fadeout.ng-hide-add.ng-hide-add-active {
-  opacity: 0;
-  display: block !important;
-}
-
-.fadeout.ng-hide-add,
-.fadein.ng-hide-remove.ng-hide-remove-active {
-  opacity: 1;
-  display: block !important;
-}
-
-
-.mainline.ng-leave {
-    -webkit-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-    animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-    display: block;
-    position: relative;
-}
-@-webkit-keyframes leave {
-    to {
-        opacity: 0;
-        height: 0px;
-        top: -70px;
-    }
-    25% {
-        top: 15px;
-    }
-    from {
-        opacity: 1;
-        height: 30px;
-        top: 0px;
-    }
-}
-@keyframes leave {
-    to {
-        opacity: 0;
-        height: 0px;
-        top: -70px;
-    }
-    25% {
-        top: 15px;
-    }
-    from {
-        opacity: 1;
-        height: 30px;
-        top: 0px;
-    }
-}
+/** animation to add wrong cards from top **/
 .add-from-top.ng-enter
 {
     -webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
@@ -620,6 +517,7 @@ h1 br {
     height: 0px;
 }
 
+/** add from right animation **/
 .add-from-right.ng-enter
 {
     -webkit-transition: 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;