Feat : center current player stats

components/CardPreview.vue

@@ -47,7 +47,7 @@ watch(
 
 
 onMounted(() => {
-    card.value?.style.setProperty("--random-seed", -Math.abs(Math.random() * 2) + 's')
+    card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
 })
 </script>
 
@@ -101,7 +101,7 @@ onMounted(() => {
     outline-offset: -2px;
 }
 
-@keyframes slidein {
+@keyframes unlocked-float {
     from {
         transform: none;
         filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
@@ -113,15 +113,26 @@ onMounted(() => {
     }
 }
 
+@keyframes unlocked-rotate {
+    from {
+        rotate: -2deg;
+    }
+
+    to {
+        rotate: 2deg;
+    }
+}
+
 .card.unlocked {
     margin-top: 0px;
     margin-bottom: var(--margin-bottom);
     filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
-    animation: 2s infinite alternate ease-in-out slidein;
+    animation: 2s infinite alternate ease-in-out unlocked-float, 3.1s infinite alternate ease-in-out unlocked-rotate;
     animation-delay: var(--random-seed);
+    animation-play-state: running;
 }
 
-.card:hover {
+.card:not(.unlocked):hover {
     animation-play-state: paused;
     rotate: none !important;
 }

components/PlayerSlot.vue

@@ -480,7 +480,8 @@ function check_for_guard(player: Player) {
 
 #player_banner.big {
     padding: 0;
-    margin-left: 500px;
+    left: 50%;
+    transform: translateX(-50%);
     max-width: min-content;
     background: burlywood;
     border: 5px solid maroon;