<UXML xmlns="UnityEngine.UIElements">
    <VisualElement name="ui-root" style="flex-grow: 1;">
        <Style src="CozyCollector.uss" />

        <VisualElement name="hud" style="position: absolute; left: 0; top: 0; bottom: 0; width: 1200px; padding: 16px; flex-direction: column; justify-content: space-between;">
            <VisualElement style="flex-direction: row; justify-content: space-between; align-items: flex-start;">
                <VisualElement style="flex-direction: row;">
                    <VisualElement class="chip" style="margin-right: 10px;">
                        <Label class="label-muted" text="Score" />
                        <Label name="hud-score" class="value-accent" text="0" />
                    </VisualElement>
                    <VisualElement class="chip">
                        <Label class="label-muted" text="Best" />
                        <Label name="hud-best" class="value-mono" text="0" />
                    </VisualElement>
                </VisualElement>
                <VisualElement class="chip" style="min-width: 140px;">
                    <Label class="label-muted" text="Time left" />
                    <Label name="hud-time-left" class="value-mono" text="60s" />
                    <VisualElement name="hud-timer-bar" style="height: 5px; margin-top: 5px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background-color: rgba(0, 0, 0, 0.35); overflow: hidden;">
                        <VisualElement name="hud-timer-fill" style="height: 100%; width: 100%; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;" />
                    </VisualElement>
                </VisualElement>
            </VisualElement>
            <VisualElement style="flex-direction: row; justify-content: space-between; align-items: flex-end;">
                <VisualElement style="flex-direction: row;">
                    <Button name="hud-shop-button" class="btn btn-secondary" text="Shop" style="margin-right: 10px;" />
                    <Button name="hud-backpack-button" class="btn btn-secondary" text="Backpack" />
                </VisualElement>
                <VisualElement class="chip">
                    <Label class="label-muted" text="Wallet" />
                    <Label name="hud-wallet" class="value-accent" text="—" />
                </VisualElement>
            </VisualElement>
        </VisualElement>

        <VisualElement name="right-rail" style="position: absolute; right: 0; top: 0; bottom: 0; width: 400px; padding: 14px; flex-direction: column; background-color: #0c1512; border-left-width: 1px; border-left-color: #2c463d;">
            <VisualElement name="session-card" class="card" style="margin-bottom: 12px;">
                <VisualElement style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <Label class="card-title" text="Session" />
                    <Label class="card-hint" text="device login" />
                </VisualElement>
                <Label name="session-nickname" class="value-accent" text="—" style="font-size: 16px; margin-bottom: 8px;" />
                <VisualElement class="kv-row">
                    <Label class="kv-key" text="Player" />
                    <Label name="session-player-id" class="kv-value" text="—" />
                </VisualElement>
                <VisualElement class="kv-row">
                    <Label class="kv-key" text="Device" />
                    <Label name="session-device-id" class="kv-value" text="—" />
                </VisualElement>
                <VisualElement class="kv-row">
                    <Label class="kv-key" text="Region" />
                    <Label name="session-region" class="kv-value" text="—" />
                </VisualElement>
                <VisualElement class="kv-row">
                    <Label class="kv-key" text="Project" />
                    <Label name="session-project-key" class="kv-value" text="—" />
                </VisualElement>
                <Label name="session-wallets" class="label-muted" text="No wallets" style="margin-top: 8px;" />
            </VisualElement>

            <VisualElement name="remote-config" class="card" style="margin-bottom: 12px;">
                <VisualElement style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <Label class="card-title" text="Remote Config" />
                    <Label class="card-hint" text="live · no client build" />
                </VisualElement>
                <VisualElement name="rc-row-player-speed" class="row" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                    <Label class="label-muted" text="player speed" />
                    <Label name="rc-value-player-speed" class="value-accent" text="—" />
                </VisualElement>
                <VisualElement name="rc-row-spawn-interval" class="row" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                    <Label class="label-muted" text="spawn interval" />
                    <Label name="rc-value-spawn-interval" class="value-accent" text="—" />
                </VisualElement>
                <VisualElement name="rc-row-collectible-score" class="row" style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                    <Label class="label-muted" text="collectible score" />
                    <Label name="rc-value-collectible-score" class="value-accent" text="—" />
                </VisualElement>
                <VisualElement name="rc-row-round-seconds" class="row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                    <Label class="label-muted" text="round seconds" />
                    <Label name="rc-value-round-seconds" class="value-accent" text="—" />
                </VisualElement>
            </VisualElement>

            <VisualElement name="event-inspector" class="card panel-fill" style="flex-grow: 1; flex-shrink: 1;">
                <VisualElement style="flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <Label class="card-title" text="Event Inspector" />
                    <Label class="card-hint" text="live" />
                </VisualElement>
                <ScrollView name="event-log-scroll" class="scroll-list" style="flex-grow: 1; flex-shrink: 1;" />
                <Label name="event-log-empty" class="empty-note" text="No events yet" />
            </VisualElement>
        </VisualElement>

        <VisualElement name="toasts" style="position: absolute; left: 864px; bottom: 16px; width: 320px;" />

        <VisualElement name="boot-overlay" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; background-color: rgba(6, 16, 14, 0.62);">
            <VisualElement class="card" style="width: 420px; padding: 30px; align-items: center;">
                <VisualElement name="boot-spinner" style="width: 22px; height: 22px; margin-bottom: 14px; border-top-left-radius: 11px; border-top-right-radius: 11px; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; border-left-width: 3px; border-right-width: 3px; border-top-width: 3px; border-bottom-width: 3px; border-left-color: rgba(241, 198, 125, 0.28); border-right-color: rgba(241, 198, 125, 0.28); border-bottom-color: rgba(241, 198, 125, 0.28); border-top-color: #f1c67d;" />
                <Label class="modal-title" text="Cozy Collector" />
                <Label name="boot-status" class="label-muted" text="Starting…" style="margin-top: 8px;" />
            </VisualElement>
        </VisualElement>

        <VisualElement name="setup-overlay" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; background-color: rgba(6, 16, 14, 0.62);">
            <VisualElement class="card" style="width: 480px; padding: 30px; align-items: center;">
                <Label class="modal-title" text="Setup required" />
                <Label name="setup-error" class="label-muted" text="—" style="margin-top: 12px;" />
            </VisualElement>
        </VisualElement>

        <VisualElement name="shop-modal" class="modal-overlay">
            <VisualElement class="modal-window" style="max-height: 80%;">
                <VisualElement style="padding: 18px; padding-bottom: 8px;">
                    <Label class="modal-title" text="Camp Shop" />
                    <Label name="shop-wallet" class="modal-subtitle" text="Wallet: —" />
                </VisualElement>
                <ScrollView name="shop-offers-scroll" class="scroll-list" style="flex-grow: 1; flex-shrink: 1; padding-left: 18px; padding-right: 18px;" />
                <Label name="shop-empty" class="empty-note" text="No offers available" />
                <VisualElement class="modal-footer">
                    <Button name="shop-close-button" class="btn btn-secondary" text="Close" />
                </VisualElement>
            </VisualElement>
        </VisualElement>

        <VisualElement name="backpack-modal" class="modal-overlay">
            <VisualElement class="modal-window" style="max-height: 80%;">
                <VisualElement style="padding: 18px; padding-bottom: 8px;">
                    <Label class="modal-title" text="Backpack" />
                    <Label class="modal-subtitle" text="Server-owned player inventory" />
                </VisualElement>
                <ScrollView name="backpack-items-scroll" class="scroll-list" style="flex-grow: 1; flex-shrink: 1; padding-left: 18px; padding-right: 18px;" />
                <Label name="backpack-empty" class="empty-note" text="Backpack is empty" />
                <VisualElement class="modal-footer">
                    <Button name="backpack-close-button" class="btn btn-secondary" text="Close" />
                </VisualElement>
            </VisualElement>
        </VisualElement>

        <VisualElement name="offer-modal" class="modal-overlay">
            <VisualElement class="modal-window" style="width: 480px;">
                <VisualElement style="padding: 18px; padding-bottom: 8px;">
                    <Label name="offer-title" class="modal-title" text="Special Offer" />
                    <Label class="modal-subtitle" text="Delivered by a scenario store-offer node" />
                </VisualElement>
                <VisualElement style="padding-left: 18px; padding-right: 18px; padding-bottom: 8px;">
                    <Label name="offer-name" class="value-accent" text="—" style="font-size: 16px;" />
                    <Label name="offer-price" class="label-muted" text="—" style="margin-top: 4px;" />
                </VisualElement>
                <VisualElement class="modal-footer">
                    <Button name="offer-decline-button" class="btn btn-danger" text="Decline" style="margin-right: 10px;" />
                    <Button name="offer-buy-button" class="btn btn-primary" text="Buy" style="margin-right: 10px;" />
                    <Button name="offer-close-button" class="btn btn-ghost" text="Close" />
                </VisualElement>
            </VisualElement>
        </VisualElement>

        <VisualElement name="round-result-modal" class="modal-overlay">
            <VisualElement class="modal-window" style="max-height: 80%;">
                <VisualElement style="padding: 18px; padding-bottom: 8px;">
                    <Label class="modal-title" text="Round Result" />
                    <Label class="modal-subtitle" text="scenario leaderboard" />
                </VisualElement>
                <VisualElement style="flex-direction: row; padding-left: 18px; padding-right: 18px; padding-bottom: 12px;">
                    <VisualElement class="stat-tile" style="flex-grow: 1; margin-right: 10px;">
                        <Label name="rr-score" class="stat-value" text="0" />
                        <Label class="stat-label" text="Score" />
                    </VisualElement>
                    <VisualElement class="stat-tile" style="flex-grow: 1; margin-right: 10px;">
                        <Label name="rr-best" class="stat-value" text="0" />
                        <Label class="stat-label" text="Best" />
                    </VisualElement>
                    <VisualElement class="stat-tile" style="flex-grow: 1;">
                        <Label name="rr-collected" class="stat-value" text="0" />
                        <Label class="stat-label" text="Collected" />
                    </VisualElement>
                </VisualElement>
                <ScrollView name="rr-leaderboard-scroll" class="scroll-list" style="flex-grow: 1; flex-shrink: 1; padding-left: 18px; padding-right: 18px;" />
                <Label name="rr-empty" class="empty-note" text="No leaderboard entries" />
                <VisualElement class="modal-footer">
                    <Button name="rr-claim-button" class="btn btn-primary" text="Claim" style="margin-right: 10px;" />
                    <Button name="rr-play-again-button" class="btn btn-secondary" text="Play Again" style="margin-right: 10px;" />
                    <Button name="rr-end-button" class="btn btn-ghost" text="End" style="margin-right: 10px;" />
                    <Button name="rr-close-button" class="btn btn-ghost" text="Close" />
                </VisualElement>
            </VisualElement>
        </VisualElement>
    </VisualElement>
</UXML>
