<template>
    <main class="relative flex min-h-screen w-full flex-col px-4 pt-12 pb-24 sm:px-6 lg:px-8">
        <!-- Header / intro kept centered and constrained -->
        <div class="relative z-10 mx-auto max-w-4xl text-center">
            <h1 class="text-5xl font-bold text-[var(--midnight-blue)] md:text-6xl">
                L'Oracle de votre<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destinée</span>
            </h1>
            <p class="mt-4 mx-auto max-w-2xl text-lg text-[var(--midnight-blue)]/80">
                Puisez dans la sagesse ancestrale pour éclairer votre chemin. Tirez une carte et recevez le message qui vous est destiné aujourd'hui.
            </p>
        </div>

        <!-- Card shuffle slot now full width -->
        <div class="relative z-10 mt-8 w-full">
            <slot name="card-shuffle-slot" />
        </div>
    </main>
</template>
