    
    <div id="sos-app-root" style="display:none;">
        
        <div id="winner-screen" class="winner-overlay" style="display:none;">
            <div id="confetti-container"></div>
            <div class="winner-content">
                <div class="win-icon">🏆</div>
                <h1 class="win-title">¡GANÉ!</h1>
                <p class="win-subtitle">CARTÓN GANADOR</p>
                <div class="win-serial" id="win-serial-display">---</div>
                
                <div class="sponsor-presentation" style="margin-top: 3vh;">
                    <span class="sponsor-tagline" style="font-size:10px;">PREMIO PATROCINADO POR:</span>
                    <img id="player-winner-logo" class="trans-logo-glow" src="https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png" style="height:12vh; border-color:white; box-shadow:0 0 20px white;" onerror="this.src='https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png'">
                </div>

                <button onclick="closeWinner()" class="btn-close-win" style="margin-top:20px;">CERRAR AVISO</button>
            </div>
        </div>

        <div class="app-container">
            <div id="countdown-overlay" class="countdown-layer" style="display:none;">
                <div class="sponsor-presentation">
                    <span class="sponsor-tagline">ESTE JUEGO ES PRESENTADO POR:</span>
                    <img id="player-trans-logo" class="trans-logo-glow" src="https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png" onerror="this.src='https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png'">
                </div>
                <div class="countdown-content">
                    <h2 class="cd-title">CAMBIO DE JUEGO</h2>
                    <div id="cd-number" class="cd-number">10</div>
                </div>
            </div>

            <div id="showtime-overlay" class="showtime-layer" style="display:none;">
                <img id="showtime-trans-logo" class="trans-logo-glow" src="https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png" style="height:10vh; margin-bottom:2vh;" onerror="this.src='https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png'">
                <h2 id="showtime-title">JUGAMOS: --</h2>
                <div class="showtime-grid" id="showtime-grid"></div>
            </div>

            <header class="app-header">
                <img src="https://sospuravida.com/BINGO/wp-content/plugins/sos-smart-bingo/assets/logo-sos.png" class="app-logo">
                <span class="header-title">APP JUGADOR</span>
                <div class="header-controls">
                    <div class="conn-status" id="conn-status"><span class="pulse-dot"></span></div>
                    <button id="btn-autodaub" class="icon-btn">🪄</button>
                    <button id="btn-theme" class="icon-btn theme-toggle">☀️</button>
                    <button id="btn-visual" class="icon-btn hint-toggle">👁️</button>
                    <button id="btn-sound" class="icon-btn mute-toggle active">🔊</button>
                    <button onclick="toggleFS()" class="icon-btn fs-toggle">⛶</button>
                </div>
            </header>

            <div id="p-login">
                <div class="login-card">
                    <h2 style="color:#fbbf24; margin-top:0;">BIENVENIDO</h2>
                    <p style="color:#cbd5e1; margin-bottom:20px;">Ingresa tu Cédula o ID:</p>
                    <input type="text" id="p-cedula" class="login-input" placeholder="Ej: 110600872" autocomplete="off">
                    <button id="btn-enter" class="login-btn">INGRESAR 🚀</button>
                    <div id="login-error" class="error-msg"></div>
                </div>
            </div>

            <div id="p-card">
                <div class="finance-bar-pro">
                    <div class="fin-item">Bolsa:<br><span id="app-rec-total">₡0</span></div>
                    <div class="fin-item premium">🏆 Premio (60%):<br><span id="app-rec-premio">₡0</span></div>
                    <div class="fin-item" style="color:#fca5a5;">C. Roja (30%):<br><span id="app-rec-cr">₡0</span></div>
                    <div class="fin-item" style="color:#a78bfa;">Acum. (10%):<br><span id="app-rec-acu">₡0</span></div>
                </div>

                <div class="info-bar-extended">
                    <div class="history-track" id="ui-history">
                        <div class="mini-ball-empty"></div><div class="mini-ball-empty"></div><div class="mini-ball-empty"></div>
                    </div>
                    <div class="current-ball-wrapper">
                        <div class="main-ball">
                            <span class="mb-let" id="ui-let">-</span>
                            <span class="mb-num" id="ui-num">--</span>
                        </div>
                    </div>
                </div>
                
                <div class="mode-strip">
                    <span id="ui-mode">CARGANDO...</span>
                </div>

                <div class="board-area">
                    <div class="bingo-grid" id="ui-grid">
                        <div class="gh b-col">B</div><div class="gh i-col">I</div><div class="gh n-col">N</div><div class="gh g-col">G</div><div class="gh o-col">O</div>
                    </div>
                </div>

                <div class="marquee-container">
                    <div class="mq-content" id="mq-text"></div>
                </div>

                <footer class="control-footer">
                    <button id="btn-prev" class="nav-btn">◀</button>
                    <div class="center-action">
                        <button id="btn-win" class="btn-win">¡GANÉ!</button>
                        <div class="serial-info">
                            SERIE: <span id="ui-serial">---</span> | <span id="ui-idx">1</span>/<span id="ui-total">1</span>
                        </div>
                    </div>
                    <button id="btn-next" class="nav-btn">▶</button>
                </footer>
            </div>
        </div>
    </div>

    <style>
        /* ESTILOS BASE */
        #sos-app-root { font-family: 'Segoe UI', sans-serif; }
        .app-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: #020617; z-index: 100; display: flex; flex-direction: column; color: white; transition: background 0.3s, color 0.3s; overflow: hidden; }

        /* FINANZAS OPTIMIZADAS PARA 4 ITEMS */
        .finance-bar-pro { background: #064e3b; border-bottom: 2px solid #059669; display: flex; justify-content: space-around; padding: 6px 0; color: white; font-weight: 800; font-size: 8px; flex-shrink:0; text-align:center;}
        .fin-item { display:flex; flex-direction:column; align-items:center; }
        .fin-item span { font-family: monospace; font-size: 12px; margin-top:2px;}
        .fin-item.premium { color: #fbbf24; }

        .sponsor-presentation { display:flex; flex-direction:column; align-items:center; margin-bottom: 2vh; }
        .sponsor-tagline { color:#cbd5e1; font-size:12px; text-transform:uppercase; letter-spacing:2px; margin-bottom:1vh; font-weight:700; text-align:center;}
        .trans-logo-glow { height: 15vh; max-width: 80vw; object-fit: contain; background: white; padding: 10px; border-radius: 15px; border: 3px solid #fbbf24; box-shadow: 0 0 20px #fbbf24, inset 0 0 10px rgba(0,0,0,0.1); animation: flipInYApp 1s ease-out, pulse-glow-app 2s infinite alternate; }
        @keyframes flipInYApp { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
        @keyframes pulse-glow-app { from { box-shadow: 0 0 10px #fbbf24; } to { box-shadow: 0 0 30px #f59e0b, 0 0 10px white; } }

        .app-header { height: 50px; padding: 0 15px; background: #0f172a; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .app-logo { height: 28px; }
        .header-title { font-size: 14px; font-weight: 900; color: #94a3b8; }
        .header-controls { display: flex; gap: 15px; align-items: center;}
        .icon-btn { background: none; border: none; font-size: 22px; cursor: pointer; color: #64748b; padding: 0; transition:0.2s;}
        .icon-btn.active { color: #22c55e; transform: scale(1.1); }
        .theme-toggle { color: #fbbf24; }

        .conn-status { display: flex; align-items: center; justify-content: center; margin-right: 5px; }
        .pulse-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 5px #10b981; animation: pulse-green 2s infinite; }
        .pulse-dot.offline { background: #dc2626; animation: none; box-shadow: 0 0 5px #dc2626; }
        .icon-btn.auto-active { color: #a855f7; transform: scale(1.2); text-shadow: 0 0 10px rgba(168, 85, 247, 0.6); }
        
        .confetti { position: absolute; width: 12px; height: 12px; animation: fall linear forwards; opacity:0.9; z-index: 1;}
        @keyframes fall { to { transform: translateY(100vh) rotate(720deg); } }
        
        #p-login { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #020617; z-index: 200; display: flex; justify-content: center; align-items: center; padding: 20px; }
        .login-card { background: #1e293b; padding: 30px; border-radius: 20px; text-align: center; width: 100%; max-width: 400px; border: 1px solid #334155; }
        .login-input { width: 100%; padding: 15px; background: #0f172a; border: 2px solid #475569; color: white; font-size: 22px; text-align: center; border-radius: 12px; margin-bottom: 20px; }
        .login-btn { width: 100%; padding: 15px; background: #2563eb; color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: 900; cursor: pointer; }

        #p-card { display: none; flex-direction: column; height: 100%; width: 100%; flex: 1; overflow: hidden; }
        .info-bar-extended { height: 70px; background: #1e293b; padding: 0 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #334155; flex-shrink: 0; }
        .history-track { display: flex; gap: 5px; overflow: hidden; justify-content: flex-end; padding-right: 10px; }
        .h-ball { width: 35px; height: 35px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #94a3b8; border: 1px solid #475569; }
        .main-ball { width: 60px; height: 60px; background: #dc2626; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 0 15px rgba(220,38,38,0.6); position: relative; z-index: 10; }
        .mb-let { font-size: 12px; font-weight: bold; line-height: 1; margin-bottom: -2px; }
        .mb-num { font-size: 28px; font-weight: 900; line-height: 1; }
        .mode-strip { background: #0f172a; text-align: center; font-size: 12px; color: #10b981; font-weight: 900; padding: 4px 0; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid #1e293b; }

        .board-area { flex: 1; display: flex; justify-content: center; align-items: center; padding: 10px; overflow: hidden; }
        .bingo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; max-width: 450px; max-height: 100%; aspect-ratio: 1/1.1; background: #334155; padding: 5px; border-radius: 12px; }
        .gh { color: white; font-weight: 900; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 18px; }
        .b-col { background: #2563eb; } .i-col { background: #dc2626; } .n-col { background: #16a34a; } .g-col { background: #d97706; } .o-col { background: #7c3aed; }

        .gc { background: #ffffff; color: #000000; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; border: 1px solid #cbd5e1; cursor: pointer; position: relative; overflow:hidden;}
        @media (max-height: 600px) { .gc { font-size: 24px; } }
        .gc:active { transform: scale(0.95); }
        .gc.played { background: #10b981 !important; color: white !important; border-color: #059669 !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); }
        .gc.free { background: #fbbf24 !important; border-color: #fbbf24; font-size: 30px; color: black !important; }
        .gc.hint-active { border: 4px solid #f59e0b !important; z-index: 2; }
        
        .ripple { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, 0.2); transform: scale(0); animation: ripple-anim 0.4s linear; pointer-events: none; }
        .gc.played .ripple { background: rgba(255, 255, 255, 0.4); }
        @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

        .marquee-container { height: 60px; background: white; border-top: 4px solid #dc2626; display: flex; align-items: center; overflow: hidden; flex-shrink: 0; }
        .mq-content { display: inline-block; padding-left: 100%; animation: marquee 30s linear infinite; white-space: nowrap; }
        .mq-item { display: inline-flex; align-items: center; margin-right: 50px; color: #000; font-weight: 900; font-size: 24px; text-transform: uppercase; }
        .mq-img { height: 50px; width: auto; margin-right: 15px; }

        .control-footer { height: 80px; background: #0f172a; border-top: 1px solid #1e293b; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; padding: 0 10px; gap: 10px; flex-shrink: 0; }
        .nav-btn { height: 50px; background: #1e293b; color: white; border: 2px solid #334155; border-radius: 10px; font-size: 24px; cursor: pointer; }
        .btn-win { width: 100%; height: 55px; background: #dc2626; color: white; font-size: 24px; font-weight: 900; border: 3px solid white; border-radius: 50px; cursor: pointer; text-transform: uppercase; box-shadow: 0 5px 15px rgba(220, 38, 38, 0.5); animation: pulse-red 2s infinite; position:relative; z-index:2;}
        .serial-info { font-size: 12px; color: #64748b; margin-top: 4px; font-weight: bold; font-family: monospace; }

        .winner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #dc2626 !important; z-index: 2147483647 !important; justify-content: center; align-items: center; text-align: center; flex-direction: column; overflow:hidden;}
        .winner-content { color: white; width: 90%; max-width: 400px; position:relative; z-index:10;}
        .win-icon { font-size: 80px; margin-bottom: 20px; animation: bounce 1s infinite; }
        .win-title { font-size: 80px; font-weight: 900; margin: 0; text-shadow: 0 5px 20px rgba(0,0,0,0.3); animation: zoomBeat 1s infinite; }
        .win-subtitle { font-size: 20px; font-weight: 700; opacity: 0.8; margin-top: -10px; text-transform: uppercase; letter-spacing: 2px; }
        .win-serial { font-size: 24px; font-weight: 900; background: white; color: #dc2626; padding: 10px 20px; border-radius: 50px; margin: 20px auto; display: inline-block; box-shadow: 0 10px 20px rgba(0,0,0,0.3); transform: rotate(-2deg); }
        .win-instruction { font-size: 18px; margin-bottom: 20px; font-weight: 600; background: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 10px; display: inline-block; }
        .btn-close-win { background: white; border: none; color: #dc2626; padding: 15px 40px; border-radius: 30px; font-weight: 900; font-size: 18px; cursor: pointer; box-shadow: 0 5px 0 #991b1b; }
        .btn-close-win:active { transform: translateY(4px); box-shadow: none; }

        .countdown-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.98); z-index: 100001; justify-content: center; align-items: center; text-align: center; flex-direction: column; }
        .showtime-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 100000; justify-content: center; align-items: center; flex-direction: column; }
        .cd-title { font-size: 30px; color: #fbbf24; margin: 0; text-transform: uppercase; }
        .cd-number { font-size: 100px; font-weight: 900; color: white; line-height: 1; margin: 20px 0; animation: zoomBeat 1s infinite;}
        #showtime-title { color: #fbbf24; font-size: 24px; margin-bottom: 20px; text-transform: uppercase; }
        .showtime-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 200px; height: 200px; }
        .st-cell { background: #1e293b; border-radius: 4px; border: 1px solid #334155; }
        .st-cell.active { background: #10b981; box-shadow: 0 0 15px #10b981; border-color: #4ade80; }

        .light-mode .app-container { background: #f1f5f9; color: #0f172a; }
        .light-mode .app-header { background: #ffffff; border-bottom-color: #cbd5e1; }
        .light-mode .header-title { color: #334155; }
        .light-mode .info-bar-extended { background: #e2e8f0; border-bottom-color: #cbd5e1; }
        .light-mode .h-ball { background: #ffffff; color: #475569; }
        .light-mode .mode-strip { background: #f8fafc; border-bottom-color: #e2e8f0; color: #059669; }
        .light-mode .bingo-grid { background: #cbd5e1; border: 1px solid #94a3b8; }
        .light-mode .gc { background: #ffffff; color: #000000; border-color: #94a3b8; }
        .light-mode .gc.played { background: #10b981 !important; color: white !important; }
        .light-mode .control-footer { background: #ffffff; border-top-color: #cbd5e1; }
        .light-mode .nav-btn { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
        .light-mode #p-login { background: #f1f5f9; }
        .light-mode .login-card { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .light-mode .login-input { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
        .light-mode .finance-bar-pro { background: #dcfce7; border-color: #10b981; color: #064e3b; }
        .light-mode .fin-item.premium { color: #d97706; }

        @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
        @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
        @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        @keyframes zoomBeat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
    </style>

    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('body').children().not('script').hide(); 
        $('#sos-app-root').appendTo('body').show(); 
        $('html, body').css({ 'margin':0, 'padding':0, 'overflow':'hidden', 'height':'100%' }); 

        const API = "https:\/\/sospuravida.com\/BINGO\/wp-json\/sos-bingo\/v3\/";
        const SPONSORS_STR = "https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/MOLINA.jpg,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/LOGO-LOBITOS-PIZZA.png,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/LOBITOS-GAS.png,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/CEDI.png,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/WhatsApp-Image-2025-11-28-at-4.31.47-PM.jpeg,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/SUPER-MARIO.jpg,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/321.png,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/SUPERPRO.png,https:\/\/sospuravida.com\/BINGO\/wp-content\/uploads\/2026\/01\/SERVICENTRO-SAN-RAMON.jpg";
        const DEFAULT_LOGO = "https:\/\/sospuravida.com\/BINGO\/wp-content\/plugins\/sos-smart-bingo\/assets\/logo-sos.png";
        
        let myCards = [];
        let drawnNumbers = [];
        let lastGameMode = undefined; 
        let currentIndex = 0;
        let myQuery = '';
        let lastBallVal = '--';
        let isSoundOn = true;
        let hintsOn = false;
        let autoDaubOn = false; 
        let isLightMode = false;
        let userMarks = {}; 
        let hasShownWinnerModal = false;

        initMarquee();

        $('#btn-sound').click(function() { isSoundOn = !isSoundOn; $(this).text(isSoundOn ? '🔊' : '🔇').toggleClass('active'); });
        $('#btn-visual').click(function() { hintsOn = !hintsOn; $(this).toggleClass('active'); renderCard(); });
        $('#btn-autodaub').click(function() { autoDaubOn = !autoDaubOn; $(this).toggleClass('auto-active'); if(autoDaubOn) { renderCard(); } });
        $('#btn-theme').click(function() { isLightMode = !isLightMode; if(isLightMode) { $('.app-container').addClass('light-mode'); $(this).text('🌙'); } else { $('.app-container').removeClass('light-mode'); $(this).text('☀️'); } });

        window.addEventListener('beforeunload', function (e) { if (myCards.length > 0) { var msg = '¿Seguro?'; (e || window.event).returnValue = msg; return msg; } });

        $('#btn-enter').on('click', function(e) {
            e.preventDefault();
            const q = $('#p-cedula').val().trim();
            if(!q) return showError('Ingresa tu cédula.');
            $(this).text('CARGANDO...').prop('disabled', true); $('#login-error').hide();

            const searchURL = API + 'player/search?t=' + new Date().getTime();
            $.ajax({
                url: searchURL, method: 'POST', data: JSON.stringify({ query: q }), contentType: 'application/json', timeout: 15000,
                success: function(res) {
                    if(res.success && res.cards && res.cards.length > 0) {
                        myCards = res.cards; myQuery = q; updateUI(res);
                        $('#p-login').fadeOut(200, function() { $('#p-card').css('display', 'flex').hide().fadeIn(200); });
                        setInterval(syncData, 3000);
                    } else { resetLogin(); showError('No se encontraron cartones.'); }
                },
                error: function() { resetLogin(); showError('Error de conexión.'); }
            });
        });

        $('#btn-prev').click(function() { if(currentIndex > 0) { currentIndex--; renderCard(); } });
        $('#btn-next').click(function() { if(currentIndex < myCards.length - 1) { currentIndex++; renderCard(); } });

        $(document).on('click', '.gc', function(e) {
            if($(this).hasClass('free') || !$(this).text()) return;
            let ripple = $('<div class="ripple"></div>'); let offset = $(this).offset();
            ripple.css({top: e.pageY - offset.top, left: e.pageX - offset.left}); $(this).append(ripple);
            setTimeout(() => { ripple.remove(); }, 400);

            let num = parseInt($(this).text()); let currentSerial = $('#ui-serial').text();
            if (!userMarks[currentSerial]) userMarks[currentSerial] = [];
            
            if (userMarks[currentSerial].includes(num)) { userMarks[currentSerial] = userMarks[currentSerial].filter(n => n !== num); $(this).removeClass('played'); } 
            else { userMarks[currentSerial].push(num); $(this).addClass('played'); }
            if (window.navigator.vibrate) window.navigator.vibrate(35);
        });

        $('#btn-win').click(function() {
            if(confirm("¿GRITAR BINGO?")) {
                triggerWinScreen();
                let serial = $('#ui-serial').text();
                $.ajax({ url: API + 'game/claim', method: 'POST', data: JSON.stringify({ serial: serial }), contentType: 'application/json' });
            }
        });
        window.closeWinner = function() { $('#winner-screen').fadeOut(); }

        function triggerWinScreen() {
             let serial = $('#ui-serial').text();
             $('#win-serial-display').text(serial);
             $('#winner-screen').css('display', 'flex').hide().fadeIn();
             hasShownWinnerModal = true;
             shootConfetti(); 
             if(isSoundOn && window.speechSynthesis) window.speechSynthesis.speak(new SpeechSynthesisUtterance("¡Felicidades! ¡Ganaste!"));
             if(window.navigator.vibrate) window.navigator.vibrate([100,50,100,50,200]);
        }

        function shootConfetti() {
            const container = document.getElementById('confetti-container'); container.innerHTML = ''; 
            const colors = ['#f59e0b', '#10b981', '#3b82f6', '#ffffff'];
            for(let i=0; i<100; i++) {
                let conf = document.createElement('div'); conf.classList.add('confetti');
                conf.style.left = Math.random() * 100 + 'vw'; conf.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                conf.style.animationDuration = (Math.random() * 3 + 2) + 's'; conf.style.animationDelay = (Math.random() * 1) + 's';
                container.appendChild(conf);
            }
        }

        function syncData() {
            const syncURL = API + 'game/state?nocache=' + new Date().getTime();
            $.ajax({
                url: syncURL, method: 'GET', cache: false, timeout: 5000,
                success: function(res) {
                    $('#conn-status .pulse-dot').removeClass('offline'); 
                    if(res.success) {
                        // TRANSPARENCIA FINANCIERA EN LA APP 60-30-10
                        if(res.recaudacion) {
                            let rec = parseFloat(res.recaudacion) || 0;
                            $('#app-rec-total').text('₡' + rec.toLocaleString('es-CR'));
                            $('#app-rec-premio').text('₡' + (rec * 0.60).toLocaleString('es-CR'));
                            $('#app-rec-cr').text('₡' + (rec * 0.30).toLocaleString('es-CR'));
                            $('#app-rec-acu').text('₡' + (rec * 0.10).toLocaleString('es-CR'));
                        }

                        // LOGOS
                        let logoTrans = (res.transition_sponsor && res.transition_sponsor.trim() !== '') ? res.transition_sponsor : DEFAULT_LOGO;
                        $('#player-trans-logo, #showtime-trans-logo').attr('src', logoTrans).on('error', function() { $(this).attr('src', DEFAULT_LOGO); });
                        
                        let logoWin = (res.winner_sponsor && res.winner_sponsor.trim() !== '') ? res.winner_sponsor : DEFAULT_LOGO;
                        $('#player-winner-logo').attr('src', logoWin).on('error', function() { $(this).attr('src', DEFAULT_LOGO); });

                        let currentMode = "JUEGO LIBRE";
                        if (res.mode && res.mode.toUpperCase() !== 'UNDEFINED') currentMode = res.mode;
                        else if (res.game_mode && res.game_mode.toUpperCase() !== 'UNDEFINED') currentMode = res.game_mode;
                        let cleanMode = currentMode.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
                        if (lastGameMode !== undefined && lastGameMode !== cleanMode) { startCountdown(cleanMode); }
                        lastGameMode = cleanMode;

                        let serverDrawn = res.called || [];
                        if (serverDrawn.length === 0) { userMarks = {}; hasShownWinnerModal = false; } 
                        
                        drawnNumbers = serverDrawn.map(n => parseInt(n));
                        $('#ui-mode').text(cleanMode); $('#ui-total').text(myCards.length);

                        if(drawnNumbers.length > 0) {
                            let curr = drawnNumbers[drawnNumbers.length - 1]; 
                            if(curr !== lastBallVal) {
                                lastBallVal = curr; let l = getLetter(curr);
                                $('#ui-num').text(curr); $('#ui-let').text(l); 
                                let historyHtml = '';
                                if(drawnNumbers.length > 1) {
                                    let hist = drawnNumbers.slice(Math.max(0, drawnNumbers.length - 6), drawnNumbers.length - 1).reverse();
                                    hist.forEach(n => { historyHtml += `<div class="h-ball">${n}</div>`; });
                                }
                                $('#ui-history').html(historyHtml);
                                $('.main-ball').addClass('pop-effect'); setTimeout(() => $('.main-ball').removeClass('pop-effect'), 300);
                                if (isSoundOn && window.speechSynthesis) { window.speechSynthesis.cancel(); window.speechSynthesis.speak(new SpeechSynthesisUtterance(`Letra ${l}, ${curr}`)); }
                            }
                        } else { $('#ui-num').text('--'); $('#ui-let').text('-'); $('#ui-history').html('<div class="mini-ball-empty"></div>'); lastBallVal = '--'; }
                        
                        renderCard(); 

                        if(myCards.length > 0 && !hasShownWinnerModal && drawnNumbers.length >= 4) {
                            $.ajax({ url: API + 'game/check-winner', method: 'POST', data: JSON.stringify({ serial: myCards[currentIndex].serial }), contentType: 'application/json', success: function(resWin) { if(resWin.winner && !hasShownWinnerModal) triggerWinScreen(); } });
                        }
                    }
                },
                error: function() { $('#conn-status .pulse-dot').addClass('offline'); }
            });
        }

        function updateUI(res) {
            drawnNumbers = res.drawn || [];
            let currentMode = "JUEGO LIBRE"; if (res.mode && res.mode.toUpperCase() !== 'UNDEFINED') currentMode = res.mode;
            lastGameMode = currentMode.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
            
            let logoT = (res.transition_sponsor && res.transition_sponsor.trim() !== '') ? res.transition_sponsor : DEFAULT_LOGO;
            $('#player-trans-logo, #showtime-trans-logo').attr('src', logoT).on('error', function() { $(this).attr('src', DEFAULT_LOGO); });
            
            let logoW = (res.winner_sponsor && res.winner_sponsor.trim() !== '') ? res.winner_sponsor : DEFAULT_LOGO;
            $('#player-winner-logo').attr('src', logoW).on('error', function() { $(this).attr('src', DEFAULT_LOGO); });

            renderCard();
        }

        function renderCard() {
            if(myCards.length === 0) return;
            const card = myCards[currentIndex]; const serial = card.serial;
            $('#ui-idx').text(currentIndex + 1); $('#ui-serial').text(serial);
            $('#btn-prev').prop('disabled', currentIndex === 0); $('#btn-next').prop('disabled', currentIndex === myCards.length - 1);
            $('#ui-grid .gc').remove(); 

            let rawNums = (card.matrix && card.matrix.numbers) ? card.matrix.numbers : Object.values(card.matrix);
            let html = '';
            if(autoDaubOn) { if(!userMarks[serial]) userMarks[serial] = []; drawnNumbers.forEach(n => { if(rawNums.includes(n) && !userMarks[serial].includes(n)) userMarks[serial].push(n); }); }
            let currentMarks = userMarks[serial] || [];

            for(let row = 0; row < 5; row++) {
                for(let col = 0; col < 5; col++) {
                    let dataIndex = (col * 5) + row; let numVal = parseInt(rawNums[dataIndex] || '');
                    let cls = 'gc'; let txt = rawNums[dataIndex] || ''; let isFree = (col === 2 && row === 2);
                    if (!isFree && !isNaN(numVal) && hintsOn && drawnNumbers.includes(numVal)) cls += ' hint-active';
                    if (isFree || isNaN(numVal)) { txt = '★'; cls += ' free'; } else if (currentMarks.includes(numVal)) { cls += ' played'; }
                    html += `<div class="${cls}">${txt}</div>`;
                }
            }
            $('#ui-grid').append(html);
        }

        function startCountdown(mode) {
            $('#countdown-overlay').css('display', 'flex').hide().fadeIn(); let count = 10; $('#cd-number').css('font-size', '100px').text(count);
            let cdInterval = setInterval(() => {
                count--; if(count > 0) { $('#cd-number').text(count); } else {
                    clearInterval(cdInterval); $('#cd-number').css('font-size', '50px').text("¡INICIAMOS!");
                    setTimeout(() => { $('#countdown-overlay').fadeOut(); startShowtime(mode); }, 1000);
                }
            }, 1000);
        }

        function startShowtime(mode) {
            $('#showtime-overlay').css('display', 'flex').hide().fadeIn(); $('#showtime-title').text("JUGAMOS: " + mode);
            let grid = $('#showtime-grid'); grid.empty(); for(let i=0; i<25; i++) grid.append('<div class="st-cell" id="st-'+i+'"></div>');
            let pattern = []; let m = mode.toUpperCase();
            if(m.includes('ESQUINAS')) pattern = [0,4,20,24]; else if(m.includes('X')) pattern = [0,4,6,8,12,16,18,20,24]; else if(m.includes('H')) pattern = [0,5,10,15,20, 4,9,14,19,24, 11,12,13]; else if(m.includes('MARCO')) pattern = [0,1,2,3,4, 5,9, 10,14, 15,19, 20,21,22,23,24]; else pattern = Array.from({length:25}, (_, i) => i);
            pattern.forEach(idx => $('#st-'+idx).addClass('active')); setTimeout(() => { $('#showtime-overlay').fadeOut(); }, 7000);
        }

        function getLetter(n) { return n<=15?'B':n<=30?'I':n<=45?'N':n<=60?'G':'O'; }
        function resetLogin() { $('#btn-enter').text('INGRESAR 🚀').prop('disabled', false); }
        function showError(t) { $('#login-error').html(t).slideDown(); }
        function initMarquee() {
            let list = (SPONSORS_STR || "").split(','); let h = '';
            list.forEach(s => { s = s.trim(); if(!s) return; const isUrl = s.toLowerCase().startsWith('http') || /\.(jpg|png|svg)/i.test(s); h += isUrl ? `<span class="mq-item"><img src="${s}" class="mq-img" onerror="this.style.display='none'"></span>` : `<span class="mq-item">${s}</span>`; });
            $('#mq-text').html(h + h + h);
        }
        window.toggleFS = function() { if (!document.fullscreenElement) document.documentElement.requestFullscreen(); else if (document.exitFullscreen) document.exitFullscreen(); }
    });
    </script>
    {"id":6,"date":"2026-01-17T00:32:48","date_gmt":"2026-01-17T00:32:48","guid":{"rendered":"https:\/\/sospuravida.com\/BINGO\/?page_id=6"},"modified":"2026-01-28T00:27:40","modified_gmt":"2026-01-28T06:27:40","slug":"jugador","status":"publish","type":"page","link":"https:\/\/sospuravida.com\/BINGO\/","title":{"rendered":"JUGADOR"},"content":{"rendered":"<section  class='av_textblock_section av-av_textblock-79c819409ca96efc718cf12859ce1a11 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" >\n<\/div><\/section>\n<section  class='av_textblock_section av-mkxn5iu6-0b0e7f8cf2dc17d5cb4e663fb12ceca6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p style=\"text-align: center;\">Power By SOSPURAVIDA.COM<\/p>\n<p style=\"text-align: center;\">Dise\u00f1o: Luis Porras V | Tel: 6325-3509<\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":3,"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/pages\/6\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/sospuravida.com\/BINGO\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}