PagesStructures['id1771521656521'] = {"structures":[{"type":"page","id":"id1771521656521","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Horse Race","baseName":null,"templateID":null,"templateName":null,"order":0,"customStates":null,"isElementWasEditedInMode":true,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":0,"height":1068,"top":0,"left":0},"lastResizingSize":{"left":0,"width":0,"top":0,"height":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","basicUserCanEdit":true,"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","backgroundColor":"rgb(238,228,216)","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"horizontal":"right","vertical":"top"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","gridLines":[],"fixedBackground":true,"statesGroups":null},"metaData":{"position":{"left":-844.5,"top":0},"size":{"width":1689,"height":4389}},"childElements":[{"type":"SectionElement","id":"id1771521664324","elementProperties":{"tagName":"SECTION","behaviours":null,"isLocked":false,"name":"Section 2","baseName":null,"templateID":null,"templateName":null,"order":3,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"height":4115,"left":0,"width":1689,"top":0},"lastResizingSize":{"height":600,"left":0,"width":0,"top":0},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"padding":{"top":0,"left":0,"bottom":0,"right":0},"basicUserCanEdit":true,"backgroundColor":"transparent","imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"overflow":false,"isGrowable":{"bottom":false,"right":false},"rowsItems":null,"childrenAnchor":"center","resizingGripPosiotion":"s","sectionName":"Section A","pageContentType":1,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"}},"metaData":{"position":{"left":-844.5,"top":189},"size":{"width":1689,"height":4115}},"childElements":[{"type":"ExternalAppembed_html_app1","id":"id1771806193200","elementProperties":{"tagName":"DIV","behaviours":null,"isLocked":false,"name":"Embed Html 2","baseName":null,"templateID":"templateid1771806193201","templateName":null,"order":29,"customStates":null,"isElementWasEditedInMode":false,"showHoverEffects":true,"skinInformation":{},"isSupportsMobile":false,"isVisibleInMode":true,"isFixed":false,"topZIndex":0,"elementOpacity":1,"staticMargin":{"horizontalMargin":0,"verticalMargin":0},"sizeAndPosition":{"width":400,"height":662,"left":-242,"top":8},"lastResizingSize":{"width":400,"height":662},"isVisibleInLastSection":true,"isVisibleInLastDataItem":true,"attributes":null,"metaProps":null,"metaItemType":null,"metaTitle":null,"styleBindingId":null,"styleBindingFields":null,"shadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"glow":{"spread":0,"blur":0,"color":"black"},"isParallaxBackground":false,"parallaxBackgroundSpeed":0.5,"isParallaxElement":{"isActive":false,"speed":1,"delay":0},"effectsOptions":{"isParallax":false,"oneTimeAnimation":false,"duration":1200,"startDistance":200,"startVisibility":0.8,"distance":300,"measureDistanceType":3,"delay":0,"distanceDelay":0,"runInLoop":false,"flyDirection":2,"direction":"horizontal","movementDistanceHorizontally":200,"movementDistanceVertically":0,"autoStartDistanceSettings":true,"autoDistanceSettings":true},"effects":null,"binding":null,"innerGlow":{"spread":0,"blur":0,"color":"black"},"innerShadow":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"},"basicUserCanEdit":true,"backgroundColor":"transparent","padding":{"top":0,"left":0,"bottom":0,"right":0},"imageUrl":"","imageLayout":"stretchedToFill","imagePosition":{"vertical":"center","horizontal":"center"},"origImage":"","imageOpacity":1,"backgroundOverlay":"transparent","verticalLayout":"normal","horizontalLayout":"normal","fillLayout":{"fillVertical":false,"fillHorizontal":false},"margin":{"top":0,"left":0,"bottom":0,"right":0},"isVisible":true,"borderWidth":{"top":0,"left":0,"bottom":0,"right":0},"roundness":{"topLeft":0,"bottomLeft":0,"topRight":0,"bottomRight":0},"borderColor":{"top":"Black","left":"Black","bottom":"Black","right":"Black"},"borderStyle":{"top":"solid","left":"solid","bottom":"solid","right":"solid"},"rotationAngle":0,"display":"fixed","cellItem":null,"cellHorizontalAlignment":"none","verticalAlign":"center","horizontalAlign":"center","horizontalContentAlign":"center","embed_html_app1html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=5.0\">\n    <title>Charity Race Mobile</title>\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <style>\n        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');\n        \n        html, body { \n            margin: 0; padding: 0; width: 100%;\n            background-color: #e2e8f0; \n            font-family: 'Inter', sans-serif; \n            -webkit-tap-highlight-color: transparent;\n            overflow-x: hidden; overflow-y: auto; \n            min-height: 100vh;\n        }\n\n        .app-shell {\n            max-width: 600px;\n            margin: 0 auto;\n            background-color: #f8fafc;\n            min-height: 100vh;\n            box-shadow: 0 0 50px rgba(0,0,0,0.1);\n        }\n\n        .horse-badge { \n            width: 52px; height: 52px; \n            display: flex; flex-direction: column;\n            align-items: center; justify-content: center; \n            border-radius: 14px; font-weight: 900; \n            color: white; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.25); \n        }\n\n        .horse-badge .h-label { font-size: 14px; font-weight: 900; margin-bottom: -2px; opacity: 0.9; }\n        .horse-badge .num-label { font-size: 18px; line-height: 1; }\n\n        .dice-roll { animation: roll 0.4s infinite linear; }\n        @keyframes roll { \n            0% { transform: rotate(0deg) scale(1); } \n            50% { transform: rotate(180deg) scale(1.1); } \n            100% { transform: rotate(360deg) scale(1); } \n        }\n\n        .log-entry { font-size: 0.75rem; border-left: 3px solid #6366f1; padding-left: 8px; margin-bottom: 4px; }\n        .log-entry.winner-log { border-left-color: #10b981; color: #10b981; font-weight: 700; }\n        \n        .log-entry.summary-log { \n            border-left-color: #f59e0b; \n            color: #ffffff; \n            font-weight: 900; \n            background: rgba(245, 158, 11, 0.35); \n            padding-top: 4px;\n            padding-bottom: 4px;\n        }\n        \n        input[type=number] { -moz-appearance: textfield; font-size: 16px !important; }\n        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n    </style>\n</head>\n<body>\n    <div class=\"app-shell\">\n        <header class=\"bg-indigo-900 text-white p-4 sticky top-0 z-50 shadow-md\">\n            <div class=\"flex justify-between items-end\">\n                <div>\n                    <h1 class=\"text-xl font-black tracking-tighter uppercase leading-none\">Charity Race</h1>\n                    <p id=\"race-indicator\" class=\"text-indigo-300 font-bold text-[10px] uppercase tracking-widest mt-1\">Race #1 of 6</p>\n                </div>\n                <div class=\"text-right\">\n                    <span class=\"text-[10px] uppercase font-bold text-indigo-300 block\">Total Raised</span>\n                    <span id=\"total-charity\" class=\"text-2xl font-black text-green-400 leading-none\">$0.00</span>\n                </div>\n            </div>\n        </header>\n\n        <main class=\"w-full p-4 space-y-6\">\n            <!-- Settings -->\n            <details class=\"bg-white border border-gray-200 rounded-2xl group overflow-hidden shadow-sm\">\n                <summary class=\"p-4 text-xs font-bold text-gray-500 uppercase flex justify-between items-center cursor-pointer\">\n                    <span>Settings & Rates</span>\n                    <svg class=\"w-4 h-4 transition-transform group-open:rotate-180\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 9l-7 7-7-7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                </summary>\n                <div class=\"p-4 grid grid-cols-2 gap-4 bg-gray-50 border-t border-gray-200\">\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-gray-400 uppercase mb-1\">Payout %</label>\n                        <input type=\"number\" id=\"payout-percent-input\" value=\"70\" class=\"w-full p-2 border border-gray-300 rounded-lg font-bold\">\n                    </div>\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-gray-400 uppercase mb-1\">Ticket $</label>\n                        <input type=\"number\" id=\"ticket-price-input\" value=\"2.00\" step=\"0.50\" class=\"w-full p-2 border border-gray-300 rounded-lg font-bold\">\n                    </div>\n                </div>\n            </details>\n\n            <div id=\"betting-section\" class=\"space-y-4\">\n                <div class=\"flex justify-between items-center px-1\">\n                    <h2 class=\"font-black text-gray-800 uppercase text-sm\">Betting Open</h2>\n                    <div class=\"text-right\">\n                        <p class=\"text-[10px] text-gray-400 font-bold uppercase\">Race Pool</p>\n                        <p id=\"total-pool\" class=\"font-black text-indigo-600 text-xl leading-none\">$0.00</p>\n                    </div>\n                </div>\n                <div id=\"betting-rows\" class=\"grid grid-cols-1 gap-3\"></div>\n                <button id=\"close-betting-btn\" class=\"w-full bg-indigo-600 text-white py-5 rounded-3xl font-black uppercase tracking-widest shadow-xl active:bg-indigo-700 mt-4\">Close Betting</button>\n            </div>\n\n            <div id=\"racing-section\" class=\"hidden py-8 space-y-10 text-center\">\n                <div class=\"flex flex-col items-center\">\n                    <div id=\"die-1\" class=\"w-32 h-32 bg-white border-8 border-indigo-600 rounded-[2.5rem] flex items-center justify-center text-6xl font-black text-indigo-600 shadow-2xl transition-transform\">?</div>\n                    <button id=\"roll-dice-btn\" class=\"w-full mt-8 bg-red-600 text-white py-6 rounded-3xl font-black text-xl uppercase tracking-tighter shadow-xl active:bg-red-700\">Roll for Winner</button>\n                </div>\n                <div class=\"w-full border-t border-dashed border-gray-300 pt-8\">\n                    <p class=\"text-[10px] font-black text-gray-400 uppercase mb-4 tracking-widest\">Manual Selection</p>\n                    <div id=\"manual-override-grid\" class=\"grid grid-cols-3 gap-3\"></div>\n                    <div class=\"mt-8\">\n                        <button id=\"manual-winner-confirm-btn\" class=\"hidden w-full bg-green-600 py-5 rounded-3xl font-black uppercase text-white shadow-xl\">Declare Selected Winner</button>\n                    </div>\n                </div>\n            </div>\n\n            <div id=\"payout-section\" class=\"hidden text-center py-10 bg-white rounded-[2rem] shadow-inner border border-gray-100 mx-4\">\n                <p class=\"text-gray-400 font-black uppercase text-xs mb-2\">Race Result</p>\n                <div class=\"flex flex-col items-center mb-6\">\n                    <div id=\"winner-badge-large\" class=\"w-24 h-24 mb-4 flex flex-col items-center justify-center rounded-[2rem] shadow-xl text-white\">\n                        <span class=\"text-2xl font-bold\">H</span>\n                        <span id=\"winner-badge-num\" class=\"text-4xl font-black\">1</span>\n                    </div>\n                    <div id=\"winner-display\" class=\"text-3xl font-black leading-none\">Horse #1 Wins</div>\n                </div>\n                <div id=\"winner-payout-text\" class=\"inline-block bg-green-100 text-green-700 px-6 py-2 rounded-full font-black text-lg mb-8\">Pays: $0.00/tkt</div>\n                <button id=\"next-race-btn\" class=\"w-[85%] mx-auto block bg-indigo-600 text-white py-5 rounded-2xl font-black uppercase shadow-lg\">Start Next Race</button>\n                <div id=\"event-complete-ui\" class=\"hidden space-y-4\">\n                    <p class=\"text-indigo-900 font-black uppercase text-xl\">All Races Complete</p>\n                    <div id=\"final-stats-box\" class=\"bg-indigo-50 p-4 rounded-2xl border border-indigo-100 text-left mx-4 space-y-1\"></div>\n                </div>\n            </div>\n\n            <!-- Activity Feed -->\n            <div class=\"space-y-4 pt-4 pb-12\">\n                <h3 class=\"text-[10px] font-black uppercase text-gray-400 tracking-widest px-1\">Event Logs</h3>\n                <div id=\"event-logs\" class=\"bg-gray-900 text-gray-400 p-4 rounded-2xl font-mono text-[11px] h-64 overflow-y-auto\">\n                    <div class=\"text-indigo-400\">[SYSTEM] Ready.</div>\n                </div>\n                <div class=\"space-y-3\">\n                    <button id=\"email-results-btn\" class=\"w-full bg-indigo-600 py-5 rounded-3xl font-black uppercase text-white shadow-xl flex items-center justify-center gap-2 active:scale-95 transition-transform\">\n                        <span>Email Results</span>\n                        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                    </button>\n                    <button id=\"excel-export-btn\" class=\"w-full bg-green-600 py-5 rounded-3xl font-black uppercase text-white shadow-xl flex items-center justify-center gap-2 active:scale-95 transition-transform\">\n                        <span>Download Excel (CSV)</span>\n                        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                    </button>\n                    <button id=\"start-new-event-btn\" class=\"hidden w-full bg-indigo-800 py-5 rounded-3xl font-black uppercase text-white shadow-xl flex items-center justify-center gap-2 active:scale-95 transition-transform\">\n                        <span>Start New Event</span>\n                        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                    </button>\n                </div>\n            </div>\n        </main>\n    </div>\n\n    <template id=\"betting-row\">\n        <div class=\"flex items-center justify-between p-3 bg-white rounded-2xl border border-gray-100 shadow-sm\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"horse-num horse-badge\"><span class=\"num-label\"></span><span class=\"h-label\">H</span></div>\n                <div><span class=\"row-payout block text-[13px] text-indigo-600 font-black uppercase tracking-tighter\">Pays $0/tkt</span></div>\n            </div>\n            <div class=\"flex items-center bg-gray-50 rounded-xl p-1 border border-gray-200\">\n                <button class=\"minus w-10 h-10 flex items-center justify-center text-3xl font-black text-gray-400\">-</button>\n                <input type=\"number\" value=\"0\" min=\"0\" class=\"qty w-12 text-center bg-transparent font-black text-lg border-none focus:ring-0\">\n                <button class=\"plus w-10 h-10 flex items-center justify-center text-3xl font-black text-gray-400\">+</button>\n            </div>\n        </div>\n    </template>\n\n    <script>\n        const COLORS = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ec4899'];\n        let state = {\n            currentRace: 1, totalCharityRaised: 0,\n            tickets: [0, 0, 0, 0, 0, 0],\n            payoutPercent: 0.7, ticketPrice: 2.0, raceResults: [],\n            selectedManualHorse: null, isRolling: false,\n            finalGross: 0, finalPayouts: 0, finalCharity: 0\n        };\n\n        const el = {\n            raceIndicator: document.getElementById('race-indicator'),\n            totalCharity: document.getElementById('total-charity'),\n            bettingRows: document.getElementById('betting-rows'),\n            totalPool: document.getElementById('total-pool'),\n            eventLogs: document.getElementById('event-logs'),\n            bettingSection: document.getElementById('betting-section'),\n            racingSection: document.getElementById('racing-section'),\n            payoutSection: document.getElementById('payout-section'),\n            die: document.getElementById('die-1'),\n            winnerDisplay: document.getElementById('winner-display'),\n            winnerBadgeLarge: document.getElementById('winner-badge-large'),\n            winnerBadgeNum: document.getElementById('winner-badge-num'),\n            winnerPayoutText: document.getElementById('winner-payout-text'),\n            nextRaceBtn: document.getElementById('next-race-btn'),\n            eventCompleteUI: document.getElementById('event-complete-ui'),\n            manualConfirmBtn: document.getElementById('manual-winner-confirm-btn'),\n            startNewEventBtn: document.getElementById('start-new-event-btn'),\n            emailBtn: document.getElementById('email-results-btn'),\n            excelBtn: document.getElementById('excel-export-btn')\n        };\n\n        function init() {\n            renderBetting();\n            renderManualButtons();\n            updateStats();\n        }\n\n        function renderBetting() {\n            el.bettingRows.innerHTML = '';\n            const template = document.getElementById('betting-row').content;\n            for (let i = 0; i < 6; i++) {\n                const clone = document.importNode(template, true);\n                const badge = clone.querySelector('.horse-num');\n                badge.style.backgroundColor = COLORS[i];\n                badge.querySelector('.num-label').textContent = i + 1;\n                const qtyInput = clone.querySelector('.qty');\n                qtyInput.value = state.tickets[i];\n                clone.querySelector('.plus').onclick = () => { state.tickets[i]++; updateStats(); };\n                clone.querySelector('.minus').onclick = () => { if (state.tickets[i] > 0) state.tickets[i]--; updateStats(); };\n                qtyInput.oninput = (e) => { state.tickets[i] = parseInt(e.target.value) || 0; updateStats(false); };\n                el.bettingRows.appendChild(clone);\n            }\n        }\n\n        function renderManualButtons() {\n            const container = document.getElementById('manual-override-grid');\n            container.innerHTML = '';\n            for (let i = 0; i < 6; i++) {\n                const btn = document.createElement('button');\n                btn.className = \"py-5 rounded-2xl text-white font-black text-xl shadow-lg border-4 border-transparent\";\n                btn.style.backgroundColor = COLORS[i];\n                btn.textContent = `H${i+1}`;\n                btn.onclick = () => {\n                    state.selectedManualHorse = i;\n                    document.querySelectorAll('#manual-override-grid button').forEach(b => b.style.border = '4px solid transparent');\n                    btn.style.border = '4px solid #000';\n                    el.manualConfirmBtn.classList.remove('hidden');\n                    el.manualConfirmBtn.style.backgroundColor = COLORS[i];\n                };\n                container.appendChild(btn);\n            }\n        }\n\n        el.manualConfirmBtn.onclick = () => {\n            if (state.selectedManualHorse !== null) finishRace(state.selectedManualHorse);\n        };\n\n        function updateStats(refreshInputs = true) {\n            state.payoutPercent = (parseInt(document.getElementById('payout-percent-input').value) || 70) / 100;\n            state.ticketPrice = parseFloat(document.getElementById('ticket-price-input').value) || 2;\n            const totalTickets = state.tickets.reduce((a, b) => a + b, 0);\n            const pool = totalTickets * state.ticketPrice;\n            const payoutPoolLimit = pool * state.payoutPercent;\n            el.totalPool.textContent = `$${pool.toFixed(2)}`;\n            state.tickets.forEach((t, i) => {\n                const perTicket = t > 0 ? Math.round(payoutPoolLimit / t) : 0;\n                const row = el.bettingRows.children[i];\n                if (row) {\n                    row.querySelector('.row-payout').textContent = `Pays $${perTicket}/tkt`;\n                    if (refreshInputs) row.querySelector('.qty').value = t;\n                }\n            });\n        }\n\n        function log(msg, type = 'normal') {\n            const div = document.createElement('div');\n            div.className = `log-entry ${type === 'winner' ? 'winner-log' : ''} ${type === 'summary' ? 'summary-log' : ''}`;\n            const time = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});\n            div.innerHTML = `<span class=\"opacity-40 text-[9px] mr-2\">${time}</span> ${msg}`;\n            el.eventLogs.prepend(div);\n        }\n\n        document.getElementById('close-betting-btn').onclick = () => {\n            if (state.tickets.reduce((a, b) => a + b, 0) === 0) return;\n            el.bettingSection.classList.add('hidden');\n            el.racingSection.classList.remove('hidden');\n            el.manualConfirmBtn.classList.add('hidden');\n            state.selectedManualHorse = null;\n            window.scrollTo({top: 0, behavior: 'smooth'});\n        };\n\n        document.getElementById('roll-dice-btn').onclick = async () => {\n            if (state.isRolling) return;\n            state.isRolling = true;\n            el.die.classList.add('dice-roll');\n            await new Promise(r => setTimeout(r, 1200));\n            const winNum = Math.floor(Math.random() * 6) + 1;\n            el.die.classList.remove('dice-roll');\n            el.die.textContent = winNum;\n            state.isRolling = false;\n            finishRace(winNum - 1);\n        };\n\n        function finishRace(winnerIdx) {\n            const horseNum = winnerIdx + 1;\n            const pool = state.tickets.reduce((a, b) => a + b, 0) * state.ticketPrice;\n            const winnerTickets = state.tickets[winnerIdx];\n            const perTicket = winnerTickets > 0 ? Math.round((pool * state.payoutPercent) / winnerTickets) : 0;\n            const charityCut = pool - (perTicket * winnerTickets);\n            \n            const raceLabel = state.currentRace === 7 ? \"Final Race\" : `Race #${state.currentRace}`;\n            \n            state.totalCharityRaised += charityCut;\n            state.raceResults.push({ \n                race: state.currentRace, \n                winner: horseNum, \n                payout: perTicket, \n                charity: charityCut, \n                tickets_sold: [...state.tickets],\n                ticketPrice: state.ticketPrice\n            });\n            \n            el.totalCharity.textContent = `$${state.totalCharityRaised.toLocaleString(undefined, {minimumFractionDigits: 2})}`;\n            el.winnerBadgeLarge.style.backgroundColor = COLORS[winnerIdx];\n            el.winnerBadgeNum.textContent = horseNum;\n            el.winnerDisplay.textContent = `Horse #${horseNum} Wins`;\n            el.winnerDisplay.style.color = COLORS[winnerIdx];\n            el.winnerPayoutText.textContent = `Pays: $${perTicket.toFixed(2)}/tkt`;\n            \n            log(`${raceLabel} Horse #${horseNum} wins! Payout: $${perTicket.toFixed(2)}/Ticket`, 'winner');\n            \n            el.racingSection.classList.add('hidden');\n            el.payoutSection.classList.remove('hidden');\n            \n            if (state.currentRace === 7) {\n                el.nextRaceBtn.classList.add('hidden');\n                el.eventCompleteUI.classList.remove('hidden');\n                el.startNewEventBtn.classList.remove('hidden');\n                calculateEventTotals();\n            }\n        }\n\n        function calculateEventTotals() {\n            let totalGross = 0;\n            let totalWinnings = 0;\n            state.raceResults.forEach(r => {\n                const sold = r.tickets_sold.reduce((a,b) => a+b, 0);\n                const winnerCount = r.tickets_sold[r.winner-1];\n                totalGross += (sold * r.ticketPrice);\n                totalWinnings += (r.payout * winnerCount);\n            });\n            state.finalGross = totalGross;\n            state.finalPayouts = totalWinnings;\n            state.finalCharity = state.totalCharityRaised;\n\n            document.getElementById('final-stats-box').innerHTML = `\n                <div class=\"flex justify-between font-bold\"><span>Gross Revenue:</span><span>$${totalGross.toFixed(2)}</span></div>\n                <div class=\"flex justify-between font-bold text-indigo-600\"><span>Total Payouts:</span><span>$${totalWinnings.toFixed(2)}</span></div>\n                <div class=\"flex justify-between font-bold text-green-600\"><span>Charity Total:</span><span>$${state.finalCharity.toFixed(2)}</span></div>\n            `;\n            \n            log(`--- FINAL EVENT COMPLETE ---`);\n            log(`CHARITY TOTAL: $${state.finalCharity.toFixed(2)}`, 'summary');\n            log(`TOTAL PAYOUTS: $${state.finalPayouts.toFixed(2)}`, 'summary');\n            log(`GROSS REVENUE: $${state.finalGross.toFixed(2)}`, 'summary');\n            log(`--------------------------`);\n        }\n\n        el.nextRaceBtn.onclick = () => {\n            if (state.currentRace < 6) { state.currentRace++; resetRace(); }\n            else if (state.currentRace === 6) { state.currentRace = 7; setupFinal(); }\n        };\n\n        function resetRace() {\n            state.tickets = [0, 0, 0, 0, 0, 0];\n            el.payoutSection.classList.add('hidden'); \n            el.bettingSection.classList.remove('hidden');\n            el.raceIndicator.textContent = state.currentRace === 7 ? `Final Winner's Race` : `Race #${state.currentRace} of 6`;\n            el.die.textContent = \"?\"; \n            renderBetting(); \n            updateStats();\n        }\n\n        function setupFinal() {\n            resetRace();\n            el.raceIndicator.textContent = `Final Winner's Race`;\n            el.raceIndicator.className = \"text-yellow-500 font-black uppercase text-[10px] tracking-widest mt-1\";\n            log(\"<b>PREPARING FINAL CHAMPIONSHIP RACE</b>\");\n        }\n\n        el.startNewEventBtn.onclick = () => {\n            if(!confirm(\"Start a new event? This clears current stats.\")) return;\n            log(`--- NEW EVENT STARTED ---`, 'winner');\n            state.currentRace = 1;\n            state.totalCharityRaised = 0;\n            state.raceResults = [];\n            state.tickets = [0, 0, 0, 0, 0, 0];\n            el.totalCharity.textContent = \"$0.00\";\n            el.startNewEventBtn.classList.add('hidden');\n            el.eventCompleteUI.classList.add('hidden');\n            el.nextRaceBtn.classList.remove('hidden');\n            el.raceIndicator.className = \"text-indigo-300 font-bold text-[10px] uppercase tracking-widest mt-1\";\n            resetRace();\n            window.scrollTo({top: 0, behavior: 'smooth'});\n        };\n\n        // --- EXPORT LOGIC ---\n\n        function generateEmailBody() {\n            const raceLogs = state.raceResults.map(r => {\n                const label = r.race === 7 ? \"Final Winner's Race\" : `Race #${r.race}`;\n                return `${label} - Winner: Horse #${r.winner}, Payout: $${r.payout.toFixed(2)}/tkt, Charity: $${r.charity.toFixed(2)}`;\n            }).join('\\n');\n\n            const summaryBlock = `\\n\\n--- FINAL EVENT SUMMARY ---\\nGross Revenue: $${state.finalGross.toFixed(2)}\\nTotal Payouts: $${state.finalPayouts.toFixed(2)}\\nCharity Total: $${state.finalCharity.toFixed(2)}\\n--------------------------\\nGenerated: ${new Date().toLocaleString()}`;\n            return raceLogs + summaryBlock;\n        }\n\n        el.emailBtn.onclick = () => {\n            if (state.raceResults.length === 0) {\n                alert(\"No race data to export yet.\");\n                return;\n            }\n            \n            const email = prompt(\"Send report to:\", \"\");\n            if (email === null) return;\n\n            // 1. Immediate Action: Open Mobile Mail App\n            const subject = \"Charity Race Results Summary\";\n            const body = generateEmailBody();\n            \n            const mailLink = document.createElement('a');\n            mailLink.href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\n            mailLink.style.display = 'none';\n            document.body.appendChild(mailLink);\n            mailLink.click();\n            setTimeout(() => document.body.removeChild(mailLink), 100);\n\n            // 2. Background Action: Sync to DB (Silent)\n            const payload = { \n                results: state.raceResults, \n                totalCharity: state.totalCharityRaised, \n                email: email \n            };\n\n            fetch('save_race.php', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n                body: \"data=\" + encodeURIComponent(JSON.stringify(payload))\n            }).then(response => response.json())\n              .then(data => log(`Cloud Backup: ${data.message}`, 'winner'))\n              .catch(err => console.log(\"DB sync failed, but email opened.\"));\n        };\n\n        el.excelBtn.onclick = () => {\n            if (state.raceResults.length === 0) {\n                alert(\"No race data to export.\");\n                return;\n            }\n\n            // Create CSV Content\n            let csv = \"Race,Winner,Payout Per Ticket,Charity Contribution,H1 Sales,H2 Sales,H3 Sales,H4 Sales,H5 Sales,H6 Sales\\n\";\n            \n            state.raceResults.forEach(r => {\n                const row = [\n                    r.race === 7 ? \"Final\" : r.race,\n                    r.winner,\n                    r.payout.toFixed(2),\n                    r.charity.toFixed(2),\n                    ...r.tickets_sold\n                ];\n                csv += row.join(\",\") + \"\\n\";\n            });\n\n            csv += `\\nTOTALS,,,,\\n`;\n            csv += `Gross Revenue,$${state.finalGross.toFixed(2)}\\n`;\n            csv += `Total Payouts,$${state.finalPayouts.toFixed(2)}\\n`;\n            csv += `Charity Total,$${state.finalCharity.toFixed(2)}\\n`;\n\n            // Download CSV\n            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\n            const url = URL.createObjectURL(blob);\n            const link = document.createElement(\"a\");\n            link.setAttribute(\"href\", url);\n            link.setAttribute(\"download\", `Charity_Race_Results_${new Date().toISOString().slice(0,10)}.csv`);\n            link.style.visibility = 'hidden';\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n            \n            log(\"CSV Report Downloaded\", \"winner\");\n        };\n\n        init();\n    </script>\n</body>\n</html>","embed_html_app1headerHtml":""},"metaData":{"position":{"left":-242,"top":197},"size":{"width":400,"height":662}}}]}],"offset":{"left":231,"top":22}}],"connections":{"targetConnections":{},"sourceConnections":{}},"customStatesProperties":{"id1771521656521":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":0}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"topZIndex":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":0}}},"elementOpacity":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":1}}},"staticMargin":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"horizontalMargin":0,"verticalMargin":0}}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":0,"height":1068,"top":0,"left":0}}}},"lastResizingSize":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"width":362,"height":963}}}},"isVisibleInLastSection":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInLastDataItem":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"shadow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"top":0,"left":0,"spread":0,"blur":0,"color":"black"}}}},"glow":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"spread":0,"blur":0,"color":"black"}}}},"verticalAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"horizontalAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"horizontalContentAlign":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"center"}}},"basicUserCanEdit":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":null}}},"backgroundColor":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"rgb(238,228,216)"}}},"imageUrl":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":""}}},"imageLayout":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"stretchedToFill"}}},"imagePosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"vertical":"center","horizontal":"center"}}}},"origImage":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":""}}},"imageOpacity":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":1}}},"backgroundOverlay":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":"transparent"}}},"fixedBackground":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":false}}}},"id1771521664324":{"order":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":3}}},"isElementWasEditedInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"isVisibleInMode":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":true}}},"sizeAndPosition":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"height":600,"left":0,"width":0,"top":0}}}},"rowsItems":{"MobileResponsiveStateId1234":{"coordinator":{"stateValue":{"1771802202105":{"id":1771802202105}}}}}}},"pageId":"id1771521656521","version":17.004,"id":"id1771806782571","relativePoint":{"left":231,"top":22}}