<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="main_menu.css" type="text/css"?>
<ZStack id="root" class="fullscreen menu-root">

    <!-- Main menu content -->
    <VStack id="menuContent" class="menu-content" fill-height="true" align-self="center" spacing="0dp">
        <Panel class="safe-area" />

        <!-- Top bar: settings icon top-right -->
        <HStack class="menu-top-bar" fill-width="true" justify="end">
            <Image id="settingsButton" class="settings-icon-btn" src="/assets/images/ui/icon-button-settings-gear.png" />
        </HStack>

        <!-- Spacer fills the area where logo + side buttons are drawn directly -->
        <Spacer weight="1" />

        <!-- Bottom buttons -->
        <VStack class="bottom-buttons" align-h="center" spacing="12dp" fill-width="true">
            <Panel id="playButton" class="play-quest-btn" fill-width="true" align-h="center" align-v="center" />

            <HStack class="secondary-row" spacing="12dp" fill-width="true">
                <VStack id="dailyChallengeButton" class="secondary-btn" align-h="center" align-v="center" spacing="2dp" weight="1">
                    <Image class="secondary-icon" src="/assets/images/ui/icon-target.png" />
                    <Panel id="dailyLabel" class="secondary-text-area" fill-width="true" />
                </VStack>
                <VStack id="freePlayButton" class="secondary-btn" align-h="center" align-v="center" spacing="2dp" weight="1">
                    <Image class="secondary-icon" src="/assets/images/ui/icon-dice.png" />
                    <Panel id="freeLabel" class="secondary-text-area" fill-width="true" />
                </VStack>
            </HStack>
        </VStack>
    </VStack>

    <!-- Settings popup overlay -->
    <VStack id="settingsScrim" class="settings-scrim" align-h="center" justify="center" fill-width="true" fill-height="true">
        <VStack id="settingsCard" class="settings-card" align-h="center" spacing="10dp">
            <!-- Header -->
            <HStack class="settings-header" fill-width="true" align-v="center">
                <Panel class="settings-title" text="SETTINGS" weight="1" align-h="center" align-v="center" />
                <Image id="settingsClose" class="settings-close-btn" src="/assets/images/ui/icon-button-close-dark.png" />
            </HStack>

            <!-- Sound toggle row -->
            <HStack id="soundToggle" class="settings-toggle-row" fill-width="true" align-v="center" spacing="10dp">
                <Image class="settings-row-icon" src="/assets/images/ui/volume-icon.png" />
                <Panel class="settings-row-label" text="SOUND" weight="1" align-h="start" align-v="center" />
                <Image id="soundSwitch" class="settings-toggle-img" src="/assets/images/ui/toggle-switch-off.png" />
                <Panel id="soundState" class="settings-toggle-state" text="OFF" align-h="center" align-v="center" />
            </HStack>

            <!-- Music toggle row -->
            <HStack id="musicToggle" class="settings-toggle-row" fill-width="true" align-v="center" spacing="10dp">
                <Image class="settings-row-icon" src="/assets/images/ui/icon-music-note.png" />
                <Panel class="settings-row-label" text="MUSIC" weight="1" align-h="start" align-v="center" />
                <Image id="musicSwitch" class="settings-toggle-img" src="/assets/images/ui/toggle-switch-off.png" />
                <Panel id="musicState" class="settings-toggle-state" text="OFF" align-h="center" align-v="center" />
            </HStack>

            <!-- FPS toggle row -->
            <HStack id="fpsToggle" class="settings-toggle-row" fill-width="true" align-v="center" spacing="10dp">
                <Image class="settings-row-icon" src="/assets/images/ui/icon-crosshair.png" />
                <Panel class="settings-row-label" text="FPS" weight="1" align-h="start" align-v="center" />
                <Image id="fpsSwitch" class="settings-toggle-img" src="/assets/images/ui/toggle-switch-off.png" />
                <Panel id="fpsState" class="settings-toggle-state" text="OFF" align-h="center" align-v="center" />
            </HStack>

            <!-- Action buttons -->
            <Panel id="resetButton" class="settings-action-btn" text="RESET GAME DATA" fill-width="true" align-h="center" align-v="center" />
            <Panel id="unlockButton" class="settings-action-btn" text="UNLOCK ALL LEVELS" fill-width="true" align-h="center" align-v="center" />
        </VStack>
    </VStack>

</ZStack>
