Münzen und Hilfe hinzugefügt

src/scss/wordRotator.scss

@@ -68,7 +68,6 @@ $coinTowerDimension: 28px;
 }
 
 //Segments
-
 $rotationDegrees: (90 180 270 360);
 $animationDuration: 0.25s;
 
@@ -138,6 +137,7 @@ $animationDuration: 0.25s;
             transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
             background-color: white;
             z-index: 1;
+
             @for $j from 1 through length($rotationDegrees) {
               $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
               @if $animationName==0 {
@@ -148,6 +148,7 @@ $animationDuration: 0.25s;
                 transform: rotate(#{$animationName}deg);
                 background-color: white;
                 z-index: 1;
+
                 &.rotating {
                   animation-name: rotate-#{$animationName};
                   animation-duration: $animationDuration;
@@ -220,6 +221,7 @@ $animationDuration: 0.25s;
     border: solid 1px #a9a9a9;
     border-radius: 3px;
     padding: 1px;
+
     &.layer-2 {
       border: solid 3px #000000;
     }
@@ -235,9 +237,19 @@ $animationDuration: 0.25s;
   }
 }
 
+#site-content > :not(.won) .segment.locked {
+  border-color: #3adb76;
+  background-color: #9ffbb5 !important;
+  > .child-container > .segment-leaf {
+    border-color: #3adb76;
+    background-color: #9ffbb5 !important;
+  }
+}
+
 //Won-screen
 .show-when-won {
-  visibility: hidden;
+  //visibility: hidden;
+  display: none;
   transition: none;
   * {
     transition: none;
@@ -246,6 +258,14 @@ $animationDuration: 0.25s;
 
 .won {
   .show-when-won {
-    visibility: initial;
+    display: flex;
+  }
+  .show-while-playing {
+    display: none;
   }
 }
+
+.text-right {
+  text-align: right;
+}
+