<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">
                The Oracle of your<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destiny</span>
            </h1>
            <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--midnight-blue)]/80">
                Draw on ancient wisdom to light your path. Draw a card and receive the message intended for you today.
            </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>
