giveaway.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giveaway - Social Stream Ninja</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Kode+Mono:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="icon" href="./favicon.ico" />
    <!-- Commented out due to CORS issues when running locally -->
    <!-- <link rel="preload" href="./thirdparty/NotoColorEmoji.ttf" as="font" type="font/ttf" crossorigin="anonymous"> -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

        /* Debugging Styles */
        .debug-box {
            border: 2px solid red;
            position: relative;
        }
        .debug-box::before {
            content: attr(data-debug);
            position: absolute;
            top: -20px;
            left: 0;
            background: black;
            color: white;
            padding: 2px 5px;
            font-size: 12px;
        }

        :root {
            /* Color Palette - Based on Loophole */
            --color-gray-10: #ededed;
            --color-gray-30: #d0d0d0;
            --color-gray-50: #9b9b9b;
            --color-gray-60: #919191;
            --color-gray-70: #474747;
            --color-gray-80: #303030;
            --color-gray-100: #222222;
            --color-black: #000;
            
            --color-lime: #cff083;
            --color-blue: #4265e5;
            --color-yellow: #fcdf94;
            --color-red: #e56942;
            
            /* Admin UI */
            --admin-fg: var(--color-gray-10);
            --admin-bg: var(--color-gray-80);
            --admin-card-bg: var(--color-gray-100);
            --admin-bg-dark: var(--color-black);
            --admin-input-bg: var(--color-gray-70);
            --admin-input-border: var(--color-gray-60);
            --color-alert: var(--color-yellow);
            --color-destructive: var(--color-red);
            --color-success: #35b045;
            
            /* OBS Visible stuff */
            --color-buffalo-yellow: #fcd00b;
            --color-buffalo-charcoal: #362e2c;
            --color-buffalo-medium: #ff8612;
            --color-buffalo-hot: #f5193a;
            
            /* Spacing */
            --space-1: 3px;
            --space-2: 5px;
            --space-3: 9px;
            --space-4: 16px;
            
            /* Typography */
            --admin-font-size: 16px;
            --admin-font-size-input: 15px;
            --font-size-header: 24px;
            
            /* OBS Display */
            --pane-padding: 11px 28px;
            --pane-radius: 30px;
            --obs-font-size: 32px;
            --obs-font-weight: 600;
            
            /* Custom font styling */
            --admin-button-bg: var(--color-gray-70);
            --admin-button-border: var(--color-gray-60);
            --admin-text-color: var(--color-gray-10);
        }

        body {
            font-family: 'IBM Plex Sans', 'Montserrat', Arial, sans-serif;
            background-color: var(--admin-bg);
            color: var(--admin-fg);
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow: auto;
        }

        .container {
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: 100vh;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .giveaway-panel {
            background-color: var(--admin-card-bg);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            padding: 20px;
            margin-bottom: 20px;
            max-width: 800px;
            width: 100%;
            align-self: center;
        }

        .giveaway-form {
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            padding: 5px 0;
            color: var(--admin-fg);
            font-weight: 500;
            margin-bottom: 8px;
        }

        .form-group input, 
        .form-group select, 
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            line-height: 22px;
            border: 2px solid var(--admin-input-border);
            border-radius: 0.4rem;
            background-color: var(--admin-input-bg);
            color: var(--admin-fg);
            font-family: 'IBM Plex Sans', 'Montserrat', Arial, sans-serif;
            font-size: var(--admin-font-size-input);
            box-sizing: border-box;
        }

        input:hover, select:hover {
            outline: none;
            border: 2px outset currentColor;
        }

        input:focus, select:focus {
            outline: none;
            border: 2px solid var(--color-blue);
        }

        button {
            background-color: var(--color-blue);
            color: var(--admin-fg);
            border: 2px outset var(--color-blue);
            padding: 7px 15px;
            border-radius: 0.4rem;
            cursor: pointer;
            font-weight: 600;
            font-family: 'IBM Plex Sans', 'Montserrat', Arial, sans-serif;
            font-size: var(--admin-font-size-input);
            margin-right: 10px;
        }

        button:hover {
            opacity: 0.9;
            outline: 1px solid var(--color-blue);
            outline-offset: 2px;
        }

        button.secondary {
            background-color: var(--color-lime);
            border-color: var(--color-lime);
            color: var(--color-gray-100);
        }

        button.secondary:hover {
            outline-color: var(--color-lime);
        }

        button.warning {
            background-color: var(--color-red);
            border-color: var(--color-red);
        }

        button.warning:hover {
            outline-color: var(--color-red);
        }

        .giveaway-card {
            background-color: var(--admin-card-bg);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid var(--color-blue);
        }

        .giveaway-card h3 {
            margin-top: 0;
            margin-bottom: 10px;
            color: var(--color-blue);
        }

        .giveaway-details {
            margin-bottom: 15px;
        }

        .giveaway-details ul {
            padding-left: 20px;
        }

        .giveaway-details li {
            margin-bottom: 5px;
        }

        .spinner-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            display: none;
            max-width: 100%;
        }

        .spinner {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            transition: transform 3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
            transform: rotate(0deg);
        }
        
        .winner-display {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
            font-weight: bold;
            padding: 10px;
            border-radius: 8px;
            background-color: var(--color-lime);
            color: var(--color-gray-100);
            display: none;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .tabs {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 2px solid var(--color-gray-70);
        }

        .tab {
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            color: var(--color-gray-30);
        }

        .tab.active {
            border-bottom: 2px solid var(--color-lime);
            font-weight: bold;
            color: var(--color-lime);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Confetti effect for winner announcement */
        .confetti {
            position: fixed; /* Changed to fixed positioning relative to the viewport */
            width: 10px;
            height: 10px;
            background-color: #f00;
            opacity: 0;
            top: 0; /* Start at the top of the viewport */
            z-index: 9999; /* Ensure confetti appears on top of other elements */
        }
        
        #entrants-list {
            max-height: 200px;
            overflow-y: auto;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid var(--color-gray-50);
            border-radius: 4px;
            background-color: var(--admin-card-bg);
        }
        
        .entrant-item {
            padding: 5px;
            border-bottom: 1px solid var(--color-gray-70);
            display: flex;
            align-items: center;
        }
        
        .entrant-image {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }

        /* Heading styles */
        h1, h2, h3 {
            margin: var(--space-2) 0;
            line-height: 1;
        }
        
        h1 {
            font-size: 32px;
            font-weight: 600;
        }
        
        h2 {
            font-size: 24px;
            font-weight: 600;
        }
        
        h3 {
            font-size: 18px;
            font-weight: 600;
        }

        /* OBS Display mode styles */
        .obs-mode {
            background-color: transparent !important;
            overflow: visible !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
        }
        
        .obs-mode .container {
            padding: 0 !important;
            min-height: 100vh !important;
            height: 100vh !important;
            width: 100% !important;
            margin: 0 !important;
            overflow: visible !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }
        
        .obs-mode .giveaway-panel {
            display: none !important;
        }
        
        /* Hide OBS container in admin mode by default */
        #obs-display-container {
            display: none !important;
            visibility: hidden !important;
            position: absolute !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            opacity: 0 !important;
        }
        
        /* Only show in OBS mode */
        .obs-mode #obs-display-container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 auto !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            height: 100vh !important;
            visibility: visible !important;
            position: relative !important;
            overflow: visible !important;
            opacity: 1 !important;
        }
        
        #obs-active-giveaway {
            min-width: 500px !important; /* Matched to preview width */
            width: 500px !important; /* Fixed width to match preview */
            max-width: 800px !important;
            padding: 16px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }
        
        /* Loophole-style OBS display */
        .giveaway-pane {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 800px;
            width: auto;
            color: var(--color-buffalo-charcoal);
            background: var(--color-buffalo-yellow);
            padding: 20px;
            font-size: var(--obs-font-size);
            font-weight: var(--obs-font-weight);
            border-radius: var(--pane-radius);
            margin: 0 auto;
        }
        
        .giveaway-main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 3.45em;
            border-radius: calc(var(--pane-radius) * 0.6666);
            font-size: 1em;
            line-height: 1.15;
            font-weight: 700;
            text-align: center;
            /* Removing the inner white glow */
            /* box-shadow: inset 0 0 6px white; */
        }
        
        .giveaway-main-bg {
            padding: 0 6px;
            border-radius: calc(var(--pane-radius) * 0.6666);
            background: white;
        }
        
        .giveaway-bar {
            display: flex;
            gap: 12px;
            width: 100%;
            justify-content: center;
        }
        
        .giveaway-bar > span {
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            flex: 1;
            color: var(--color-buffalo-charcoal);
            background: #e3e1de;
            border-radius: 12px;
            font-size: 25px;
            line-height: 2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 100px;
            padding: 0 15px;
        }
        
        .giveaway-callout {
            text-align: center;
            line-height: 1.5;
        }
        
        .giveaway-callout-text {
            font-size: 25px;
            padding-inline: 0.25em;
        }
        
        .obs-mode .winner-display {
            font-size: 36px;
            font-weight: 700;
            padding: 15px;
            border-radius: var(--pane-radius);
            background-color: var(--color-buffalo-yellow);
            color: var(--color-buffalo-charcoal);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            width: auto;
        }
        
        .giveaway-spinning {
            position: relative;
            height: 100%; /* Set a fixed height to match the container */
            overflow: hidden; /* Change from scroll to hidden to prevent scroll interaction */
            -ms-overflow-style: none;
            scrollbar-width: none;
            mask: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 5%) 0%,
                #000 28%,
                #000 72%,
                rgba(0, 0, 0, 5%) 100%
            );
        }
        
        .giveaway-spinning::-webkit-scrollbar {
            display: none;
        }
        
        .spinning-container {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Changed from center */
            height: auto;
            width: 100%;
            bottom: 0;
            animation: scrollDown cubic-bezier(0.2, 0.43, 0.77, 1.04) 1 12s;
        }
        
        @keyframes scrollDown {
            0% { 
                bottom: -800px; 
            }
            90% { 
                bottom: 14px; /* Position just past center to create a bounce effect */
            }
            100% { 
                bottom: 0; /* Final position shows the selected winner centered */
            }
        }
        
        .copy-link-container {
            margin-top: 20px;
            padding: 15px;
            background-color: var(--admin-input-bg);
            border-radius: 8px;
        }
        
        .copy-link-field {
            display: flex;
            margin-top: 10px;
        }
        
        .copy-link-field input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid var(--admin-input-border);
            border-radius: 4px 0 0 4px;
            font-family: monospace;
            background-color: var(--admin-card-bg);
        }
        
        .copy-link-field button {
            border-radius: 0 4px 4px 0;
            margin: 0;
        }
        
        .copy-success {
            color: var(--color-success);
            font-weight: bold;
            margin-top: 5px;
            display: none;
        }
        
        /* Module header styling */
        .module-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            background: var(--color-gray-70);
            color: var(--color-lime);
            margin: -20px -20px 20px -20px;
            padding: var(--space-1) var(--space-3);
        }
        
        .module-header h3 {
            margin-right: auto;
            color: var(--color-lime);
        }
        
        /* Style editor section */
        .style-editor {
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid var(--color-gray-70);
        }
        
        .color-picker-group {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 5px;
            flex-wrap: wrap;
        }
        
        .color-picker-group label {
            width: 120px;
            margin-bottom: 0;
            font-size: 13px;
            flex-shrink: 0;
        }
        
        .color-picker-group input[type="range"] {
            flex: 1;
            min-width: 80px;
            max-width: 150px;
        }
        
        .color-picker-group input[type="color"] {
            width: 30px;
            height: 30px;
            padding: 0;
            border: none;
        }
        
        .color-picker-group .opacity-value {
            width: 35px;
            text-align: center;
            flex-shrink: 0;
        }
        
        /* Preview styles for settings */
        .preview-container {
            margin-top: 15px;
            padding: 15px;
            background-color: var(--admin-input-bg);
            border-radius: 8px;
            position: relative;
            max-width: 100%;
            overflow: hidden;
        }
        
        .preview-giveaway-pane {
            min-width: 500px !important; /* Match proportions of OBS view */
            width: 500px !important; /* Increased to match actual OBS width */
            max-width: 800px !important; /* Same as OBS view */
            transform: scale(0.7);
            transform-origin: center;
            margin: 0 auto !important;
            padding: 16px !important;
            gap: 10px !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
        }
        
        #settings-preview-area {
            width: 100%; 
            height: 320px; /* Increased to accommodate larger preview size */
            background-color: rgba(0,0,0,0.1); 
            border-radius: 8px; 
            overflow: hidden; 
            position: relative; 
            display: flex; 
            justify-content: center; 
            align-items: center;
            padding: 0;
        }
        
        .preview-frame {
            width: 100%;
            height: 250px;
            border: none;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        /* Dashboard card styling */
        .dashboard-module {
            padding: 20px;
            background-color: var(--admin-card-bg);
            border-radius: 8px;
            margin-bottom: 25px;
        }
        
        .dashboard-module-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            background: var(--color-gray-70);
            color: var(--color-lime);
            padding: var(--space-1) var(--space-3);
            margin-bottom: 15px;
            border-radius: 4px;
        }
        
        .dashboard-module-header h3 {
            margin-right: auto;
            color: var(--color-lime);
            margin: var(--space-2) 0;
        }

        .style-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
            max-width: 100%;
        }
        
        .style-section {
            background-color: rgba(0,0,0,0.05);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        .style-section h4 {
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 8px;
            margin-bottom: 15px;
            color: var(--color-lime);
        }
        
        .style-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .color-picker-group {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 5px;
            flex-wrap: wrap;
        }
        
        .color-picker-group label {
            width: 120px;
            margin-bottom: 0;
            font-size: 13px;
            flex-shrink: 0;
        }
        
        .style-actions {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-top: 20px;
        }

        /* Make form controls fit better */
        .style-section .form-group {
            margin-bottom: 10px;
        }

        .style-section label {
            display: inline-block;
            min-width: 120px;
            max-width: 120px;
        }

        /* Make the grid responsive */
        @media (max-width: 900px) {
            .style-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }
        
        /* Optimize for narrower screens */
        @media (max-width: 800px) {
            .preview-container button {
                padding: 8px 12px;
                font-size: 14px;
            }
            
            .preview-giveaway-pane {
                min-width: 320px !important;
                width: 320px !important;
                transform: scale(0.65);
            }
        }

        .style-section select.form-control {
            background-color: var(--admin-input-bg);
            border: 1px solid var(--admin-input-border);
            color: var(--admin-text-color);
            padding: 8px;
            border-radius: 4px;
            max-width: 100%;
            margin-bottom: 10px;
        }

        .style-section select.form-control:focus {
            outline: none;
            border-color: var(--color-lime);
        }

        .range-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .range-value {
            min-width: 45px;
            text-align: right;
        }

        /* Custom font preview styles */
        .custom-font-preview {
            margin-top: 10px;
            padding: 8px;
            border-radius: 4px;
            background-color: rgba(0,0,0,0.1);
            text-align: center;
            font-size: 16px;
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-control {
            background-color: var(--admin-input-bg);
            border: 1px solid var(--admin-input-border);
            color: var(--admin-text-color);
            padding: 8px;
            border-radius: 4px;
            max-width: 100%;
        }

        .btn {
            background-color: var(--admin-button-bg);
            border: 1px solid var(--admin-button-border);
            color: var(--admin-text-color);
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn:hover {
            background-color: var(--color-lime);
            color: black;
        }

        .btn-sm {
            padding: 6px 10px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- OBS display container - only shown in OBS mode -->
        <div id="obs-display-container" style="display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important;">
            <div id="obs-active-giveaway" class="giveaway-pane"></div>
            <div id="obs-spinner-container" class="spinner-container">
                <div id="obs-spinner" class="spinner"></div>
            </div>
            <div id="obs-winner-display" class="winner-display"></div>
            <div id="obs-entrants-display"></div>
        </div>
        
        <!-- Admin Panel for creating/managing giveaways -->
        <div class="giveaway-panel">
            <div class="module-header">
                <h3>Giveaway System</h3>
            </div>
            
            <div class="tabs">
                <div class="tab active" data-tab="giveaways">Giveaways</div>
                <div class="tab" data-tab="settings">Settings</div>
            </div>
            
            <div class="tab-content active" id="giveaways-tab">
                <div class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>OBS Integration</h3>
                    </div>
                    <p>Copy this URL and add it as a Browser Source in OBS to display the giveaway to your viewers:</p>
                    <div class="copy-link-field">
                        <input type="text" id="obs-url" readonly>
                        <button id="copy-obs-url">Copy</button>
                    </div>
                    <p class="copy-success" id="copy-success">URL copied to clipboard!</p>
                </div>
                
                <div class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>Create New Giveaway</h3>
                    </div>
                    <div class="giveaway-form">
                        <div class="form-group">
                            <label for="giveaway-title">Giveaway Title</label>
                            <input type="text" id="giveaway-title" placeholder="e.g. Win a T-shirt!" value="Giveaway!">
                        </div>
                        
                        <div class="form-group">
                            <label for="giveaway-type">Giveaway Type</label>
                            <select id="giveaway-type">
                                <option value="keyword">Keyword Entry</option>
                                <option value="all">All Viewers</option>
                            </select>
                        </div>
                        
                        <div class="form-group keyword-field">
                            <label for="giveaway-keyword">Entry Keyword</label>
                            <input type="text" id="giveaway-keyword" placeholder="e.g. !win">
                        </div>
                        
                        <div class="form-group">
                            <label for="giveaway-prize">Prize Description</label>
                            <input type="text" id="giveaway-prize" placeholder="e.g. Free T-shirt">
                        </div>
                        
                        <button id="create-giveaway-btn">Create Giveaway</button>
                    </div>
                </div>
                
                <div id="active-giveaway-container" class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>Active Giveaway</h3>
                    </div>
                    <div id="active-giveaway" class="giveaway-card">
                        <p>No active giveaway</p>
                    </div>
                    <div id="spinner-container" class="spinner-container">
                        <div id="spinner" class="spinner"></div>
                    </div>
                    <div id="winner-display" class="winner-display"></div>
                    <div id="active-controls" style="display: none; margin-top: 15px;">
                        <button id="pick-winner-btn" class="secondary">Pick Winner</button>
                        <button id="complete-giveaway-btn">Complete Giveaway</button>
                        <button id="cancel-giveaway-btn" class="warning">Cancel</button>
                    </div>
                </div>
                
                <div id="upcoming-giveaways-container" class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>Upcoming Giveaways</h3>
                    </div>
                    <div id="upcoming-giveaways"></div>
                </div>
                
                <div id="completed-giveaways-container" class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>Completed Giveaways</h3>
                    </div>
                    <div style="display: flex; margin-bottom: 10px;">
                        <button id="clear-completed-btn" class="warning">Clear All Completed</button>
                        <button id="download-records-btn" style="margin-left: 10px;">Download Records</button>
                        <select id="download-format" style="margin-left: 10px; padding: 5px; width: auto;">
                            <option value="csv">CSV</option>
                            <option value="json">JSON</option>
                        </select>
                    </div>
                    <div id="completed-giveaways"></div>
                </div>
            </div>
            
            <div class="tab-content" id="settings-tab">
                <div class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>OBS Preview</h3>
                    </div>
                    <p>Preview your OBS display with current style settings:</p>
                    <div class="preview-container">
                        <div id="settings-preview-area">
                            <!-- Preview content will be dynamically generated here -->
                            <div id="preview-giveaway-pane" class="giveaway-pane preview-giveaway-pane"></div>
                        </div>
                        <div style="margin-top: 15px; display: flex; justify-content: center; gap: 10px;">
                            <button id="preview-normal-btn">Normal View</button>
                            <button id="preview-spinning-btn">Test Spinning</button>
                            <button id="preview-winner-btn">Test Winner</button>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>General Settings</h3>
                    </div>
                    
                    <div class="form-group">
                        <label for="winner-animation">Winner Animation</label>
                        <select id="winner-animation">
                            <option value="confetti">Confetti</option>
                            <option value="spotlight">Spotlight</option>
                            <option value="none">None</option>
                        </select>
                    </div>
                    
                    <h4 style="margin-top: 20px; color: var(--color-lime);">Messages</h4>
                    
                    <div class="form-group">
                        <label for="spinner-text">Spinner Text</label>
                        <input type="text" id="spinner-text" placeholder="Text shown during winner selection" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="winner-prefix">Winner Prefix</label>
                        <input type="text" id="winner-prefix" placeholder="Text shown before winner name" class="form-control">
                    </div>
                    
                    <button id="save-settings-btn">Save Settings</button>
                </div>
                
                <div class="style-editor dashboard-module">
                    <div class="dashboard-module-header">
                        <h3>OBS Display Styling</h3>
                    </div>
                    <p>Customize how the giveaway appears in your OBS stream:</p>
                    
                    <style>
                        .style-grid {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 15px;
                            margin-bottom: 20px;
                            max-width: 100%;
                        }
                        
                        .style-section {
                            background-color: rgba(0,0,0,0.05);
                            border-radius: 8px;
                            padding: 12px;
                            margin-bottom: 15px;
                        }
                        
                        .style-section h4 {
                            border-bottom: 1px solid rgba(255,255,255,0.1);
                            padding-bottom: 8px;
                            margin-bottom: 15px;
                            color: var(--color-lime);
                        }
                        
                        .style-controls {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                        }
                        
                        .color-picker-group {
                            display: flex;
                            align-items: center;
                            margin-bottom: 8px;
                            gap: 5px;
                            flex-wrap: wrap;
                        }
                        
                        .color-picker-group label {
                            width: 120px;
                            margin-bottom: 0;
                            font-size: 13px;
                            flex-shrink: 0;
                        }
                        
                        .style-actions {
                            display: flex;
                            justify-content: flex-start;
                            gap: 10px;
                            margin-top: 20px;
                        }
                    </style>
                    
                    <div class="style-grid">
                        <!-- Left Column -->
                        <div>
                            <div class="style-section">
                                <h4>Giveaway Header</h4>
                                <div class="style-controls">
                                    <div class="color-picker-group">
                                        <label>Background Color:</label>
                                        <input type="color" id="header-bg-color" value="#fcd00b">
                                        <input type="range" id="header-bg-opacity" min="0" max="100" value="100">
                                        <span id="header-bg-opacity-value" class="opacity-value">100%</span>
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Text Color:</label>
                                        <input type="color" id="header-text-color" value="#362e2c">
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Title Box Color:</label>
                                        <input type="color" id="title-bg-color" value="#ffffff">
                                        <input type="range" id="title-bg-opacity" min="0" max="100" value="100">
                                        <span id="title-bg-opacity-value" class="opacity-value">100%</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="style-section">
                                <h4>Entries List</h4>
                                <div class="style-controls">
                                    <div class="color-picker-group">
                                        <label>Background Color:</label>
                                        <input type="color" id="entries-bg-color" value="#e3e1de">
                                        <input type="range" id="entries-bg-opacity" min="0" max="100" value="100">
                                        <span id="entries-bg-opacity-value" class="opacity-value">100%</span>
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Text Color:</label>
                                        <input type="color" id="entries-text-color" value="#362e2c">
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Callout Text Color:</label>
                                        <input type="color" id="callout-text-color" value="#362e2c">
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Entrant Tile Color:</label>
                                        <input type="color" id="entrant-bg-color" value="#ffffff">
                                        <input type="range" id="entrant-bg-opacity" min="0" max="100" value="100">
                                        <span id="entrant-bg-opacity-value" class="opacity-value">100%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Right Column -->
                        <div>
                            <div class="style-section">
                                <h4>Winner Display</h4>
                                <div class="style-controls">
                                    <div class="color-picker-group">
                                        <label>Background Color:</label>
                                        <input type="color" id="winner-bg-color" value="#fcd00b">
                                        <input type="range" id="winner-bg-opacity" min="0" max="100" value="100">
                                        <span id="winner-bg-opacity-value" class="opacity-value">100%</span>
                                    </div>
                                    <div class="color-picker-group">
                                        <label>Text Color:</label>
                                        <input type="color" id="winner-text-color" value="#362e2c">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="style-section">
                                <h4 style="color: var(--color-lime); border-bottom: 1px solid var(--color-gray-70); margin-bottom: 15px; padding-bottom: 5px;">Typography</h4>
                                
                                <div class="form-group">
                                    <label for="font-family">Font Family:</label>
                                    <select id="font-family" class="form-control">
                                        <option value="IBM Plex Sans, Montserrat, Arial, sans-serif">IBM Plex Sans</option>
                                        <option value="'Kode Mono', monospace">Kode Mono</option>
                                        <option value="Montserrat, Arial, sans-serif">Montserrat</option>
                                        <option value="Roboto, Arial, sans-serif">Roboto</option>
                                        <option value="Arial, sans-serif">Arial</option>
                                        <option value="'Helvetica Neue', Helvetica, Arial, sans-serif">Helvetica</option>
                                        <option value="'Open Sans', Arial, sans-serif">Open Sans</option>
                                        <option value="'Segoe UI', Tahoma, Geneva, sans-serif">Segoe UI</option>
                                        <option value="Georgia, serif">Georgia</option>
                                        <option value="'Comic Sans MS', cursive, sans-serif">Comic Sans MS</option>
                                        <option value="Impact, Charcoal, sans-serif">Impact</option>
                                        <option value="'Courier New', Courier, monospace">Courier New</option>
                                        <option value="custom">Custom Font...</option>
                                    </select>
                                </div>
                                
                                <div id="custom-font-section" class="form-group" style="display: none;">
                                    <label for="custom-font-name">Custom Font:</label>
                                    <div style="display: flex; gap: 10px; align-items: center;">
                                        <input type="text" id="custom-font-name" class="form-control" style="flex: 1; background-color: var(--admin-input-bg); border: 1px solid var(--admin-input-border); color: var(--admin-text-color); padding: 8px; border-radius: 4px;" 
                                               placeholder="Enter Google Font name (e.g. Poppins)">
                                        <button id="load-custom-font" style="background-color: var(--admin-button-bg, var(--color-gray-70)); border: 1px solid var(--admin-input-border); color: var(--admin-text-color); padding: 6px 10px; border-radius: 4px; cursor: pointer; transition: all 0.2s; font-size: 13px;">Apply</button>
                                    </div>
                                    <div class="font-hint" style="margin-top: 5px; font-size: 12px; opacity: 0.7;">
                                        Browse fonts at <a href="https://fonts.google.com/" target="_blank" style="color: var(--color-lime);">fonts.google.com</a>
                                    </div>
                                    <div id="custom-font-preview" style="margin-top: 10px; padding: 8px; border-radius: 4px; background-color: rgba(0,0,0,0.1); text-align: center; font-size: 16px; min-height: 36px; display: flex; align-items: center; justify-content: center;">
                                        Font Preview: The quick brown fox jumps over the lazy dog
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="title-size">Title Size:</label>
                                    <div class="range-group">
                                        <input type="range" id="title-size" min="16" max="48" value="32" class="form-control">
                                        <span id="title-size-value" class="range-value">32px</span>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="info-bar-size">Info Bar Size:</label>
                                    <div class="range-group">
                                        <input type="range" id="info-bar-size" min="12" max="24" value="18" class="form-control">
                                        <span id="info-bar-size-value" class="range-value">18px</span>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="callout-text-size">Callout Text Size:</label>
                                    <div class="range-group">
                                        <input type="range" id="callout-text-size" min="12" max="24" value="18" class="form-control">
                                        <span id="callout-text-size-value" class="range-value">18px</span>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="spinner-names-size">Spinning Names Size:</label>
                                    <div class="range-group">
                                        <input type="range" id="spinner-names-size" min="14" max="28" value="18" class="form-control">
                                        <span id="spinner-names-size-value" class="range-value">18px</span>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="winner-text-size">Winner Text Size:</label>
                                    <div class="range-group">
                                        <input type="range" id="winner-text-size" min="24" max="64" value="36" class="form-control">
                                        <span id="winner-text-size-value" class="range-value">36px</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="style-section">
                                <h4>Layout & Design</h4>
                                <div class="style-controls">
                                    <div class="color-picker-group">
                                        <label>Corner Rounding:</label>
                                        <input type="range" id="corner-radius" min="0" max="24" value="12">
                                        <span id="corner-radius-value" class="opacity-value">12px</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="style-actions">
                        <button id="save-style-settings-btn" class="primary">Save Style Settings</button>
                        <button id="preview-obs-btn">Preview in New Window</button>
                        <button id="reset-styles-btn" class="warning">Reset to Default</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
	
		const urlParams = new URLSearchParams(window.location.search);
        const isDisplayMode = urlParams.get('display') === 'true';
        const roomID = urlParams.get('session') || urlParams.get('s') || urlParams.get('id') || '';
        console.log("Session ID (roomID):", roomID);
        console.log("Display mode:", isDisplayMode ? "OBS Display" : "Admin Panel");
        if (isDisplayMode) {
            console.log("Applying OBS display mode");
            document.body.classList.add('obs-mode');
            const obsContainer = document.getElementById('obs-display-container');
            if (obsContainer) {
                obsContainer.style.cssText = '';
                obsContainer.style.display = 'flex';
                obsContainer.style.justifyContent = 'center';
                obsContainer.style.alignItems = 'center';
                obsContainer.style.width = '100%';
                obsContainer.style.height = '100vh';
                obsContainer.style.position = 'relative';
                obsContainer.style.visibility = 'visible';
                obsContainer.style.overflow = 'visible';
            } else {
                console.error("Could not find OBS display container!");
            }
            const adminPanel = document.querySelector('.giveaway-panel');
            if (adminPanel) {
                adminPanel.style.display = 'none';
            }
        } else {
            const obsContainer = document.getElementById('obs-display-container');
            if (obsContainer) {
                obsContainer.style.display = 'none !important';
                obsContainer.style.visibility = 'hidden !important';
                obsContainer.style.position = 'absolute !important';
                obsContainer.style.width = '0 !important';
                obsContainer.style.height = '0 !important';
                obsContainer.style.overflow = 'hidden !important';
            }
        }
        let giveawayState = {
            giveaways: [],
            settings: {
                winnerAnimation: 'confetti',
                messages: {
                    spinnerText: 'Picking a winner...',
                    winnerPrefix: 'Winner: '
                },
                styling: {
                    headerBgColor: '#fcd00b',
                    headerBgOpacity: 1,
                    headerTextColor: '#362e2c',
                    titleBgColor: '#ffffff',
                    titleBgOpacity: 1,
                    entriesBgColor: '#e3e1de',
                    entriesBgOpacity: 1,
                    entriesTextColor: '#362e2c',
                    calloutTextColor: '#362e2c',
                    entrantBgColor: '#ffffff',
                    entrantBgOpacity: 1,
                    winnerBgColor: '#fcd00b',
                    winnerBgOpacity: 1,
                    winnerTextColor: '#362e2c',
                    titleSize: 32,
                    entryTextSize: 18,
                    winnerTextSize: 36,
                    cornerRadius: 12,
                    fontFamily: 'IBM Plex Sans, Montserrat, Arial, sans-serif'
                }
            }
        };
        let reconnectionTimeout = null;
        let retryCount = 0;
        const MAX_RETRY_ATTEMPTS = 5;
        const RETRY_DELAY = 5000;
        let iframeConnectionEstablished = false;
        let iframe = null;
        let createGiveawayBtn;
        let pickWinnerBtn;
        let completeGiveawayBtn;
        let cancelGiveawayBtn;
        let clearCompletedBtn;
        let saveSettingsBtn;
        let giveawayTypeSelect;
        let keywordField;
        let tabs;
        let tabContents;
        let winnerDisplay;
        let spinner;
        let spinnerContainer;
		
		function updateUI() {
			console.log("updateUI called with giveawayState:", giveawayState);
			try {
				// Render all giveaways in admin view
				if (!isDisplayMode) {
					renderGiveaways();
				} else {
					// In display mode, update the OBS display
					const activeGiveaway = getActiveGiveaway();
					if (activeGiveaway) {
						updateOBSDisplay(activeGiveaway);
						
						// If a winner has been picked, show the winner display
						if (activeGiveaway.winnerPicked && activeGiveaway.winner) {
							const winnerName = typeof activeGiveaway.winner === 'object' 
								? activeGiveaway.winner.name 
								: activeGiveaway.winner;
							const platform = typeof activeGiveaway.winner === 'object'
								? activeGiveaway.winner.platform
								: activeGiveaway.winnerPlatform;
							
							const obsWinnerDisplay = document.getElementById('obs-winner-display');
							if (obsWinnerDisplay) {
								const styles = giveawayState.settings.styling;
								obsWinnerDisplay.style.backgroundColor = `rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity})`;
								obsWinnerDisplay.style.color = styles.winnerTextColor;
								obsWinnerDisplay.style.fontSize = `${styles.winnerTextSize}px`;
								obsWinnerDisplay.style.fontFamily = styles.fontFamily;
								obsWinnerDisplay.innerHTML = `
									<div class="winner-details" style="font-family: ${styles.fontFamily};">
										<div class="winner-name" style="font-family: ${styles.fontFamily};">${winnerName || 'Anonymous'}</div>
										<div class="winner-platform" style="font-family: ${styles.fontFamily};">${platform || ''}</div>
									</div>
								`;
								obsWinnerDisplay.style.display = 'flex';
								
								const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
								if (obsActiveGiveaway) {
									obsActiveGiveaway.style.display = 'none';
								}
							}
						}
					} else {
						console.log("No active giveaway found for OBS display");
					}
				}
			} catch (error) {
				console.error("Error in updateUI:", error);
			}
		}

        function generateId() {
            return Math.random().toString(36).substring(2, 15);
        }
        function createGiveawayObject() {
            return {
                id: generateId(),
                title: document.getElementById('giveaway-title').value,
                type: document.getElementById('giveaway-type').value,
                keyword: document.getElementById('giveaway-keyword').value,
                prize: document.getElementById('giveaway-prize').value,
                state: 'upcoming',
                entrants: {},
                winnerPicked: false,
                winner: null
            };
        }
        function getActiveGiveaway() {
            return giveawayState.giveaways.find(g => g.state === 'active');
        }
        function getUpcomingGiveaways() {
            return giveawayState.giveaways.filter(g => g.state === 'upcoming');
        }
        function getCompletedGiveaways() {
            return giveawayState.giveaways.filter(g => g.state === 'complete');
        }
        function sendTargetP2P(data) {
			if (iframe) {
				iframe.contentWindow.postMessage({ sendData: { overlayNinja: data }, type: "pcs"}, "*");
			}
		}
        async function saveGiveawayState() {
            try {
                giveawayState.timestamp = Date.now();
                console.log("Saving giveaway state:", giveawayState);
                if (typeof addToDB === 'function') {
                    try {
                        console.log("Using Social Stream DB API");
                        await addToDB('giveaway_state', giveawayState);
                    } catch (dbError) {
                        console.error('Error saving to Social Stream DB:', dbError);
                    }
                }
                if (!isDisplayMode) {
                    console.log("Sending giveaway update via P2P to the OBS overlay");
                    sendTargetP2P({
                        action: "update_entries",
                        giveawayData: giveawayState
                    });
                }
                updateUI();
            } catch (error) {
                console.error("Error saving giveaway state:", error);
            }
        }
        async function loadGiveawayState() {
            try {
                if (typeof getFromDB === 'function') {
                    getFromDB('giveaway_state')
                        .then((savedState) => {
                            if (savedState && isValidGiveawayState(savedState)) {
                                Object.assign(giveawayState, savedState);
                                console.log('Giveaway state loaded from database');
                                renderGiveaways();
                            } else {
                                console.log('No valid giveaway state found in database');
                                renderGiveaways();
                            }
                        })
                        .catch((error) => {
                            console.error('Failed to load from database:', error);
                            renderGiveaways();
                        });
                } else {
                    console.warn('Social Stream database API not available');
                    renderGiveaways();
                }
            } catch (error) {
                console.error('Error loading giveaway state:', error);
                renderGiveaways();
            }
        }
        function initializeDefaultState() {
            console.log('Initializing default giveaway state');
            renderGiveaways();
        }
        function integrateWithGlobalSettings() {
            try {
                if (typeof getSettings === 'function') {
                    getSettings('giveaway', (settings) => {
                        if (settings) {
                            if (settings.winnerAnimation) {
                                giveawayState.settings.winnerAnimation = settings.winnerAnimation;
                            }
                            if (settings.styling) {
                                giveawayState.settings.styling = {
                                    ...giveawayState.settings.styling,
                                    ...settings.styling
                                };
                            }
                            applySettings();
                        }
                    });
                }
            } catch (error) {
                console.error('Error integrating with global settings:', error);
            }
        }
        function sanitizeInput(input) {
            if (!input) return '';
            if (typeof filterXSS === 'function') {
                return filterXSS(input);
            } else if (typeof escapeHtml === 'function') {
                return escapeHtml(input);
            } else {
                return String(input)
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }
        }
        function renderEntrants(container, entrants, limit = 20) {
            if (!container) return;
            container.innerHTML = '';
            const entrantKeys = Object.keys(entrants);
            if (entrantKeys.length === 0) return;
            const fragment = document.createDocumentFragment();
            const header = document.createElement('h4');
            header.textContent = 'Entrants:';
            fragment.appendChild(header);
            const entrantGrid = document.createElement('div');
            entrantGrid.className = 'entrants-grid';
            const displayEntrants = entrantKeys.length <= limit
                ? Object.entries(entrants)
                : Object.entries(entrants).slice(-limit);
            displayEntrants.forEach(([id, entrant]) => {
                const entrantItem = document.createElement('div');
                entrantItem.className = 'entrant-item';
                const nameSpan = document.createElement('span');
                nameSpan.textContent = sanitizeInput(entrant.name || 'Anonymous');
                if (entrant.platform) {
                    nameSpan.title = sanitizeInput(entrant.platform);
                }
                entrantItem.appendChild(nameSpan);
                entrantGrid.appendChild(entrantItem);
            });
            fragment.appendChild(entrantGrid);
            container.appendChild(fragment);
        }
        function setupConnection() {
            try {
                if (reconnectionTimeout) {
                    clearTimeout(reconnectionTimeout);
                    reconnectionTimeout = null;
                }
                retryCount = 0;
                if (iframe && iframe.contentWindow) {
                    console.log('Connection already exists, reusing');
                    return;
                }
                if (document.getElementById('frame1')) {
                    document.getElementById('frame1').remove();
                }
                iframe = document.createElement("iframe");
                if (!roomID) {
                    console.warn('No session ID found. Connection may not work properly.');
                }
                console.log('Setting up iframe connection with session ID:', roomID);
				if (isDisplayMode){
					iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&notmobile&password=false&dataonly&vd=0&ad=0&novideo&noaudio&autostart&cleanoutput&view=" +
						roomID + "Giveway&label=giveaway&room=" + roomID;
				} else {
					iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&notmobile&password=false&dataonly&vd=0&ad=0&novideo&noaudio&autostart&cleanoutput&view=" +
						roomID + "&push="+roomID+"Giveway&label=dock&room=" + roomID;
				}
                iframe.style.width = "0px";
                iframe.style.height = "0px";
                iframe.style.position = "fixed";
                iframe.style.left = "-100px";
                iframe.style.top = "-100px";
                iframe.id = "frame1";
                iframe.onerror = function() {
                    console.error('Giveaway iframe connection error. Retrying...');
                    handleConnectionError();
                };
                document.body.appendChild(iframe);
                setTimeout(() => {
                    if (!iframeConnectionEstablished) {
                        console.warn('No data received within timeout period. Reconnecting...');
                        handleConnectionError();
                    }
                }, 10000);
                console.log('Giveaway iframe connection setup completed with session:', roomID);
            } catch (error) {
                console.error('Error setting up connection:', error);
                handleConnectionError();
            }
        }
        function handleConnectionError() {
            try {
                retryCount++;
                if (retryCount <= MAX_RETRY_ATTEMPTS) {
                    console.log(`Connection attempt ${retryCount}/${MAX_RETRY_ATTEMPTS} failed. Retrying in ${RETRY_DELAY / 1000} seconds...`);
                    const backoffDelay = RETRY_DELAY * Math.pow(1.5, retryCount - 1);
                    reconnectionTimeout = setTimeout(setupConnection, backoffDelay);
                    if (!isDisplayMode) {
                        const errorMessage = `Connection error. Retry ${retryCount}/${MAX_RETRY_ATTEMPTS}...`;
                        showNotification(errorMessage, 'error');
                    }
                } else {
                    console.error('Maximum connection attempts reached. Please check your connection and refresh the page.');
                    if (!isDisplayMode) {
                        showNotification('Failed to establish connection. Please check your connection and refresh the page.', 'error', true);
                    }
                }
            } catch (error) {
                console.error('Error in handleConnectionError:', error);
            }
        }
        function processData(data) {
			try {
				console.log("processData received:", data);
				let messageData = data;
				
				// Handle the update_entries action from the admin page
				if (data && data.action === "update_entries" && data.giveawayData) {
					console.log("Received giveaway update data:", data.giveawayData);
					giveawayState = data.giveawayData;
					updateUI();
					return;
				}
				
				// Rest of the existing processData function for chat messages
				if (data && data.contents) {
					messageData = data.contents;
					console.log("Processing contents-wrapped message:", messageData);
				}
				
				const activeGiveaway = getActiveGiveaway();
				if (!activeGiveaway) {
					console.log("No active giveaway found, ignoring message");
					return;
				}
				
				const message = messageData.message || messageData.chatmessage || '';
				const userId = messageData.id || messageData.user_id || generateId();
				const userName = messageData.user || messageData.name || messageData.chatname || 'Anonymous';
				const userImg = messageData.img || messageData.chatimg || '';
				const platform = messageData.type || messageData.platform || 'unknown';
				
				console.log(`Processing entry - Message: "${message}", User: ${userName}, Platform: ${platform}`);
				
				if (!message && !((messageData.type && ['messages', 'youtube', 'twitch', 'instagram', 'facebook', 'tiktok'].includes(messageData.type)) || messageData.chatmessage)) {
					console.log("Unsupported message format or empty message:", messageData);
					return;
				}
				
				if (activeGiveaway.type === 'keyword' && !activeGiveaway.winnerPicked) {
					if (message.toLowerCase().includes(activeGiveaway.keyword.toLowerCase())) {
						if (!activeGiveaway.entrants[userId]) {
							activeGiveaway.entrants[userId] = {
								name: sanitizeInput(userName),
								img: userImg,
								platform: platform
							};
							console.log(`Added keyword entry - User: ${userName}, Platform: ${platform}`);
							saveGiveawayState();
							renderActiveGiveaway();
						}
					}
				} else if (activeGiveaway.type === 'all' && !activeGiveaway.winnerPicked) {
					if (!activeGiveaway.entrants[userId]) {
						activeGiveaway.entrants[userId] = {
							name: sanitizeInput(userName),
							img: userImg,
							platform: platform
						};
						console.log(`Added 'all' type entry - User: ${userName}, Platform: ${platform}`);
						saveGiveawayState();
						renderActiveGiveaway();
					}
				}
			} catch (error) {
				console.error('Error processing data:', error);
			}
		}
        function renderActiveGiveaway() {
            try {
                const activeGiveaway = getActiveGiveaway();
                const activeContainer = document.getElementById('active-giveaway');
                const activeControls = document.getElementById('active-controls');
                if (activeGiveaway) {
                    const entrantsCount = Object.keys(activeGiveaway.entrants).length;
                    if (!isDisplayMode) {
                        const fragment = document.createDocumentFragment();
                        const title = document.createElement('h3');
                        title.textContent = sanitizeInput(activeGiveaway.title);
                        fragment.appendChild(title);
                        const detailsDiv = document.createElement('div');
                        detailsDiv.className = 'giveaway-details';
                        const detailsList = document.createElement('ul');
                        const prizeItem = document.createElement('li');
                        const prizeLabel = document.createElement('strong');
                        prizeLabel.textContent = 'Prize: ';
                        prizeItem.appendChild(prizeLabel);
                        prizeItem.appendChild(document.createTextNode(sanitizeInput(activeGiveaway.prize)));
                        detailsList.appendChild(prizeItem);
                        if (activeGiveaway.type === 'keyword') {
                            const keywordItem = document.createElement('li');
                            const keywordLabel = document.createElement('strong');
                            keywordLabel.textContent = 'Keyword: ';
                            keywordItem.appendChild(keywordLabel);
                            keywordItem.appendChild(document.createTextNode(sanitizeInput(activeGiveaway.keyword)));
                            detailsList.appendChild(keywordItem);
                        }
                        const entriesItem = document.createElement('li');
                        const entriesLabel = document.createElement('strong');
                        entriesLabel.textContent = 'Entries: ';
                        entriesItem.appendChild(entriesLabel);
                        entriesItem.appendChild(document.createTextNode(entrantsCount));
                        detailsList.appendChild(entriesItem);
                        detailsDiv.appendChild(detailsList);
                        fragment.appendChild(detailsDiv);
                        const entrantsListDiv = document.createElement('div');
                        entrantsListDiv.id = 'entrants-list';
                        fragment.appendChild(entrantsListDiv);
                        activeContainer.innerHTML = '';
                        activeContainer.appendChild(fragment);
                        const entrantsList = document.getElementById('entrants-list');
                        renderEntrants(entrantsList, activeGiveaway.entrants, 20);
                        activeControls.style.display = 'block';
                    } else {
                        updateOBSDisplay(activeGiveaway);
                    }
                } else if (activeContainer) {
                    activeContainer.innerHTML = '<p>No active giveaway</p>';
                    if (activeControls) {
                        activeControls.style.display = 'none';
                    }
                }
            } catch (error) {
                console.error('Error rendering active giveaway:', error);
            }
        }
        function renderUpcomingGiveaways() {
            const upcomingGiveaways = getUpcomingGiveaways();
            const container = document.getElementById('upcoming-giveaways');
            if (upcomingGiveaways.length > 0) {
                container.innerHTML = '';
                upcomingGiveaways.forEach(giveaway => {
                    const giveawayElement = document.createElement('div');
                    giveawayElement.className = 'giveaway-card';
                    giveawayElement.innerHTML = `
                        <h3>${giveaway.title}</h3>
                        <div class="giveaway-details">
                            <ul>
                                <li><strong>Prize:</strong> ${giveaway.prize}</li>
                                ${giveaway.type === 'keyword' ? `<li><strong>Keyword:</strong> ${giveaway.keyword}</li>` : ''}
                            </ul>
                        </div>
                        <button class="activate-btn" data-id="${giveaway.id}">Activate</button>
                        <button class="remove-btn warning" data-id="${giveaway.id}">Remove</button>
                    `;
                    container.appendChild(giveawayElement);
                });
                document.querySelectorAll('.activate-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        activateGiveaway(this.dataset.id);
                    });
                });
                document.querySelectorAll('.remove-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        removeGiveaway(this.dataset.id);
                    });
                });
            } else {
                container.innerHTML = '<p>No upcoming giveaways</p>';
            }
        }
        function renderCompletedGiveaways() {
            const completedContainer = document.getElementById('completed-giveaways');
            const completedGiveaways = getCompletedGiveaways();
            if (completedGiveaways.length === 0) {
                completedContainer.innerHTML = '<p>No completed giveaways</p>';
                return;
            }
            let html = '';
            completedGiveaways.forEach((giveaway, index) => {
                const entrantsCount = Object.keys(giveaway.entrants).length;
                html += `
                    <div class="giveaway-card">
                        <h3>${giveaway.title}</h3>
                        <div class="giveaway-details">
                            <ul>
                                <li><strong>Prize:</strong> ${giveaway.prize}</li>
                                ${giveaway.type === 'keyword' ? `<li><strong>Keyword:</strong> ${giveaway.keyword}</li>` : ''}
                                <li><strong>Entries:</strong> ${entrantsCount}</li>
                                <li><strong>Winner:</strong> ${giveaway.winner} ${giveaway.winnerPlatform ? `(${giveaway.winnerPlatform})` : ''}</li>
                            </ul>
                        </div>
                    </div>
                `;
            });
            completedContainer.innerHTML = html;
        }
        function renderGiveaways() {
            renderActiveGiveaway();
            renderUpcomingGiveaways();
            renderCompletedGiveaways();
        }
        function createGiveaway() {
            const giveaway = createGiveawayObject();
            giveawayState.giveaways.push(giveaway);
            renderGiveaways();
            saveGiveawayState();
        }
        function activateGiveaway(giveawayId) {
            if (getActiveGiveaway()) {
                alert('There is already an active giveaway. Please complete it first.');
                return;
            }
            const giveawayIndex = giveawayState.giveaways.findIndex(g => g.id === giveawayId);
            if (giveawayIndex !== -1) {
                giveawayState.giveaways[giveawayIndex].state = 'active';
                renderGiveaways();
                saveGiveawayState();
                document.getElementById('active-giveaway-container').scrollIntoView({ behavior: 'smooth' });
            }
        }
        function removeGiveaway(giveawayId) {
            const giveawayIndex = giveawayState.giveaways.findIndex(g => g.id === giveawayId);
            if (giveawayIndex !== -1) {
                giveawayState.giveaways.splice(giveawayIndex, 1);
                renderGiveaways();
                saveGiveawayState();
            }
        }
        function showWinner(winnerName, platform) {
            const activeGiveaway = getActiveGiveaway();
            if (!activeGiveaway) return;
            activeGiveaway.winner = {
                name: winnerName,
                platform: platform
            };
            activeGiveaway.winnerPicked = true;
            saveGiveawayState();
            if (!isDisplayMode) {
                const winnerDisplay = document.getElementById('winner-display');
                winnerDisplay.textContent = `Winner: ${winnerName} ${platform ? `(${platform})` : ''}`;
                winnerDisplay.style.display = 'block';
                spinnerContainer.style.display = 'none';
            } else {
                setTimeout(() => {
                    const obsWinnerDisplay = document.getElementById('obs-winner-display');
                    const styles = giveawayState.settings.styling;
                    obsWinnerDisplay.style.backgroundColor = `rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity})`;
                    obsWinnerDisplay.style.color = styles.winnerTextColor;
                    obsWinnerDisplay.style.fontSize = `${styles.winnerTextSize}px`;
                    obsWinnerDisplay.style.maxWidth = '800px';
                    obsWinnerDisplay.style.margin = '0 auto';
                    obsWinnerDisplay.style.setProperty('font-family', styles.fontFamily, 'important');
                    obsWinnerDisplay.innerHTML = `
                        <div class="giveaway-main-bg" style="background-color: rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity}); border-radius: ${Math.round(styles.cornerRadius * 0.8)}px; margin-bottom: 6px;">
                            <div class="giveaway-main" style="padding: 10px; font-family: ${styles.fontFamily}; font-size: ${styles.winnerTextSize}px; color: ${styles.winnerTextColor}; text-align: center; min-height: 1.5em; display: flex; align-items: center; justify-content: center;">
                                ${giveawayState.settings.messages.winnerPrefix}${winnerName} ${platform ? `(${platform})` : ''}
                            </div>
                        </div>
                        <div class="giveaway-bar" style="width: 100%; justify-content: center; gap: 12px; margin-bottom: 6px;">
                            <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">
                                Winner Selected!
                            </span>
                        </div>
                        <div class="giveaway-callout" style="margin-top: 3px;">
                            <div class="giveaway-callout-text" style="font-size: ${styles.entryTextSize}px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">Thanks for participating!</div>
                        </div>
                    `;
                    obsWinnerDisplay.style.display = 'flex';
                    obsWinnerDisplay.style.flexDirection = 'column';
                    obsWinnerDisplay.style.padding = '16px';
                    obsWinnerDisplay.style.width = '500px';
                    obsWinnerDisplay.style.minWidth = '500px';
                    obsWinnerDisplay.style.maxWidth = '800px';
                    obsWinnerDisplay.style.boxSizing = 'border-box';
                    obsWinnerDisplay.style.backgroundColor = `rgba(${hexToRgb(styles.headerBgColor)}, ${styles.headerBgOpacity})`;
                    obsWinnerDisplay.style.borderRadius = `${styles.cornerRadius}px`;
                    const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                    obsActiveGiveaway.style.display = 'none';
                    const obsEntrantsDisplay = document.getElementById('obs-entrants-display');
                    obsEntrantsDisplay.style.display = 'block';
                    updateEntrantsDisplay(activeGiveaway);
                    if (giveawayState.settings.winnerAnimation === 'confetti') {
                        createConfetti();
                    }
                }, 1500);
            }
            setTimeout(() => {
                renderActiveGiveaway();
            }, 2000);
        }
        function pickWinner() {
            try {
                const activeGiveaway = getActiveGiveaway();
                if (!activeGiveaway) return;
                const entrants = Object.entries(activeGiveaway.entrants);
                if (entrants.length < 1) {
                    alert('Need at least 1 entrant to pick a winner');
                    return;
                }
                if (activeGiveaway.winnerPicked) {
                    alert('A winner has already been picked for this giveaway');
                    return;
                }
                pickWinnerBtn.disabled = true;
                spinnerContainer.style.display = 'flex';
                spinner.innerHTML = '';
                const entrantIds = Object.keys(activeGiveaway.entrants);
                if (isDisplayMode) {
                    const obsSpinnerContainer = document.getElementById('obs-spinner-container');
                    if (obsSpinnerContainer) {
                        obsSpinnerContainer.style.display = 'flex';
                    }
                    const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                    if (obsActiveGiveaway) {
                        obsActiveGiveaway.style.display = 'none';
                    }
                }
                let spinCount = 0;
                let currentIndex = 0;
                const spinInterval = setInterval(() => {
                    const entrantId = entrantIds[currentIndex];
                    const entrant = activeGiveaway.entrants[entrantId];
                    if (!entrant) {
                        currentIndex = (currentIndex + 1) % entrantIds.length;
                        return;
                    }
                    const styles = giveawayState.settings.styling;
                    const entrantHTML = `
                        <div class="spinner-entrant">
                            <div class="entrant-avatar">
                                ${entrant.img ? `<img src="${entrant.img}" alt="${entrant.name}">` : '👤'}
                            </div>
                            <div class="entrant-name" style="font-size: ${styles.spinnerNamesSize}px;">${entrant.name || 'Anonymous'}</div>
                            <div class="entrant-platform" style="font-size: ${Math.max(10, styles.spinnerNamesSize - 4)}px;">${entrant.platform || ''}</div>
                        </div>
                    `;
                    spinner.innerHTML = entrantHTML;
                    if (isDisplayMode) {
                        const obsSpinner = document.getElementById('obs-spinner');
                        if (obsSpinner) {
                            obsSpinner.innerHTML = entrantHTML;
                        }
                    }
                    currentIndex = (currentIndex + 1) % entrantIds.length;
                    if (spinCount < 10) spinCount++;
                    if (spinCount > 20) {
                        clearInterval(spinInterval);
                        selectFinalWinner(activeGiveaway, entrantIds);
                    }
                }, 100);
            } catch (error) {
                console.error('Error picking winner:', error);
                alert('Error picking winner: ' + error.message);
                pickWinnerBtn.disabled = false;
                spinnerContainer.style.display = 'none';
                if (isDisplayMode) {
                    const obsSpinnerContainer = document.getElementById('obs-spinner-container');
                    if (obsSpinnerContainer) {
                        obsSpinnerContainer.style.display = 'none';
                    }
                    const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                    if (obsActiveGiveaway) {
                        obsActiveGiveaway.style.display = 'block';
                    }
                }
            }
        }
        function selectFinalWinner(activeGiveaway, entrantIds) {
            try {
                if (!activeGiveaway || entrantIds.length === 0) {
                    console.error('No active giveaway or no entrants');
                    pickWinnerBtn.disabled = false;
                    spinnerContainer.style.display = 'none';
                    return;
                }
                const randomIndex = Math.floor(Math.random() * entrantIds.length);
                const winnerId = entrantIds[randomIndex];
                const winner = activeGiveaway.entrants[winnerId];
                if (!winner) {
                    console.error('Selected winner not found in entrants');
                    pickWinnerBtn.disabled = false;
                    spinnerContainer.style.display = 'none';
                    return;
                }
                activeGiveaway.winnerPicked = true;
                activeGiveaway.winner = winner;
                activeGiveaway.winnerId = winnerId;
                saveGiveawayState();
                setTimeout(() => {
                    spinnerContainer.style.display = 'none';
                    winnerDisplay.innerHTML = `
                        <div class="winner-details">
                            <div class="winner-avatar">
                                ${winner.img ? `<img src="${winner.img}" alt="${winner.name}">` : '👑'}
                            </div>
                            <div class="winner-name">${winner.name || 'Anonymous'}</div>
                            <div class="winner-platform">${winner.platform || ''}</div>
                        </div>
                    `;
                    winnerDisplay.style.display = 'flex';
                    completeGiveawayBtn.disabled = false;
                    if (giveawayState.settings.winnerAnimation === 'confetti') {
                        createConfetti(40);
                    }
                    if (isDisplayMode) {
                        const styles = giveawayState.settings.styling;
                        const obsWinnerDisplay = document.getElementById('obs-winner-display');
                        if (obsWinnerDisplay) {
                            obsWinnerDisplay.style.backgroundColor = `rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity})`;
                            obsWinnerDisplay.style.color = styles.winnerTextColor;
                            obsWinnerDisplay.style.fontSize = `${styles.winnerTextSize}px`;
                            obsWinnerDisplay.style.fontFamily = styles.fontFamily;
                            obsWinnerDisplay.style.borderRadius = `${styles.cornerRadius}px`;
                            obsWinnerDisplay.style.maxWidth = '800px';
                            obsWinnerDisplay.style.margin = '0 auto';
                            obsWinnerDisplay.style.width = 'auto';
                            obsWinnerDisplay.innerHTML = `
                                <div class="winner-details" style="font-family: ${styles.fontFamily};">
                                    <div class="winner-avatar">
                                        ${winner.img ? `<img src="${winner.img}" alt="${winner.name}">` : '👑'}
                                    </div>
                                    <div class="winner-name" style="font-family: ${styles.fontFamily};">${winner.name || 'Anonymous'}</div>
                                    <div class="winner-platform" style="font-family: ${styles.fontFamily};">${winner.platform || ''}</div>
                                </div>
                            `;
                            obsWinnerDisplay.style.display = 'flex';
                        }
                        const obsSpinnerContainer = document.getElementById('obs-spinner-container');
                        if (obsSpinnerContainer) {
                            obsSpinnerContainer.style.display = 'none';
                        }
                        if (giveawayState.settings.winnerAnimation === 'confetti') {
                            createConfetti(60);
                        }
                    }
                    renderActiveGiveaway();
                }, 1000);
            } catch (error) {
                console.error('Error selecting final winner:', error);
                alert('Error selecting winner: ' + error.message);
                pickWinnerBtn.disabled = false;
                spinnerContainer.style.display = 'none';
                if (isDisplayMode) {
                    const obsSpinnerContainer = document.getElementById('obs-spinner-container');
                    if (obsSpinnerContainer) {
                        obsSpinnerContainer.style.display = 'none';
                    }
                    const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                    if (obsActiveGiveaway) {
                        obsActiveGiveaway.style.display = 'block';
                    }
                }
            }
        }
        function prepareWheel(entrants) {
            const entrantsList = Object.keys(entrants);
            const totalEntrants = entrantsList.length;
            const segmentAngle = 360 / totalEntrants;
            spinner.innerHTML = '';
            if (isDisplayMode) {
                document.getElementById('obs-spinner').innerHTML = '';
            }
            entrantsList.forEach((entrant, index) => {
                const segment = document.createElement('div');
                segment.style.position = 'absolute';
                segment.style.width = '50%';
                segment.style.height = '100%';
                segment.style.left = '50%';
                segment.style.top = '0';
                segment.style.transformOrigin = 'left center';
                segment.style.transform = `rotate(${index * segmentAngle}deg)`;
                const inner = document.createElement('div');
                inner.style.position = 'absolute';
                inner.style.width = '100%';
                inner.style.height = '100%';
                inner.style.clipPath = `polygon(0 0, 100% ${50 - 50 * Math.tan(Math.PI / totalEntrants)}%, 100% ${50 + 50 * Math.tan(Math.PI / totalEntrants)}%, 0 100%)`;
                inner.style.backgroundColor = `hsl(${index * 360 / totalEntrants}, 70%, 60%)`;
                const nameDiv = document.createElement('div');
                nameDiv.style.position = 'absolute';
                nameDiv.style.left = '10px';
                nameDiv.style.top = '50%';
                nameDiv.style.transform = 'translateY(-50%) rotate(90deg)';
                nameDiv.style.color = 'white';
                nameDiv.style.textShadow = '1px 1px 2px black';
                nameDiv.style.fontWeight = 'bold';
                nameDiv.textContent = entrants[entrant]?.name || entrant;
                inner.appendChild(nameDiv);
                segment.appendChild(inner);
                spinner.appendChild(segment);
                if (isDisplayMode) {
                    const obsSegment = segment.cloneNode(true);
                    document.getElementById('obs-spinner').appendChild(obsSegment);
                }
            });
            const centerPoint = document.createElement('div');
            centerPoint.style.position = 'absolute';
            centerPoint.style.width = '20px';
            centerPoint.style.height = '20px';
            centerPoint.style.borderRadius = '50%';
            centerPoint.style.backgroundColor = '#333';
            centerPoint.style.top = '50%';
            centerPoint.style.left = '50%';
            centerPoint.style.transform = 'translate(-50%, -50%)';
            centerPoint.style.zIndex = '100';
            spinner.appendChild(centerPoint);
            const pointer = document.createElement('div');
            pointer.style.position = 'absolute';
            pointer.style.width = '20px';
            pointer.style.height = '40px';
            pointer.style.backgroundColor = 'red';
            pointer.style.top = '50%';
            pointer.style.right = '-10px';
            pointer.style.transform = 'translateY(-50%)';
            pointer.style.clipPath = 'polygon(0 50%, 100% 0, 100% 100%)';
            pointer.style.zIndex = '100';
            spinnerContainer.appendChild(pointer);
            if (isDisplayMode) {
                const obsCenterPoint = centerPoint.cloneNode(true);
                document.getElementById('obs-spinner').appendChild(obsCenterPoint);
                const obsPointer = pointer.cloneNode(true);
                document.getElementById('obs-spinner-container').appendChild(obsPointer);
            }
        }
        function createConfetti() {
            const confettiCount = 100;
            const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590'];
            for (let i = 0; i < confettiCount; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = '0';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.opacity = '1';
                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
                const size = Math.random() * 10 + 5;
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                const shapes = ['circle', 'square', 'triangle'];
                const shape = shapes[Math.floor(Math.random() * shapes.length)];
                if (shape === 'circle') {
                    confetti.style.borderRadius = '50%';
                } else if (shape === 'triangle') {
                    confetti.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
                }
                document.body.appendChild(confetti);
                const animation = confetti.animate(
                    [
                        { transform: `translate(0, 0) rotate(0)`, opacity: 1 },
                        { transform: `translate(${Math.random() * 100 - 50}px, ${Math.random() * 500 + 200}px) rotate(${Math.random() * 360}deg)`, top: '100vh', opacity: 0 }
                    ],
                    {
                        duration: Math.random() * 3000 + 2000,
                        easing: 'cubic-bezier(0.1, 0.4, 0.3, 1)'
                    }
                );
                animation.onfinish = () => confetti.remove();
            }
        }
        function completeGiveaway() {
            const activeGiveaway = getActiveGiveaway();
            if (!activeGiveaway) return;
            if (!activeGiveaway.winnerPicked && !confirm("No winner has been picked yet. Are you sure you want to complete this giveaway?")) {
                return;
            }
            activeGiveaway.state = 'complete';
            activeGiveaway.completedDate = new Date().toISOString();
            if (activeGiveaway.winner && typeof activeGiveaway.winner === 'object') {
                activeGiveaway.winnerName = activeGiveaway.winner.name || 'Anonymous';
                activeGiveaway.winnerPlatform = activeGiveaway.winner.platform || '';
            }
            saveGiveawayState();
            renderGiveaways();
            spinnerContainer.style.display = 'none';
            winnerDisplay.style.display = 'none';
            if (pickWinnerBtn) {
                pickWinnerBtn.disabled = false;
            }
            if (isDisplayMode) {
                const obsElements = [
                    document.getElementById('obs-spinner-container'),
                    document.getElementById('obs-winner-display'),
                    document.getElementById('obs-active-giveaway')
                ];
                obsElements.forEach(element => {
                    if (element) element.style.display = 'none';
                });
                const obsWinnerDisplay = document.getElementById('obs-winner-display');
                if (obsWinnerDisplay) {
                    const styles = giveawayState.settings.styling;
                    obsWinnerDisplay.style.backgroundColor = `rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity})`;
                    obsWinnerDisplay.style.color = styles.winnerTextColor;
                    obsWinnerDisplay.style.fontFamily = styles.fontFamily;
                    const winnerName = (activeGiveaway.winner && typeof activeGiveaway.winner === 'object')
                        ? activeGiveaway.winner.name
                        : activeGiveaway.winner;
                    obsWinnerDisplay.innerHTML = `<div style="font-family: ${styles.fontFamily};">Giveaway Complete!</div>`;
                    obsWinnerDisplay.style.display = 'flex';
                    setTimeout(() => {
                        if (obsWinnerDisplay) obsWinnerDisplay.style.display = 'none';
                    }, 5000);
                }
            }
            showNotification('Giveaway completed successfully!', 'success');
        }
        function cancelGiveaway() {
            const activeGiveaway = getActiveGiveaway();
            if (!activeGiveaway) return;
            if (confirm('Are you sure you want to cancel this giveaway?')) {
                removeGiveaway(activeGiveaway.id);
                spinnerContainer.style.display = 'none';
                winnerDisplay.style.display = 'none';
                if (isDisplayMode) {
                    document.getElementById('obs-spinner-container').style.display = 'none';
                    document.getElementById('obs-winner-display').style.display = 'none';
                }
                showNotification('Giveaway cancelled', 'info');
            }
        }
        function clearCompletedGiveaways() {
            if (confirm('Are you sure you want to clear all completed giveaways?')) {
                giveawayState.giveaways = giveawayState.giveaways.filter(g => g.state !== 'complete');
                renderGiveaways();
                saveGiveawayState();
            }
        }
        function saveSettings() {
            giveawayState.settings.winnerAnimation = document.getElementById('winner-animation').value;
            const spinnerText = document.getElementById('spinner-text').value;
            const winnerPrefix = document.getElementById('winner-prefix').value;
            if (spinnerText) {
                giveawayState.settings.messages.spinnerText = spinnerText;
            }
            if (winnerPrefix) {
                giveawayState.settings.messages.winnerPrefix = winnerPrefix;
            }
            applySettings();
            saveGiveawayState();
            alert('Settings saved!');
        }
        function applySettings() {
            loadMessageSettingsToUI();
        }
        function loadMessageSettingsToUI() {
            const messages = giveawayState.settings.messages;
            const spinnerTextInput = document.getElementById('spinner-text');
            const winnerPrefixInput = document.getElementById('winner-prefix');
            if (spinnerTextInput && messages.spinnerText) {
                spinnerTextInput.value = messages.spinnerText;
                spinnerTextInput.placeholder = messages.spinnerText;
            }
            if (winnerPrefixInput && messages.winnerPrefix) {
                winnerPrefixInput.value = messages.winnerPrefix;
                winnerPrefixInput.placeholder = messages.winnerPrefix;
            }
        }
        function saveStyleSettings() {
            updateCurrentStyles();
            saveGiveawayState();
            if (isDisplayMode) {
                renderActiveGiveaway();
            }
            alert('Display style settings saved!');
        }
        function resetStyleSettings() {
            if (confirm('Are you sure you want to reset all display styling to default?')) {
                const defaultStyles = {
                    headerBgColor: '#fcd00b',
                    headerBgOpacity: 1,
                    headerTextColor: '#362e2c',
                    titleBgColor: '#ffffff',
                    titleBgOpacity: 1,
                    entriesBgColor: '#e3e1de',
                    entriesBgOpacity: 1,
                    entriesTextColor: '#362e2c',
                    calloutTextColor: '#362e2c',
                    entrantBgColor: '#ffffff',
                    entrantBgOpacity: 1,
                    winnerBgColor: '#fcd00b',
                    winnerBgOpacity: 1,
                    winnerTextColor: '#362e2c',
                    titleSize: 32,
                    infoBarSize: 18,
                    calloutTextSize: 18,
                    spinnerNamesSize: 18,
                    entryTextSize: 18,
                    winnerTextSize: 36,
                    cornerRadius: 12,
                    fontFamily: 'IBM Plex Sans, Montserrat, Arial, sans-serif'
                };
                giveawayState.settings.styling = defaultStyles;
                loadStyleSettingsToUI();
                saveGiveawayState();
                alert('Display styling has been reset to default.');
            }
        }
        function loadStyleSettingsToUI() {
            const styles = giveawayState.settings.styling;
            document.getElementById('header-bg-color').value = styles.headerBgColor;
            document.getElementById('header-bg-opacity').value = Math.round(styles.headerBgOpacity * 100);
            document.getElementById('header-bg-opacity-value').textContent = `${Math.round(styles.headerBgOpacity * 100)}%`;
            document.getElementById('header-text-color').value = styles.headerTextColor;
            document.getElementById('entries-bg-color').value = styles.entriesBgColor;
            document.getElementById('entries-bg-opacity').value = Math.round(styles.entriesBgOpacity * 100);
            document.getElementById('entries-bg-opacity-value').textContent = `${Math.round(styles.entriesBgOpacity * 100)}%`;
            document.getElementById('entries-text-color').value = styles.entriesTextColor;
            document.getElementById('entrant-bg-color').value = styles.entrantBgColor;
            document.getElementById('entrant-bg-opacity').value = Math.round(styles.entrantBgOpacity * 100);
            document.getElementById('entrant-bg-opacity-value').textContent = `${Math.round(styles.entrantBgOpacity * 100)}%`;
            document.getElementById('winner-bg-color').value = styles.winnerBgColor;
            document.getElementById('winner-bg-opacity').value = Math.round(styles.winnerBgOpacity * 100);
            document.getElementById('winner-bg-opacity-value').textContent = `${Math.round(styles.winnerBgOpacity * 100)}%`;
            document.getElementById('winner-text-color').value = styles.winnerTextColor;
            document.getElementById('title-size').value = styles.titleSize;
            document.getElementById('title-size-value').textContent = `${styles.titleSize}px`;
            document.getElementById('info-bar-size').value = styles.infoBarSize || styles.entryTextSize;
            document.getElementById('info-bar-size-value').textContent = `${styles.infoBarSize || styles.entryTextSize}px`;
            document.getElementById('callout-text-size').value = styles.calloutTextSize || styles.entryTextSize;
            document.getElementById('callout-text-size-value').textContent = `${styles.calloutTextSize || styles.entryTextSize}px`;
            document.getElementById('spinner-names-size').value = styles.spinnerNamesSize || styles.entryTextSize;
            document.getElementById('spinner-names-size-value').textContent = `${styles.spinnerNamesSize || styles.entryTextSize}px`;
            document.getElementById('winner-text-size').value = styles.winnerTextSize;
            document.getElementById('winner-text-size-value').textContent = `${styles.winnerTextSize}px`;
            document.getElementById('title-bg-color').value = styles.titleBgColor;
            document.getElementById('title-bg-opacity').value = Math.round(styles.titleBgOpacity * 100);
            document.getElementById('title-bg-opacity-value').textContent = `${Math.round(styles.titleBgOpacity * 100)}%`;
            document.getElementById('corner-radius').value = styles.cornerRadius;
            document.getElementById('corner-radius-value').textContent = `${styles.cornerRadius}px`;
            document.getElementById('font-family').value = styles.fontFamily;
        }
        function previewOBSDisplay() {
            const currentUrl = window.location.href.split('?')[0];
            const previewUrl = `${currentUrl}?display=true&session=${roomID}`;
            window.open(previewUrl, 'ObsPreview', 'width=800,height=600');
        }
        function hexToRgba(hex, opacity) {
            hex = hex.replace('#', '');
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);
            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
        }
        function switchTab(tabId) {
            tabs.forEach(tab => {
                tab.classList.remove('active');
                if (tab.dataset.tab === tabId) {
                    tab.classList.add('active');
                }
            });
            tabContents.forEach(content => {
                content.classList.remove('active');
                if (content.id === tabId + '-tab') {
                    content.classList.add('active');
                }
            });
        }
        console.log("Using Social Stream Ninja's P2P communication for OBS updates");
        function saveGiveawayState() {
            try {
                if (typeof addToDB === 'function') {
                    addToDB('giveaway_state', giveawayState)
                        .then(() => console.log('Giveaway state saved to database'))
                        .catch((error) => {
                            console.error('Failed to save to database:', error);
                        });
                }
                if (!isDisplayMode && typeof sendTargetP2P === 'function') {
                    console.log("Sending giveaway update via P2P to the OBS overlay");
                    sendTargetP2P({
                        action: "update_entries",
                        giveawayData: giveawayState
                    });
                }
                updateUI();
            } catch (error) {
                console.error('Error saving giveaway state:', error);
            }
        }
        function loadGiveawayState() {
            try {
                if (typeof getFromDB === 'function') {
                    getFromDB('giveaway_state')
                        .then((savedState) => {
                            if (savedState && isValidGiveawayState(savedState)) {
                                Object.assign(giveawayState, savedState);
                                console.log('Giveaway state loaded from database');
                                renderGiveaways();
                            } else {
                                console.log('No valid giveaway state found in database');
                                renderGiveaways();
                            }
                        })
                        .catch((error) => {
                            console.error('Failed to load from database:', error);
                            renderGiveaways();
                        });
                } else {
                    console.warn('Social Stream database API not available');
                    renderGiveaways();
                }
            } catch (error) {
                console.error('Error loading giveaway state:', error);
                renderGiveaways();
            }
        }
        function loadFromLocalStorage() {
            try {
                const savedState = localStorage.getItem('giveawayState');
                if (savedState) {
                    const parsedState = JSON.parse(savedState);
                    if (isValidGiveawayState(parsedState)) {
                        Object.assign(giveawayState, parsedState);
                        console.log('Giveaway state loaded from localStorage');
                    }
                }
                renderGiveaways();
            } catch (error) {
                console.error('Error loading from localStorage:', error);
                renderGiveaways();
            }
        }
        function isValidGiveawayState(state) {
            return state &&
                   typeof state === 'object' &&
                   Array.isArray(state.giveaways) &&
                   typeof state.settings === 'object';
        }
        function setupEventListeners() {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    document.querySelectorAll('.tab-content').forEach(content => {
                        content.classList.remove('active');
                    });
                    document.querySelectorAll('.tab').forEach(t => {
                        t.classList.remove('active');
                    });
                    document.getElementById(tabId + '-tab').classList.add('active');
                    this.classList.add('active');
                    if (tabId === 'settings') {
                        updateSettingsPreview('normal');
                    }
                });
            });
            createGiveawayBtn.addEventListener('click', function(e) {
                e.preventDefault();
                createGiveaway();
            });
            giveawayTypeSelect.addEventListener('change', function() {
                if (this.value === 'keyword') {
                    keywordField.style.display = 'block';
                } else {
                    keywordField.style.display = 'none';
                }
            });
            document.getElementById('preview-normal-btn').addEventListener('click', function() {
                updateSettingsPreview('normal');
            });
            document.getElementById('preview-spinning-btn').addEventListener('click', function() {
                const prevSpinningContainer = document.getElementById('preview-spinning-container');
                if (prevSpinningContainer) {
                    prevSpinningContainer.style.animation = 'none';
                    prevSpinningContainer.style.bottom = '';
                }
                document.querySelectorAll('head style[data-preview-animation]').forEach(el => el.remove());
                updateSettingsPreview('spinning');
                const spinningContainer = document.getElementById('preview-spinning-container');
                if (spinningContainer) {
                    setTimeout(() => {
                        const entrantElements = spinningContainer.querySelectorAll('div');
                        if (entrantElements.length > 0) {
                            const startIdx = Math.floor(entrantElements.length * 0.7);
                            const winnerIdx = startIdx + Math.floor(Math.random() * (entrantElements.length - startIdx));
                            const winnerElement = entrantElements[winnerIdx];
                            const winnerName = winnerElement.textContent;
                            const containerHeight = document.querySelector('#preview-spinning-list').offsetHeight;
                            const elementHeight = winnerElement.offsetHeight;
                            const centerPosition = (containerHeight - elementHeight) / 2;
                            const customStyleSheet = document.createElement('style');
                            customStyleSheet.setAttribute('data-preview-animation', 'true');
                            customStyleSheet.textContent = `
                                @keyframes previewExactScrollDown {
                                    0% { bottom: -800px; }
                                    90% { bottom: ${centerPosition + 10}px; }
                                    100% { bottom: ${centerPosition}px; }
                                }
                            `;
                            document.head.appendChild(customStyleSheet);
                            spinningContainer.style.animation = 'previewExactScrollDown cubic-bezier(0.2, 0.43, 0.77, 1.04) 1 8s';
                            const giveawayCallout = document.querySelector('#preview-giveaway-pane .giveaway-callout-text');
                            spinningContainer.addEventListener('animationend', function freezePosition() {
                                spinningContainer.style.animation = 'none';
                                spinningContainer.style.bottom = `${centerPosition}px`;
                                if (giveawayCallout) {
                                    giveawayCallout.textContent = `${giveawayState.settings.messages.winnerPrefix}${winnerName}!`;
                                    giveawayCallout.style.fontWeight = 'bold';
                                    winnerElement.style.backgroundColor = giveawayState.settings.styling.winnerBgColor;
                                    winnerElement.style.color = giveawayState.settings.styling.winnerTextColor;
                                    winnerElement.style.fontWeight = 'bold';
                                    winnerElement.style.transform = 'scale(1.05)';
                                    winnerElement.style.transition = 'all 0.3s ease-in-out';
                                }
                                if (giveawayState.settings.winnerAnimation === 'confetti') {
                                    createPreviewConfetti(document.getElementById('settings-preview-area'));
                                }
                                spinningContainer.removeEventListener('animationend', freezePosition);
                            });
                        } else {
                            const styleSheet = document.createElement('style');
                            styleSheet.setAttribute('data-preview-animation', 'true');
                            styleSheet.textContent = `
                                @keyframes previewScrollDown {
                                    0% { bottom: -800px; }
                                    90% { bottom: 14px; }
                                    100% { bottom: 0; }
                                }
                            `;
                            document.head.appendChild(styleSheet);
                            spinningContainer.style.animation = 'previewScrollDown cubic-bezier(0.2, 0.43, 0.77, 1.04) 1 8s';
                            const giveawayCallout = document.querySelector('#preview-giveaway-pane .giveaway-callout-text');
                            spinningContainer.addEventListener('animationend', function freezePosition() {
                                spinningContainer.style.animation = 'none';
                                spinningContainer.style.bottom = '0px';
                                if (giveawayCallout) {
                                    giveawayCallout.textContent = `${giveawayState.settings.messages.winnerPrefix}Viewer3!`;
                                    giveawayCallout.style.fontWeight = 'bold';
                                }
                                if (giveawayState.settings.winnerAnimation === 'confetti') {
                                    createPreviewConfetti(document.getElementById('settings-preview-area'));
                                }
                                spinningContainer.removeEventListener('animationend', freezePosition);
                            });
                        }
                    }, 50);
                }
            });
            document.getElementById('preview-winner-btn').addEventListener('click', function() {
                document.getElementById('preview-spinning-btn').click();
                const spinningContainer = document.getElementById('preview-spinning-container');
                if (spinningContainer) {
                    setTimeout(() => {
                        spinningContainer.style.animationDuration = "0.1s";
                        spinningContainer.style.animationPlayState = "running";
                    }, 500);
                }
            });
            pickWinnerBtn.addEventListener('click', pickWinner);
            completeGiveawayBtn.addEventListener('click', completeGiveaway);
            cancelGiveawayBtn.addEventListener('click', cancelGiveaway);
            clearCompletedBtn.addEventListener('click', clearCompletedGiveaways);
            const downloadRecordsBtn = document.getElementById('download-records-btn');
            if (downloadRecordsBtn) {
                downloadRecordsBtn.addEventListener('click', downloadGiveawayRecords);
            }
            const copyObsUrlBtn = document.getElementById('copy-obs-url');
            if (copyObsUrlBtn) {
                copyObsUrlBtn.addEventListener('click', copyObsUrl);
            }
            const saveStyleSettingsBtn = document.getElementById('save-style-settings-btn');
            if (saveStyleSettingsBtn) {
                saveStyleSettingsBtn.addEventListener('click', saveStyleSettings);
            }
            const resetStylesBtn = document.getElementById('reset-styles-btn');
            if (resetStylesBtn) {
                resetStylesBtn.addEventListener('click', resetStyleSettings);
            }
            const previewObsBtn = document.getElementById('preview-obs-btn');
            if (previewObsBtn) {
                previewObsBtn.addEventListener('click', previewOBSDisplay);
            }
            const styleInputs = document.querySelectorAll('#settings-tab input[type="color"], #settings-tab input[type="range"]');
            styleInputs.forEach(input => {
                input.addEventListener('input', function() {
                    if (this.id.includes('opacity')) {
                        const valueDisplay = document.getElementById(`${this.id}-value`);
                        if (valueDisplay) {
                            valueDisplay.textContent = `${this.value}%`;
                        }
                    }
                    if (this.id.includes('size')) {
                        const valueDisplay = document.getElementById(`${this.id}-value`);
                        if (valueDisplay) {
                            valueDisplay.textContent = `${this.value}px`;
                        }
                    }
                    updateCurrentStyles();
                    updateSettingsPreview(document.querySelector('#settings-preview-area').getAttribute('data-mode') || 'normal');
                });
            });
            saveSettingsBtn.addEventListener('click', saveSettings);
            document.getElementById('header-bg-color').addEventListener('change', updateStyleSetting);
            document.getElementById('header-bg-opacity').addEventListener('input', updateStyleSetting);
            document.getElementById('header-text-color').addEventListener('change', updateStyleSetting);
            document.getElementById('title-bg-color').addEventListener('change', updateStyleSetting);
            document.getElementById('title-bg-opacity').addEventListener('input', updateStyleSetting);
            document.getElementById('entries-bg-color').addEventListener('change', updateStyleSetting);
            document.getElementById('entries-bg-opacity').addEventListener('input', updateStyleSetting);
            document.getElementById('entries-text-color').addEventListener('change', updateStyleSetting);
            document.getElementById('entrant-bg-color').addEventListener('change', updateStyleSetting);
            document.getElementById('entrant-bg-opacity').addEventListener('input', updateStyleSetting);
            document.getElementById('winner-bg-color').addEventListener('change', updateStyleSetting);
            document.getElementById('winner-bg-opacity').addEventListener('input', updateStyleSetting);
            document.getElementById('winner-text-color').addEventListener('change', updateStyleSetting);
            document.getElementById('title-size').addEventListener('input', updateStyleSetting);
            document.getElementById('info-bar-size').addEventListener('input', updateStyleSetting);
            document.getElementById('callout-text-size').addEventListener('input', updateStyleSetting);
            document.getElementById('spinner-names-size').addEventListener('input', updateStyleSetting);
            document.getElementById('winner-text-size').addEventListener('input', updateStyleSetting);
            document.getElementById('corner-radius').addEventListener('input', updateStyleSetting);
            document.getElementById('font-family').addEventListener('change', updateStyleSetting);
        }
        function updateCurrentStyles() {
            giveawayState.settings.styling = {
                headerBgColor: document.getElementById('header-bg-color').value,
                headerBgOpacity: parseInt(document.getElementById('header-bg-opacity').value) / 100,
                headerTextColor: document.getElementById('header-text-color').value,
                titleBgColor: document.getElementById('title-bg-color').value,
                titleBgOpacity: parseInt(document.getElementById('title-bg-opacity').value) / 100,
                entriesBgColor: document.getElementById('entries-bg-color').value,
                entriesBgOpacity: parseInt(document.getElementById('entries-bg-opacity').value) / 100,
                entriesTextColor: document.getElementById('entries-text-color').value,
                entrantBgColor: document.getElementById('entrant-bg-color').value,
                entrantBgOpacity: parseInt(document.getElementById('entrant-bg-opacity').value) / 100,
                winnerBgColor: document.getElementById('winner-bg-color').value,
                winnerBgOpacity: parseInt(document.getElementById('winner-bg-opacity').value) / 100,
                winnerTextColor: document.getElementById('winner-text-color').value,
                titleSize: parseInt(document.getElementById('title-size').value),
                infoBarSize: parseInt(document.getElementById('info-bar-size').value),
                calloutTextSize: parseInt(document.getElementById('callout-text-size').value),
                spinnerNamesSize: parseInt(document.getElementById('spinner-names-size').value),
                entryTextSize: parseInt(document.getElementById('info-bar-size').value),
                winnerTextSize: parseInt(document.getElementById('winner-text-size').value),
                cornerRadius: parseInt(document.getElementById('corner-radius').value),
                fontFamily: document.getElementById('font-family').value
            };
        }
        function updateSettingsPreview(mode) {
            const previewPane = document.getElementById('preview-giveaway-pane');
            const previewArea = document.getElementById('settings-preview-area');
            const styles = giveawayState.settings.styling;
            if (!previewPane) return;
            previewArea.setAttribute('data-mode', mode || 'normal');
            const currentMode = mode || 'normal';
            const activeGiveaway = getActiveGiveaway() || createSampleGiveaway();
            previewArea.style.display = 'flex';
            previewArea.style.justifyContent = 'center';
            previewArea.style.alignItems = 'center';
            previewPane.innerHTML = '';
            const existingElements = previewArea.querySelectorAll(':scope > *:not(#preview-giveaway-pane)');
            existingElements.forEach(el => el.remove());
            previewPane.style.backgroundColor = `rgba(${hexToRgb(styles.headerBgColor)}, ${styles.headerBgOpacity})`;
            previewPane.style.color = styles.headerTextColor;
            previewPane.style.fontSize = `${styles.titleSize}px`;
            previewPane.style.borderRadius = `${styles.cornerRadius}px`;
            previewPane.style.fontFamily = styles.fontFamily;
            previewPane.style.padding = '16px';
            previewPane.style.gap = '10px';
            previewPane.style.display = 'flex';
            previewPane.style.flexDirection = 'column';
            previewPane.style.boxSizing = 'border-box';
            previewPane.style.minWidth = '500px';
            previewPane.style.width = '500px';
            previewPane.style.maxWidth = '800px';
            if (currentMode === 'spinning') {
                previewPane.innerHTML = `
                    <div class="giveaway-main-bg" style="background-color: rgba(${hexToRgb(styles.titleBgColor)}, ${styles.titleBgOpacity}); border-radius: ${Math.round(styles.cornerRadius * 0.8)}px; margin-bottom: 6px;">
                        <div class="giveaway-main" style="padding: 10px; min-height: 1.5em; overflow: hidden;">
                            <div class="giveaway-spinning" id="preview-spinning-list" style="height: 100%; position: relative; overflow: hidden; mask: linear-gradient(to bottom, rgba(0, 0, 0, 5%) 0%, #000 28%, #000 72%, rgba(0, 0, 0, 5%) 100%);">
                                <div class="spinning-container" id="preview-spinning-container" style="position: absolute; width: 100%; display: flex; flex-direction: column; justify-content: flex-start;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="giveaway-bar" style="width: 100%; justify-content: center; gap: 12px; margin-bottom: 6px;">
                        <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">${activeGiveaway.prize}</span>
                        <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">Entries: ${Object.keys(activeGiveaway.entrants).length}</span>
                    </div>
                    <div class="giveaway-callout" style="margin-top: 3px;">
                        <div class="giveaway-callout-text" style="font-size: ${styles.entryTextSize}px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">${giveawayState.settings.messages.spinnerText}</div>
                    </div>
                `;
                previewPane.querySelectorAll('*').forEach(el => {
                    el.style.fontFamily = styles.fontFamily;
                });
                const spinningContainer = document.getElementById('preview-spinning-container');
                if (spinningContainer) {
                    const sampleEntrants = ['Viewer1', 'Viewer2', 'Viewer3', 'Viewer4', 'Viewer5'];
                    let entrantsList = [];
                    for (let i = 0; i < 25; i++) {
                        entrantsList = entrantsList.concat(sampleEntrants);
                    }
                    entrantsList.forEach(name => {
                        const entrantDiv = document.createElement('div');
                        entrantDiv.textContent = name;
                        entrantDiv.style.display = 'flex';
                        entrantDiv.style.alignItems = 'center';
                        entrantDiv.style.justifyContent = 'center';
                        entrantDiv.style.padding = '7px';
                        entrantDiv.style.height = '1.15em';
                        entrantDiv.style.color = styles.entriesTextColor;
                        entrantDiv.style.fontSize = `${styles.spinnerNamesSize}px`;
                        entrantDiv.style.fontFamily = styles.fontFamily;
                        entrantDiv.style.backgroundColor = `rgba(${hexToRgb(styles.entrantBgColor)}, ${styles.entrantBgOpacity})`;
                        entrantDiv.style.borderRadius = `${Math.round(styles.cornerRadius * 0.6)}px`;
                        spinningContainer.appendChild(entrantDiv);
                    });
                }
            } else if (currentMode === 'winner') {
                previewPane.innerHTML = `
                    <div class="giveaway-main-bg" style="background-color: rgba(${hexToRgb(styles.winnerBgColor)}, ${styles.winnerBgOpacity}); border-radius: ${Math.round(styles.cornerRadius * 0.8)}px; margin-bottom: 6px;">
                        <div class="giveaway-main" style="padding: 10px; font-family: ${styles.fontFamily}; font-size: ${styles.winnerTextSize}px; color: ${styles.winnerTextColor}; text-align: center; min-height: 1.5em; display: flex; align-items: center; justify-content: center;">
                            ${giveawayState.settings.messages.winnerPrefix}Viewer123
                        </div>
                    </div>
                    <div class="giveaway-bar" style="width: 100%; justify-content: center; gap: 12px; margin-bottom: 6px;">
                        <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.infoBarSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">
                            Winner Selected!
                        </span>
                    </div>
                    <div class="giveaway-callout" style="margin-top: 3px;">
                        <div class="giveaway-callout-text" style="font-size: ${styles.calloutTextSize}px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">Thanks for participating!</div>
                    </div>
                `;
            } else {
                previewPane.innerHTML = `
                    <div class="giveaway-main-bg" style="background-color: rgba(${hexToRgb(styles.titleBgColor)}, ${styles.titleBgOpacity}); border-radius: ${Math.round(styles.cornerRadius * 0.8)}px; margin-bottom: 6px;">
                        <div class="giveaway-main" style="padding: 10px; font-family: ${styles.fontFamily}; font-size: ${styles.titleSize}px; color: ${styles.headerTextColor}; min-height: 1.5em; display: flex; align-items: center; justify-content: center;">Giveaway!</div>
                    </div>
                    <div class="giveaway-bar" style="width: 100%; justify-content: center; gap: 12px; margin-bottom: 6px;">
                        <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">${activeGiveaway.prize}</span>
                        <span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">Entries: ${Object.keys(activeGiveaway.entrants).length}</span>
                    </div>
                    <div class="giveaway-callout" style="margin-top: 3px;">
                        <div class="giveaway-callout-text" style="font-size: ${styles.entryTextSize}px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">Type !enter in chat to join</div>
                    </div>
                `;
                previewPane.querySelectorAll('*').forEach(el => {
                    if (!el.style.fontFamily) {
                        el.style.fontFamily = styles.fontFamily;
                    }
                    if (el.parentElement && el.parentElement.classList.contains('giveaway-bar') && el.tagName === 'SPAN') {
                        el.style.margin = '2px';
                    }
                });
            }
            const giveawayBarSpans = previewPane.querySelectorAll('.giveaway-bar > span');
            giveawayBarSpans.forEach(span => {
                span.style.backgroundColor = `rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity})`;
                span.style.color = styles.entriesTextColor;
                span.style.fontSize = `${styles.entryTextSize}px`;
                span.style.borderRadius = `${Math.round(styles.cornerRadius * 0.6)}px`;
                span.style.margin = '2px';
            });
            const calloutText = previewPane.querySelector('.giveaway-callout-text');
            if (calloutText) {
                calloutText.style.fontSize = `${styles.entryTextSize}px`;
                calloutText.style.color = styles.entriesTextColor;
            }
            const titleBg = previewPane.querySelector('.giveaway-main-bg');
            if (titleBg) {
                titleBg.style.backgroundColor = `rgba(${hexToRgb(styles.titleBgColor)}, ${styles.titleBgOpacity})`;
                titleBg.style.borderRadius = `${Math.round(styles.cornerRadius * 0.8)}px`;
            }
        }
        function hexToRgb(hex) {
            hex = hex.replace('#', '');
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);
            return `${r}, ${g}, ${b}`;
        }
        function createSampleGiveaway() {
            return {
                id: 'preview',
                title: 'Sample Giveaway',
                prize: 'Mystery Prize',
                keyword: '!win',
                type: 'keyword',
                entrants: {
                    user1: { name: 'Viewer1', platform: 'Twitch' },
                    user2: { name: 'Viewer2', platform: 'YouTube' },
                    user3: { name: 'Viewer3', platform: 'Twitch' },
                    user4: { name: 'Viewer4', platform: 'Twitch' },
                    user5: { name: 'Viewer5', platform: 'YouTube' }
                }
            };
        }
        function createPreviewConfetti(container) {
            const confettiCount = 30;
            const colors = ['#f94144', '#f3722c', '#f8961e', '#f9c74f', '#90be6d', '#43aa8b', '#577590'];
            for (let i = 0; i < confettiCount; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * container.offsetWidth + 'px';
                confetti.style.top = '0';
                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.opacity = '1';
                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
                confetti.style.position = 'absolute';
                const size = Math.random() * 10 + 5;
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                const shapes = ['circle', 'square', 'triangle'];
                const shape = shapes[Math.floor(Math.random() * shapes.length)];
                if (shape === 'circle') {
                    confetti.style.borderRadius = '50%';
                } else if (shape === 'triangle') {
                    confetti.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
                }
                container.appendChild(confetti);
                const animation = confetti.animate(
                    [
                        { transform: `translate(0, 0) rotate(0)`, opacity: 1, top: '0px' },
                        { transform: `translate(${Math.random() * 50 - 25}px, 0) rotate(${Math.random() * 360}deg)`, opacity: 0, top: `${container.offsetHeight}px` }
                    ],
                    {
                        duration: Math.random() * 2000 + 1000,
                        easing: 'cubic-bezier(0.1, 0.4, 0.3, 1)'
                    }
                );
                animation.onfinish = () => confetti.remove();
            }
        }
       
	   
        function init() {
            try {
                console.log("Initializing giveaway application...");
                createGiveawayBtn = document.getElementById('create-giveaway-btn');
                pickWinnerBtn = document.getElementById('pick-winner-btn');
                completeGiveawayBtn = document.getElementById('complete-giveaway-btn');
                cancelGiveawayBtn = document.getElementById('cancel-giveaway-btn');
                clearCompletedBtn = document.getElementById('clear-completed-btn');
                saveSettingsBtn = document.getElementById('save-settings-btn');
                giveawayTypeSelect = document.getElementById('giveaway-type');
                keywordField = document.querySelector('.keyword-field');
                tabs = document.querySelectorAll('.tab');
                tabContents = document.querySelectorAll('.tab-content');
                winnerDisplay = document.getElementById('winner-display');
                spinner = document.getElementById('spinner');
                spinnerContainer = document.getElementById('spinner-container');
                const obsDisplayContainer = document.getElementById('obs-display-container');
                if (obsDisplayContainer && !isDisplayMode) {
                    obsDisplayContainer.style.display = 'none';
                }
                console.log("DOM Elements initialized: ", {
                    createGiveawayBtn: !!createGiveawayBtn,
                    tabs: tabs?.length,
                    giveawayTypeSelect: !!giveawayTypeSelect
                });
                if (!giveawayState.giveaways) {
                    giveawayState.giveaways = [];
                }
                if (!giveawayState.settings) {
                    giveawayState.settings = {
                        winnerAnimation: 'confetti',
                        messages: {
                            spinnerText: 'Picking a winner...',
                            winnerPrefix: 'Winner: '
                        },
                        styling: {
                            headerBgColor: '#fcd00b',
                            headerBgOpacity: 1,
                            headerTextColor: '#362e2c',
                            titleBgColor: '#ffffff',
                            titleBgOpacity: 1,
                            entriesBgColor: '#e3e1de',
                            entriesBgOpacity: 1,
                            entriesTextColor: '#362e2c',
                            calloutTextColor: '#362e2c',
                            entrantBgColor: '#ffffff',
                            entrantBgOpacity: 1,
                            winnerBgColor: '#fcd00b',
                            winnerBgOpacity: 1,
                            winnerTextColor: '#362e2c',
                            titleSize: 32,
                            infoBarSize: 18,
                            calloutTextSize: 18,
                            spinnerNamesSize: 18,
                            entryTextSize: 18,
                            winnerTextSize: 36,
                            cornerRadius: 12,
                            fontFamily: 'IBM Plex Sans, Montserrat, Arial, sans-serif'
                        }
                    };
                }
                loadGiveawayState();
                if (!giveawayState.settings.messages) {
                    giveawayState.settings.messages = {
                        spinnerText: 'Picking a winner...',
                        winnerPrefix: 'Winner: '
                    };
                }
                if (!giveawayState.settings.styling.infoBarSize) {
                    giveawayState.settings.styling.infoBarSize = giveawayState.settings.styling.entryTextSize;
                }
                if (!giveawayState.settings.styling.calloutTextSize) {
                    giveawayState.settings.styling.calloutTextSize = giveawayState.settings.styling.entryTextSize;
                }
                if (!giveawayState.settings.styling.spinnerNamesSize) {
                    giveawayState.settings.styling.spinnerNamesSize = giveawayState.settings.styling.entryTextSize;
                }
                loadMessageSettingsToUI();
                setupEventListeners();
                if (!isDisplayMode) {
                    const obsUrlField = document.getElementById('obs-url');
                    if (obsUrlField) {
                        obsUrlField.value = generateObsUrl();
                    }
                    if (document.querySelector('.tab[data-tab="settings"]')?.classList.contains('active')) {
                        updateSettingsPreview('normal');
                    }
                    if (typeof setupHelpTooltips === 'function') {
                        setupHelpTooltips();
                    }
                }
                setupConnection();
				
				window.addEventListener("message", function(event) {
					try {
						if (event.data && event.data.dataReceived && event.data.dataReceived.overlayNinja) {
							console.log("Received window message:", event.data);
							iframeConnectionEstablished = true;
							console.log("Received dataReceived.overlayNinja message:", event.data.dataReceived.overlayNinja);
							processData(event.data.dataReceived.overlayNinja);
						} 
					} catch (err) {
						console.error("Error handling window message:", err);
					}
				});
				
                renderGiveaways();
                applySettings();
                if (typeof forceApplyFontToAllObsElements === 'function') {
                    setTimeout(() => {
                        forceApplyFontToAllObsElements();
                    }, 200);
                }
                if (isDisplayMode) {
                    console.log("OBS mode detected, ensuring display is properly initialized");
                    if (getActiveGiveaway() === undefined) {
                        console.log("No active giveaway found, creating a sample one for OBS");
                        const sampleGiveaway = {
                            id: 'sample-obs',
                            title: 'Sample Giveaway',
                            prize: 'Cool Prize',
                            type: 'keyword',
                            keyword: '!win',
                            state: 'active',
                            entrants: {}
                        };
                        giveawayState.giveaways.push(sampleGiveaway);
                        setTimeout(() => {
                            updateOBSDisplay(sampleGiveaway);
                            const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                            if (obsActiveGiveaway) {
                                obsActiveGiveaway.style.padding = '20px';
                                obsActiveGiveaway.style.gap = '15px';
                                const barItems = obsActiveGiveaway.querySelectorAll('.giveaway-bar > span');
                                barItems.forEach(item => {
                                    item.style.margin = '4px';
                                });
                            }
                        }, 300);
                    }
                }
                console.log("Giveaway application initialized successfully!");
            } catch (error) {
                console.error('Error during initialization:', error);
                if (typeof showNotification === 'function') {
                    showNotification('Error initializing: ' + error.message, 'error', true);
                } else {
                    alert('Error initializing: ' + error.message);
                }
            }
        }
        window.addEventListener('error', function(event) {
            console.error('JavaScript error:', event.message, 'at', event.filename, 'line', event.lineno);
            alert('An error occurred: ' + event.message);
        });
        console.log("Document ready state:", document.readyState);
        function startApp() {
            console.log("Window loaded, initializing app");
            window.requestAnimationFrame(function() {
                try {
                    init();
                    if (isDisplayMode) {
                        const obsDisplayContainer = document.getElementById('obs-display-container');
                        if (obsDisplayContainer) {
                            obsDisplayContainer.style.display = 'flex';
                            obsDisplayContainer.style.justifyContent = 'center';
                            obsDisplayContainer.style.alignItems = 'center';
                            obsDisplayContainer.style.width = '100%';
                            obsDisplayContainer.style.height = '100vh';
                        }
                        const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
                        if (obsActiveGiveaway) {
                            obsActiveGiveaway.style.margin = '0 auto';
                            obsActiveGiveaway.style.maxWidth = '800px';
                            obsActiveGiveaway.style.width = 'auto';
                        }
                    }
                } catch (e) {
                    console.error("Error during initialization:", e);
                    alert("Error during initialization: " + e.message);
                }
            });
        }
        if (document.readyState === 'complete') {
            console.log("Document already complete");
            startApp();
        } else {
            console.log("Waiting for window load event");
            window.addEventListener('load', startApp);
        }
        function downloadGiveawayRecords() {
            try {
                const formatSelect = document.getElementById('download-format');
                const format = formatSelect ? formatSelect.value : 'csv';
                const completed = getCompletedGiveaways();
                if (!completed || completed.length === 0) {
                    alert('No completed giveaways to download');
                    return;
                }
                let data;
                let filename;
                let mimeType;
                if (format === 'csv') {
                    let csvContent = 'Title,Prize,Type,Keyword,Entries Count,Winner,Winner Platform\n';
                    completed.forEach(giveaway => {
                        try {
                            if (!giveaway || typeof giveaway !== 'object') return;
                            const title = giveaway.title || 'Untitled';
                            const prize = giveaway.prize || '';
                            const type = giveaway.type || 'unknown';
                            const keyword = giveaway.keyword || '';
                            const entrants = giveaway.entrants || {};
                            const entrantsCount = Object.keys(entrants).length;
                            let winnerName = '';
                            let winnerPlatform = '';
                            if (giveaway.winner) {
                                if (typeof giveaway.winner === 'object') {
                                    winnerName = giveaway.winner.name || 'Unknown';
                                    winnerPlatform = giveaway.winner.platform || '';
                                } else {
                                    winnerName = String(giveaway.winner);
                                    winnerPlatform = giveaway.winnerPlatform || '';
                                }
                            } else if (giveaway.winnerName) {
                                winnerName = giveaway.winnerName;
                                winnerPlatform = giveaway.winnerPlatform || '';
                            }
                            const escapedTitle = title.includes(',') ? `"${title}"` : title;
                            const escapedPrize = prize.includes(',') ? `"${prize}"` : prize;
                            csvContent += `${escapedTitle},${escapedPrize},${type},${keyword},${entrantsCount},${winnerName},${winnerPlatform}\n`;
                        } catch (itemError) {
                            console.error('Error processing giveaway item:', itemError);
                        }
                    });
                    data = csvContent;
                    filename = 'giveaway_records.csv';
                    mimeType = 'text/csv';
                } else {
                    const safeData = completed.map(giveaway => {
                        try {
                            const entrants = giveaway.entrants || {};
                            return {
                                title: giveaway.title || 'Untitled',
                                prize: giveaway.prize || '',
                                type: giveaway.type || 'unknown',
                                keyword: giveaway.keyword || '',
                                entrantsCount: Object.keys(entrants).length,
                                winner: giveaway.winner || giveaway.winnerName || '',
                                winnerPlatform: (typeof giveaway.winner === 'object' && giveaway.winner?.platform) ||
                                                giveaway.winnerPlatform || '',
                                completedDate: giveaway.completedDate || new Date().toISOString()
                            };
                        } catch (itemError) {
                            console.error('Error processing giveaway item for JSON:', itemError);
                            return { error: 'Failed to process this giveaway' };
                        }
                    });
                    data = JSON.stringify(safeData, null, 2);
                    filename = 'giveaway_records.json';
                    mimeType = 'application/json';
                }
                const blob = new Blob([data], { type: mimeType });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                link.click();
                setTimeout(() => {
                    URL.revokeObjectURL(url);
                }, 100);
                console.log('Giveaway records downloaded successfully!');
            } catch (error) {
                console.error('Error downloading giveaway records:', error);
                alert('Error downloading records: ' + error.message);
            }
        }
        function generateObsUrl() {
            const currentUrl = window.location.href.split('?')[0];
            return `${currentUrl}?display=true&session=${roomID}&label=giveaway`;
        }
        function copyObsUrl() {
            const obsUrlField = document.getElementById('obs-url');
            obsUrlField.select();
            document.execCommand('copy');
            const copySuccess = document.getElementById('copy-success');
            copySuccess.style.display = 'block';
            setTimeout(() => {
                copySuccess.style.display = 'none';
            }, 3000);
        }
        function updateEntrantsDisplay(activeGiveaway) {
            const obsEntrantsDisplay = document.getElementById('obs-entrants-display');
            const styles = giveawayState.settings.styling;
            if (!activeGiveaway || !obsEntrantsDisplay) return;
            const entrants = activeGiveaway.entrants || {};
            const entrantsList = Object.values(entrants);
            if (entrantsList.length === 0) {
                obsEntrantsDisplay.style.display = 'none';
                return;
            }
            obsEntrantsDisplay.style.display = 'block';
            obsEntrantsDisplay.style.fontFamily = styles.fontFamily;
            obsEntrantsDisplay.style.maxWidth = '800px';
            obsEntrantsDisplay.style.margin = '0 auto';
            obsEntrantsDisplay.style.width = 'auto';
            obsEntrantsDisplay.innerHTML = `
                <div style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); padding: 15px; border-radius: ${styles.cornerRadius}px; max-height: 200px; overflow-y: auto; margin-top: 10px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">
                    <div id="obs-entrants-list" style="display: flex; flex-wrap: wrap; gap: 8px; font-family: ${styles.fontFamily}; justify-content: center;"></div>
                </div>
            `;
            const obsEntrantsList = document.getElementById('obs-entrants-list');
            const recentEntrants = entrantsList.slice(-5);
            recentEntrants.forEach(entrant => {
                const obsEntrantElement = document.createElement('div');
                obsEntrantElement.style.backgroundColor = `rgba(${hexToRgb(styles.entrantBgColor)}, ${styles.entrantBgOpacity})`;
                obsEntrantElement.style.padding = '8px 12px';
                obsEntrantElement.style.borderRadius = `${Math.round(styles.cornerRadius * 0.6)}px`;
                obsEntrantElement.style.fontFamily = styles.fontFamily;
                obsEntrantElement.style.fontSize = `${styles.entryTextSize}px`;
                obsEntrantElement.style.color = styles.entriesTextColor;
                obsEntrantElement.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
                obsEntrantElement.textContent = `${entrant.name || 'Anonymous'} ${entrant.platform ? `(${entrant.platform})` : ''}`;
                obsEntrantsList.appendChild(obsEntrantElement);
            });
        }
        function updateStyleSetting() {
            try {
                console.log("Updating style settings...");
                const styles = giveawayState.settings.styling;
                const headerBgColor = document.getElementById('header-bg-color');
                if (headerBgColor) styles.headerBgColor = headerBgColor.value;
                const headerBgOpacity = document.getElementById('header-bg-opacity');
                if (headerBgOpacity) {
                    styles.headerBgOpacity = parseInt(headerBgOpacity.value) / 100;
                    const opacityValue = document.getElementById('header-bg-opacity-value');
                    if (opacityValue) opacityValue.textContent = `${headerBgOpacity.value}%`;
                }
                const headerTextColor = document.getElementById('header-text-color');
                if (headerTextColor) styles.headerTextColor = headerTextColor.value;
                const titleBgColor = document.getElementById('title-bg-color');
                if (titleBgColor) styles.titleBgColor = titleBgColor.value;
                const titleBgOpacity = document.getElementById('title-bg-opacity');
                if (titleBgOpacity) {
                    styles.titleBgOpacity = parseInt(titleBgOpacity.value) / 100;
                    const opacityValue = document.getElementById('title-bg-opacity-value');
                    if (opacityValue) opacityValue.textContent = `${titleBgOpacity.value}%`;
                }
                const entriesBgColor = document.getElementById('entries-bg-color');
                if (entriesBgColor) styles.entriesBgColor = entriesBgColor.value;
                const entriesBgOpacity = document.getElementById('entries-bg-opacity');
                if (entriesBgOpacity) {
                    styles.entriesBgOpacity = parseInt(entriesBgOpacity.value) / 100;
                    const opacityValue = document.getElementById('entries-bg-opacity-value');
                    if (opacityValue) opacityValue.textContent = `${entriesBgOpacity.value}%`;
                }
                const entriesTextColor = document.getElementById('entries-text-color');
                if (entriesTextColor) styles.entriesTextColor = entriesTextColor.value;
                const entrantBgColor = document.getElementById('entrant-bg-color');
                if (entrantBgColor) styles.entrantBgColor = entrantBgColor.value;
                const entrantBgOpacity = document.getElementById('entrant-bg-opacity');
                if (entrantBgOpacity) {
                    styles.entrantBgOpacity = parseInt(entrantBgOpacity.value) / 100;
                    const opacityValue = document.getElementById('entrant-bg-opacity-value');
                    if (opacityValue) opacityValue.textContent = `${entrantBgOpacity.value}%`;
                }
                const winnerBgColor = document.getElementById('winner-bg-color');
                if (winnerBgColor) styles.winnerBgColor = winnerBgColor.value;
                const winnerBgOpacity = document.getElementById('winner-bg-opacity');
                if (winnerBgOpacity) {
                    styles.winnerBgOpacity = parseInt(winnerBgOpacity.value) / 100;
                    const opacityValue = document.getElementById('winner-bg-opacity-value');
                    if (opacityValue) opacityValue.textContent = `${winnerBgOpacity.value}%`;
                }
                const winnerTextColor = document.getElementById('winner-text-color');
                if (winnerTextColor) styles.winnerTextColor = winnerTextColor.value;
                const fontFamily = document.getElementById('font-family');
                if (fontFamily) styles.fontFamily = fontFamily.value;
                const titleSize = document.getElementById('title-size');
                if (titleSize) {
                    styles.titleSize = parseInt(titleSize.value);
                    const sizeValue = document.getElementById('title-size-value');
                    if (sizeValue) sizeValue.textContent = `${titleSize.value}px`;
                }
                const entryTextSize = document.getElementById('entry-text-size');
                if (entryTextSize) {
                    styles.entryTextSize = parseInt(entryTextSize.value);
                    const sizeValue = document.getElementById('entry-text-size-value');
                    if (sizeValue) sizeValue.textContent = `${entryTextSize.value}px`;
                }
                const winnerTextSize = document.getElementById('winner-text-size');
                if (winnerTextSize) {
                    styles.winnerTextSize = parseInt(winnerTextSize.value);
                    const sizeValue = document.getElementById('winner-text-size-value');
                    if (sizeValue) sizeValue.textContent = `${winnerTextSize.value}px`;
                }
                const cornerRadius = document.getElementById('corner-radius');
                if (cornerRadius) {
                    styles.cornerRadius = parseInt(cornerRadius.value);
                    const radiusValue = document.getElementById('corner-radius-value');
                    if (radiusValue) radiusValue.textContent = `${cornerRadius.value}px`;
                }
                if (typeof applyFontFamilyToAllElements === 'function') {
                    setTimeout(() => applyFontFamilyToAllElements(), 50);
                }
                if (typeof forceApplyFontToAllObsElements === 'function') {
                    setTimeout(() => forceApplyFontToAllObsElements(), 100);
                }
                if (typeof saveGiveawayState === 'function') {
                    saveGiveawayState();
                }
                const previewArea = document.querySelector('#settings-preview-area');
                if (previewArea) {
                    const mode = previewArea.getAttribute('data-mode') || 'normal';
                    if (typeof updateSettingsPreview === 'function') {
                        updateSettingsPreview(mode);
                    }
                }
                console.log("Style settings updated successfully!");
            } catch (error) {
                console.error('Error updating style settings:', error);
            }
        }
        function loadGoogleFont(fontName) {
            if (!fontName || fontName.trim() === '') return;
            const formattedFontName = fontName.trim().replace(/\s+/g, '+');
            const existingLink = document.querySelector(`link[href*="${formattedFontName}"]`);
            if (existingLink) return;
            const linkElement = document.createElement('link');
            linkElement.href = `https://fonts.googleapis.com/css2?family=${formattedFontName}:wght@400;700&display=swap`;
            linkElement.rel = 'stylesheet';
            linkElement.onload = function() {
                console.log(`Google Font loaded: ${fontName}`);
                setTimeout(() => applyFontFamilyToAllElements(), 50);
            };
            document.head.appendChild(linkElement);
            console.log(`Loading Google Font: ${fontName}`);
            return formattedFontName;
        }
        document.getElementById('font-family').addEventListener('change', function() {
            if (this.value === 'custom') {
                document.getElementById('custom-font-section').style.display = 'block';
            } else {
                document.getElementById('custom-font-section').style.display = 'none';
                updateStyleSetting();
            }
        });
        document.getElementById('load-custom-font').addEventListener('click', function() {
            const fontNameInput = document.getElementById('custom-font-name');
            const fontName = fontNameInput.value.trim();
            if (fontName) {
                const fontFamilyValue = `"${fontName}", Arial, sans-serif`;
                giveawayState.settings.styling.fontFamily = fontFamilyValue;
                loadGoogleFont(fontName);
                const preview = document.getElementById('custom-font-preview');
                preview.textContent = `Loading font: ${fontName}...`;
                setTimeout(() => {
                    document.querySelectorAll('.preview-giveaway-pane, .giveaway-pane, .giveaway-header, .giveaway-main, .giveaway-bar, .giveaway-callout, .winner-display, #obs-active-giveaway *, #obs-active-giveaway, #obs-winner-display, #obs-entrants-display, .spinning-container div').forEach(elem => {
                        if (elem) elem.style.fontFamily = fontFamilyValue;
                    });
                    const obsPreview = document.getElementById('obs-display');
                    if (obsPreview) {
                        obsPreview.style.fontFamily = fontFamilyValue;
                    }
                    if (preview) preview.style.fontFamily = fontFamilyValue;
                    updateStyleSetting();
                    fontNameInput.style.borderColor = '#4CAF50';
                    setTimeout(() => {
                        fontNameInput.style.borderColor = '';
                    }, 2000);
                    preview.textContent = `Font Applied: ${fontName}`;
                    setTimeout(() => {
                        preview.textContent = 'Font Preview: The quick brown fox jumps over the lazy dog';
                    }, 2000);
                }, 300);
            } else {
                fontNameInput.style.borderColor = '#F44336';
            }
        });
        function applyFontFamilyToAllElements() {
            const styles = giveawayState.settings.styling;
            const elements = document.querySelectorAll('.giveaway-pane, .giveaway-header, .giveaway-main, .giveaway-bar, .giveaway-callout, .winner-display, .spinning-container div, #obs-active-giveaway, #obs-active-giveaway *, #obs-display, #obs-display *, #obs-winner-display, #obs-entrants-display, .preview-giveaway-pane');
            elements.forEach(elem => {
                if (elem) {
                    elem.style.setProperty('font-family', styles.fontFamily, 'important');
                }
            });
            const spinningContainer = document.querySelector('.spinning-container, #preview-spinning-container');
            if (spinningContainer) {
                Array.from(spinningContainer.children).forEach(child => {
                    child.style.setProperty('font-family', styles.fontFamily, 'important');
                });
            }
            updateObsDisplayWithFont(styles.fontFamily);
            console.log('Applied font family to all elements:', styles.fontFamily);
        }
        function updateObsDisplayWithFont(fontFamily) {
            const obsElements = document.querySelectorAll('#obs-display, #obs-active-giveaway, #obs-winner-display, #obs-entrants-display');
            obsElements.forEach(elem => {
                if (elem) {
                    elem.style.setProperty('font-family', fontFamily, 'important');
                    const children = elem.querySelectorAll('*');
                    children.forEach(child => {
                        child.style.setProperty('font-family', fontFamily, 'important');
                    });
                }
            });
            const activeGiveaway = giveawayState.activeGiveaway;
            if (activeGiveaway) {
                renderActiveGiveaway(activeGiveaway);
            }
        }
        document.getElementById('custom-font-name').addEventListener('input', function() {
            const fontName = this.value.trim();
            if (fontName.length > 2) {
                loadGoogleFont(fontName);
                const fontFamilyValue = `"${fontName}", Arial, sans-serif`;
                const preview = document.getElementById('custom-font-preview');
                preview.style.fontFamily = fontFamilyValue;
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, checking for custom fonts...');
            setTimeout(() => {
                if (giveawayState.settings && giveawayState.settings.styling && giveawayState.settings.styling.fontFamily) {
                    console.log('Found saved font family:', giveawayState.settings.styling.fontFamily);
                    const fontSelect = document.getElementById('font-family');
                    const isCustomFont = !Array.from(fontSelect.options).some(option =>
                        option.value === giveawayState.settings.styling.fontFamily && option.value !== 'custom'
                    );
                    if (isCustomFont) {
                        const fontNameMatch = giveawayState.settings.styling.fontFamily.match(/['"]([^'"]+)['"]/);
                        if (fontNameMatch && fontNameMatch[1]) {
                            console.log('Detected custom font:', fontNameMatch[1]);
                            fontSelect.value = 'custom';
                            document.getElementById('custom-font-section').style.display = 'block';
                            document.getElementById('custom-font-name').value = fontNameMatch[1];
                            loadGoogleFont(fontNameMatch[1]);
                            setTimeout(() => {
                                document.querySelectorAll('.giveaway-pane, .giveaway-header, .giveaway-main, .giveaway-bar, .giveaway-callout, .winner-display, #obs-active-giveaway, #obs-display, #obs-display *').forEach(el => {
                                    el.style.setProperty('font-family', giveawayState.settings.styling.fontFamily, 'important');
                                });
                                updateObsDisplayWithFont(giveawayState.settings.styling.fontFamily);
                                if (giveawayState.activeGiveaway) {
                                    renderActiveGiveaway(giveawayState.activeGiveaway);
                                }
                                applyFontFamilyToAllElements();
                            }, 300);
                        }
                    }
                }
            }, 200);
        });
        function forceApplyFontToAllObsElements() {
            console.log('Force applying fonts to all OBS elements...');
            const fontFamily = giveawayState.settings.styling.fontFamily;
            if (!fontFamily) return;
            const obsElements = [
                document.getElementById('obs-display'),
                document.getElementById('obs-active-giveaway'),
                document.getElementById('obs-winner-display'),
                document.getElementById('obs-entrants-display'),
                document.getElementById('spinning-container'),
                document.getElementById('preview-spinning-container')
            ];
            obsElements.forEach(elem => {
                if (!elem) return;
                elem.style.setProperty('font-family', fontFamily, 'important');
                const children = elem.querySelectorAll('*');
                children.forEach(child => {
                    child.style.setProperty('font-family', fontFamily, 'important');
                });
            });
            const spinningContainers = document.querySelectorAll('.spinning-container');
            spinningContainers.forEach(container => {
                if (!container) return;
                Array.from(container.children).forEach(child => {
                    child.style.setProperty('font-family', fontFamily, 'important');
                });
            });
            console.log('Font family applied to all OBS elements:', fontFamily);
        }
        const originalInit = init;
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                setTimeout(() => {
                    forceApplyFontToAllObsElements();
                }, 100);
            }
        });
        updateStyleSetting = function() {
            giveawayState.settings.styling.fontFamily = document.getElementById('font-family').value;
            updateSettingsPreview();
            applyFontFamilyToAllElements();
            setTimeout(() => {
                forceApplyFontToAllObsElements();
                const obsDisplayContainer = document.getElementById('obs-display-container');
                if (obsDisplayContainer && !isDisplayMode) {
                    obsDisplayContainer.style.display = 'none';
                }
            }, 100);
        };
        function updateOBSDisplay(activeGiveaway) {
			try {
				console.log("Updating OBS display with active giveaway:", activeGiveaway?.title);
				const obsActiveGiveaway = document.getElementById('obs-active-giveaway');
				const obsDisplayContainer = document.getElementById('obs-display-container');
				if (!obsActiveGiveaway || !activeGiveaway) {
					console.log("Missing OBS display elements or no active giveaway");
					return;
				}
				
				const styles = giveawayState.settings.styling;
				if (obsDisplayContainer) {
					if (isDisplayMode) {
						obsDisplayContainer.style.display = 'flex';
						obsDisplayContainer.style.visibility = 'visible';
						obsDisplayContainer.style.position = 'relative';
						obsDisplayContainer.style.justifyContent = 'center';
						obsDisplayContainer.style.alignItems = 'center';
						obsDisplayContainer.style.width = '100%';
						obsDisplayContainer.style.height = '100vh';
						obsDisplayContainer.style.overflow = 'visible';
						obsDisplayContainer.style.opacity = '1';
					} else {
						obsDisplayContainer.style.display = 'none';
					}
				}
				
				// Count the entries
				const entrantsCount = Object.keys(activeGiveaway.entrants || {}).length;
				
				obsActiveGiveaway.innerHTML = `
					<div class="giveaway-main-bg" style="background-color: rgba(${hexToRgb(styles.titleBgColor)}, ${styles.titleBgOpacity}); border-radius: ${Math.round(styles.cornerRadius * 0.8)}px; margin-bottom: 6px;">
						<div class="giveaway-main" style="padding: 10px; font-family: ${styles.fontFamily}; font-size: ${styles.titleSize}px; color: ${styles.headerTextColor}; min-height: 1.5em; display: flex; align-items: center; justify-content: center;">
							${sanitizeInput(activeGiveaway.title)}
						</div>
					</div>
					<div class="giveaway-bar" style="width: 100%; justify-content: center; gap: 12px; margin-bottom: 6px;">
						<span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">
							${sanitizeInput(activeGiveaway.prize)}
						</span>
						<span style="background-color: rgba(${hexToRgb(styles.entriesBgColor)}, ${styles.entriesBgOpacity}); color: ${styles.entriesTextColor}; font-size: ${styles.entryTextSize}px; border-radius: ${Math.round(styles.cornerRadius * 0.6)}px; font-family: ${styles.fontFamily}; margin: 2px;">
							Entries: ${entrantsCount}
						</span>
					</div>
					<div class="giveaway-callout" style="margin-top: 3px;">
						<div class="giveaway-callout-text" style="font-size: ${styles.entryTextSize}px; color: ${styles.entriesTextColor}; font-family: ${styles.fontFamily};">
							${activeGiveaway.type === 'keyword' ?
								`Type ${sanitizeInput(activeGiveaway.keyword)} in chat to enter!` :
								'Chat to enter the giveaway!'}
						</div>
					</div>
				`;
				
				obsActiveGiveaway.style.backgroundColor = `rgba(${hexToRgb(styles.headerBgColor)}, ${styles.headerBgOpacity})`;
				obsActiveGiveaway.style.color = styles.headerTextColor;
				obsActiveGiveaway.style.fontFamily = styles.fontFamily;
				obsActiveGiveaway.style.borderRadius = `${styles.cornerRadius}px`;
				obsActiveGiveaway.style.padding = '16px';
				obsActiveGiveaway.style.gap = '10px';
				obsActiveGiveaway.style.minWidth = '500px';
				obsActiveGiveaway.style.width = '500px';
				obsActiveGiveaway.style.display = 'flex';
				obsActiveGiveaway.style.flexDirection = 'column';
				obsActiveGiveaway.style.boxSizing = 'border-box';
				
				setTimeout(() => {
					const barItems = obsActiveGiveaway.querySelectorAll('.giveaway-bar > span');
					barItems.forEach(item => {
						item.style.margin = '2px';
					});
				}, 50);
				
				updateEntrantsDisplay(activeGiveaway);
				console.log("OBS display updated successfully with " + entrantsCount + " entries");
			} catch (error) {
				console.error("Error updating OBS display:", error);
			}
		}
        function setupHelpTooltips() {
            const helpItems = document.querySelectorAll('.help-icon');
            helpItems.forEach(item => {
                const tooltip = document.createElement('div');
                tooltip.className = 'tooltip';
                tooltip.textContent = item.getAttribute('data-help') || 'Help information';
                item.appendChild(tooltip);
                item.addEventListener('mouseenter', () => {
                    tooltip.style.opacity = '1';
                });
                item.addEventListener('mouseleave', () => {
                    tooltip.style.opacity = '0';
                });
            });
        }
        function showNotification(message, type = 'info', isPersistent = false) {
            const notificationContainer = document.getElementById('notification-container');
            if (!notificationContainer) {
                const container = document.createElement('div');
                container.id = 'notification-container';
                container.style.position = 'fixed';
                container.style.top = '10px';
                container.style.right = '10px';
                container.style.zIndex = '9999';
                document.body.appendChild(container);
            }
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = message;
            notification.style.backgroundColor = type === 'error' ? '#e56942' : type === 'success' ? '#35b045' : '#4265e5';
            notification.style.color = 'white';
            notification.style.padding = '10px';
            notification.style.margin = '5px 0';
            notification.style.borderRadius = '4px';
            notification.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
            document.getElementById('notification-container').appendChild(notification);
            if (!isPersistent) {
                setTimeout(() => {
                    notification.remove();
                }, 5000);
            } else {
                const closeButton = document.createElement('button');
                closeButton.innerHTML = '×';
                closeButton.style.marginLeft = '10px';
                closeButton.style.background = 'none';
                closeButton.style.border = 'none';
                closeButton.style.color = 'white';
                closeButton.style.cursor = 'pointer';
                closeButton.style.fontSize = '16px';
                closeButton.onclick = () => notification.remove();
                notification.appendChild(closeButton);
            }
        }
    </script>
</body>
</html> 