+page.svelte

<script lang="ts">
  import { enhance } from "$app/forms";

  export let data;
</script>

<div class="relative mx-auto my-[50px] w-full max-w-[400px]">
  <section class="text-center">
    <h2>Score final</h2>
    <span
      class="relative mb-4 block before:absolute before:left-2/4 before:top-2/4 before:z-[-1] before:h-[100px] before:w-[100px] before:-translate-x-2/4 before:-translate-y-2/4 before:animate-[grow_2s_infinite_ease-in-out] before:rounded-[50%] before:border-6 before:border-solid before:border-random-600 before:opacity-30"
    >
      <span class="translate-y-[-30px] text-9xl text-random-300"
        >{data.score}</span
      >
      pts
    </span>
    <form method="post" use:enhance>
      <button
        type="submit"
        class="cursor-pointer rounded-2xl border-transparent bg-random-600 px-[1.5em] py-[0.5em] text-2xl text-white transition-[0.35s] hover:bg-zinc-800 hover:text-random-500 focus:border focus:border-dotted focus:border-random-400 focus:[outline:none]"
      >
        Rejouer
      </button>
    </form>
  </section>
</div>

<style>
  @keyframes -global-grow {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    50% {
      transform: translate(-50%, -50%) scale(0.6);
    }
  }
</style>