Fix visual bugs in credits (#3418)

- Nameless and Ra positions moved to obscure text less
- Prevent new game panel from obscuring credits text no matter the size of the screen

src/components/tabs/celestial-pelle/CreditsContainer.vue

@@ -17,13 +17,13 @@ export default {
   computed: {
     creditStyles() {
       return {
-        bottom: `${this.scroll}rem`,
+        bottom: `${this.scroll}px`,
         display: this.rolling ? "block" : "none"
       };
     },
     muteStyle() {
       return {
-        top: `calc(${this.scroll + 2}rem - 100vh)`,
+        top: `calc(${this.scroll + 20}px - 100vh)`,
         display: this.rolling ? "block" : "none"
       };
     },
@@ -62,10 +62,11 @@ export default {
   },
   methods: {
     update() {
+      const height = (this.$refs.creditsDisplay?.offsetHeight || 0) + innerHeight;
       this.rolling = GameEnd.endState > END_STATE_MARKERS.CREDITS_START;
       this.scroll = (
         Math.clampMax(GameEnd.endState, END_STATE_MARKERS.CREDITS_END) - END_STATE_MARKERS.CREDITS_START
-      ) * 60;
+      ) / (END_STATE_MARKERS.SONG_END - END_STATE_MARKERS.CREDITS_START) * height;
       if (this.audio) this.audio.volume = this.isMuted
         ? 0
         : Math.clamp((GameEnd.endState - END_STATE_MARKERS.CREDITS_START), 0, 0.3);
@@ -92,7 +93,9 @@ export default {
       :class="`c-${celIndex}-credits`"
       v-html="celSymbol"
     />
-    <CreditsDisplay />
+    <span ref="creditsDisplay">
+      <CreditsDisplay />
+    </span>
   </div>
 </template>
 
@@ -245,8 +248,8 @@ perfectly the same. */
 }
 
 .c-enslaved-credits {
-  top: 235rem;
-  left: 52%;
+  top: 240rem;
+  left: 80%;
   color: var(--color-enslaved--base);
   animation: a-enslaved-credits 10s linear infinite;
 }
@@ -259,8 +262,8 @@ perfectly the same. */
 }
 
 .c-ra-credits {
-  top: 315rem;
-  left: 44%;
+  top: 480rem;
+  left: 60%;
   color: var(--color-ra--base);
   animation: a-ra-credits 10s ease-in-out infinite;
 }

src/core/celestials/pelle/game-end.js

@@ -7,8 +7,10 @@ export const END_STATE_MARKERS = {
   SAVE_DISABLED: 4,
   END_NUMBERS: 4.2,
   CREDITS_START: 4.5,
-  SHOW_NEW_GAME: 13,
-  SPECTATE_GAME: 13.5,
+  SHOW_NEW_GAME: 13.5,
+  SPECTATE_GAME: 13.9,
+  // The song is 3:04 and the credits increment by 1 every 20 seconds. Needs changing if the song is changed.
+  SONG_END: 13.7,
   CREDITS_END: 14.5,
 };