// La Paguita - Display Principal

function updateDisplay() {
    if (!gameState) return;

    calcularProduccion();
    actualizarNivelVida();

    // Header
    updateHeader();

    // Recursos
    updateRecursos();

    // Barras comparativas
    updateComparativa();

    // Alerta mediática / inspección
    updateAlertaLabel();
    updateAlerta();

    // Paneles según tab activo
    updateActivePanel();

    // Ticker de noticias
    updateTicker();
}

function updateHeader() {
    const personaje = getPersonajeActual();
    const fase = getFaseActual();

    const playerIcon = document.getElementById('player-icon');
    const playerName = document.getElementById('player-name');
    const faseDisplay = document.getElementById('fase-display');
    const trimestreDisplay = document.getElementById('trimestre-display');
    const faseBar = document.getElementById('fase-bar');
    const totalBar = document.getElementById('total-bar');

    if (playerIcon) playerIcon.textContent = personaje.icono;
    if (playerName) playerName.textContent = personaje.nombre;
    if (faseDisplay) faseDisplay.textContent = `${fase.emoji} ${fase.nombre}`;
    if (trimestreDisplay) trimestreDisplay.textContent = `Mes ${gameState.mesActual}`;

    if (faseBar) faseBar.style.width = (getProgresoFase() * 100) + '%';
    if (totalBar) totalBar.style.width = (getProgresoTotal() * 100) + '%';
    
    // Avanzar Fase Button Visibility
    const advancePhaseBtn = document.getElementById('advance-phase-btn');
    const clickPaguitasBtn = document.getElementById('click-paguitas-btn');
    if (advancePhaseBtn && clickPaguitasBtn) {
        const siguienteFase = FASES[gameState.faseActual];
        if (siguienteFase && gameState.papeles >= siguienteFase.papelesRequeridos) {
            advancePhaseBtn.style.display = 'inline-flex';
            advancePhaseBtn.textContent = `🟢 AVANZAR FASE: ${siguienteFase.nombre}`;
            clickPaguitasBtn.style.display = 'none';

            // Hint: puede avanzar de fase
            if (gameState.hints && !gameState.hints.puedeAvanzar) {
                gameState.hints.puedeAvanzar = true;
                mostrarHint('¡Tienes suficientes papeles! Pulsa el botón dorado para avanzar de fase.');
            }
        } else {
            advancePhaseBtn.style.display = 'none';
            clickPaguitasBtn.style.display = 'inline-flex';
        }
    }
}

function updateRecursos() {
    const paguitas = document.getElementById('paguitas-value');
    const papeles = document.getElementById('papeles-value');
    const presupuesto = document.getElementById('presupuesto-value');
    const poblacion = document.getElementById('poblacion-value');
    const produccionEl = document.getElementById('produccion-value');

    if (paguitas) paguitas.textContent = formatNumber(gameState.paguitas) + ' 💶';
    
    if (papeles) {
        const siguienteFase = FASES[gameState.faseActual];
        const rep = siguienteFase ? siguienteFase.papelesRequeridos : 'MAX';
        // Solo mostramos enteros para los papeles
        papeles.textContent = `${Math.floor(gameState.papeles)}/${rep} 📄`;
    }
    
    if (presupuesto) {
        presupuesto.textContent = Math.max(0, gameState.presupuestoEspanol).toFixed(3) + '%';
        presupuesto.className = 'resource-val ' + (gameState.presupuestoEspanol > 50 ? 'good' : gameState.presupuestoEspanol > 20 ? 'warn' : 'danger');
    }
    if (poblacion) {
        const ratio = (gameState.poblacionInmigrante / gameState.poblacionNativa * 100).toFixed(1);
        poblacion.textContent = `${formatNumber(gameState.poblacionInmigrante)} (${ratio}%)`;
    }
    if (produccionEl) {
        const pappsDisplay = gameState.papps > 0 ? ` | +${gameState.papps.toFixed(1)} 📄/s` : '';
        let prodText = `+${formatNumber(gameState.vps)} 💶/s${pappsDisplay} | +${formatNumber(gameState.pps)} 👥/s`;

        // Show active debuffs
        if (gameState.debuffs && gameState.debuffs.length > 0) {
            const debuffTags = gameState.debuffs.map(d => d.emoji + ' ' + d.nombre).join(' · ');
            produccionEl.innerHTML = prodText + `<br><span class="debuff-indicator">${debuffTags}</span>`;
        } else {
            produccionEl.textContent = prodText;
        }
    }
}

function updateComparativa() {
    const tuBarra = document.getElementById('tu-nivel-bar');
    const suBarra = document.getElementById('su-nivel-bar');
    const tuValor = document.getElementById('tu-nivel-valor');
    const suValor = document.getElementById('su-nivel-valor');
    const fraseEl = document.getElementById('espanolito-frase');
    const tuLabel = document.querySelector('#comparativa .comp-row:first-child .comp-label');
    const suLabel = document.querySelector('#comparativa .comp-row:nth-child(2) .comp-label');

    const personaje = getPersonajeActual();
    const esNativo = esPersonajeNativo(personaje);

    if (tuLabel) tuLabel.textContent = esNativo ? '🛋️ Tú' : '🌍 Tú';
    if (suLabel) suLabel.textContent = esNativo ? '💼 Currito' : '😤 Españolito';

    if (tuBarra) tuBarra.style.width = gameState.nivelVidaJugador + '%';
    if (suBarra) suBarra.style.width = gameState.nivelVidaEspanolito + '%';
    if (tuValor) tuValor.textContent = Math.floor(gameState.nivelVidaJugador);
    if (suValor) suValor.textContent = Math.floor(gameState.nivelVidaEspanolito);

    // Frase aleatoria (cambia cada 15 segundos)
    if (fraseEl && gameState.ticksTotales % (TICKS_POR_SEGUNDO * 15) === 0) {
        fraseEl.textContent = `"${getFraseEspanolito()}"`;
    }
}

function updateAlertaLabel() {
    const personaje = getPersonajeActual();
    const esNativo = esPersonajeNativo(personaje);
    const labelEl = document.querySelector('#alerta-container .alerta-header span:first-child');
    if (labelEl) {
        labelEl.textContent = esNativo ? '🔍 Alerta de Inspección' : '📺 Alerta Mediática';
    }
}

function updateAlerta() {
    const alertaBar = document.getElementById('alerta-bar');
    const alertaValor = document.getElementById('alerta-valor');
    const alertaContainer = document.getElementById('alerta-container');

    if (alertaBar) {
        alertaBar.style.width = gameState.alertaMediatica + '%';
        alertaBar.className = 'alerta-fill ' +
            (gameState.alertaMediatica >= ALERTA_UMBRAL_PELIGRO ? 'peligro' :
             gameState.alertaMediatica >= 40 ? 'medio' : 'bajo');
    }
    if (alertaValor) {
        alertaValor.textContent = gameState.inmunidadPolitica
            ? Math.floor(gameState.alertaMediatica) + '% 🛡️'
            : Math.floor(gameState.alertaMediatica) + '%';
    }
    if (alertaContainer) {
        alertaContainer.classList.toggle('peligro', gameState.alertaMediatica >= ALERTA_UMBRAL_PELIGRO && !gameState.inmunidadPolitica);
    }

    // Hints de alerta
    if (gameState.hints) {
        if (gameState.alertaMediatica >= 50 && !gameState.hints.alertaAlta) {
            gameState.hints.alertaAlta = true;
            mostrarHint('⚠️ La alerta mediática sube. Si llega a 100% puedes ser deportado. ¡Baja el perfil!');
        }
        if (gameState.alertaMediatica >= 70 && !gameState.hints.alertaPeligro) {
            gameState.hints.alertaPeligro = true;
            mostrarHint('🚨 ¡PELIGRO! Alerta muy alta. Deja las acciones arriesgadas o serás deportado.');
        }
    }
}

function updateActivePanel() {
    const activeTab = document.querySelector('.nav-item.active');
    if (!activeTab) return;

    const tabName = activeTab.dataset.tab;

    switch (tabName) {
        case 'ayudas': renderAyudas(); break;
        case 'acciones': renderAcciones(); break;
        case 'stats': renderStats(); break;
        case 'poblacion': renderPoblacion(); break;
    }
}

function _buildRenovacionHTML(ayuda, nivelActual) {
    if (nivelActual <= 0) return '';
    if (typeof DIFICULTAD_AFK_ACTIVA === 'undefined' || !DIFICULTAD_AFK_ACTIVA.decayAyudas) return '';

    const congelada = !!(gameState.ayudasCongeladas && gameState.ayudasCongeladas[ayuda.id]);
    const lastTick = (gameState.ayudasRenovacion && gameState.ayudasRenovacion[ayuda.id]) || gameState.ticksTotales;
    const elapsed = gameState.ticksTotales - lastTick;
    const pct = Math.min(100, Math.max(0, (elapsed / AYUDA_DECAY_TICKS) * 100));
    const coste = costeRenovacionAyuda(ayuda);
    const canAfford = gameState.papeles >= coste;

    const fillClass = congelada ? 'frozen' : (elapsed >= AYUDA_WARNING_TICKS ? 'warning' : '');
    const btnLabel = congelada ? '🔄 Descongelar' : '🔄 Renovar';

    return `
        <div class="ayuda-renovacion">
            <div class="ayuda-renov-bar"><div class="ayuda-renov-fill ${fillClass}" style="width:${pct}%"></div></div>
            ${congelada ? '<div class="ayuda-renov-label frozen">❄️ CONGELADA — no produce</div>' : ''}
            <button class="btn btn--sm btn--renovar ${canAfford ? '' : 'btn--disabled'}"
                    onclick="handleRenovarAyuda('${ayuda.id}')" ${canAfford ? '' : 'disabled'}>
                ${btnLabel} (${coste}📄)
            </button>
        </div>
    `;
}

function renderAyudas() {
    const container = document.getElementById('ayudas-list');
    if (!container) return;

    const disponibles = getAyudasDisponibles(gameState.faseActual);

    container.innerHTML = disponibles.map(ayuda => {
        const nivelActual = gameState.ayudasActivas[ayuda.id] || 0;
        const estado = getEstadoAyuda(ayuda);
        const produccion = ayuda.produccion + (ayuda.mejoraPorNivel * nivelActual);
        const congelada = !!(gameState.ayudasCongeladas && gameState.ayudasCongeladas[ayuda.id]);
        const renovHTML = _buildRenovacionHTML(ayuda, nivelActual);
        const frozenCls = congelada ? 'frozen' : '';

        // Maxed
        if (estado.estado === 'maxed') {
            return `
            <div class="ayuda-card maxed activa ${frozenCls}">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">MAX</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-stats">
                    <span class="ayuda-prod">+${produccion} 💶/s</span>
                    <span class="ayuda-drain">-${(ayuda.drenaPresupuesto * Math.pow(COSTE_SCALING, nivelActual)).toFixed(3)}% 🇪🇸</span>
                    ${ayuda.bonusPoblacion ? `<span class="ayuda-pop">+${formatNumber(ayuda.bonusPoblacion)} 👥</span>` : ''}
                    ${ayuda.bonusPapeles ? `<span class="ayuda-pop">+${ayuda.bonusPapeles} 📄/s</span>` : ''}
                </div>
                <div class="ayuda-maxed-label">MÁXIMO</div>
                ${renovHTML}
            </div>`;
        }

        // Blocked states
        if (estado.estado === 'bloqueada_cantidad') {
            return `
            <div class="ayuda-card disabled locked">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">🔒</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-lock-msg">🔒 Necesitas ${estado.requeridas} ayudas activas (tienes ${estado.tienes})</div>
            </div>`;
        }

        if (estado.estado === 'bloqueada_requisitos') {
            return `
            <div class="ayuda-card disabled locked">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">🔒</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-lock-msg">📋 Requisito: ${estado.faltan.join(', ')}</div>
            </div>`;
        }

        // Cooldown
        if (estado.estado === 'cooldown') {
            const secs = (estado.ticks / TICKS_POR_SEGUNDO).toFixed(0);
            return `
            <div class="ayuda-card disabled cooldown ${nivelActual > 0 ? 'activa' : ''} ${frozenCls}">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">Nv.${nivelActual}/${ayuda.maxNivel}</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <button class="btn btn--ayuda btn--disabled" disabled>⏳ Tramitando... ${secs}s</button>
                ${renovHTML}
            </div>`;
        }

        // Alert blocked
        if (estado.estado === 'bloqueada_alerta') {
            return `
            <div class="ayuda-card disabled ${nivelActual > 0 ? 'activa' : ''} ${frozenCls}">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">Nv.${nivelActual}/${ayuda.maxNivel}</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-lock-msg">📺 Alerta muy alta (${estado.actual}% > ${estado.limite}%)</div>
                ${renovHTML}
            </div>`;
        }

        // VPS blocked (income cap)
        if (estado.estado === 'bloqueada_vps') {
            return `
            <div class="ayuda-card disabled ${nivelActual > 0 ? 'activa' : ''} ${frozenCls}">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">Nv.${nivelActual}/${ayuda.maxNivel}</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-lock-msg">💰 Ganas demasiado (${estado.actual} > ${estado.limite} 💶/s)</div>
            </div>`;
        }

        // Available (can afford or not)
        const costePaguitas = estado.costePaguitas || Math.ceil(ayuda.costePaguitas * Math.pow(COSTE_SCALING, nivelActual));
        const costePapeles = estado.costePapeles || Math.ceil(ayuda.costePapeles * Math.pow(COSTE_SCALING, nivelActual));
        const canAfford = estado.estado === 'disponible';
        const prob = ayuda.probAprobacion || 1.0;
        const probPct = Math.round(prob * 100);

        // Build requirement tags
        let reqTags = '';
        if (prob < 1.0) {
            const probClass = prob >= 0.7 ? 'prob-alta' : prob >= 0.5 ? 'prob-media' : 'prob-baja';
            reqTags += `<span class="ayuda-req ${probClass}">🎲 ${probPct}%</span>`;
        }
        if (ayuda.limiteAlerta) reqTags += `<span class="ayuda-req">📺 &lt;${ayuda.limiteAlerta}%</span>`;
        if (ayuda.limiteVps) reqTags += `<span class="ayuda-req">💰 &lt;${ayuda.limiteVps}/s</span>`;
        if (ayuda.requisitos && ayuda.requisitos.length > 0 && nivelActual === 0) {
            const reqNames = ayuda.requisitos.map(id => { const a = getAyudaById(id); return a ? a.emoji : ''; }).join('');
            reqTags += `<span class="ayuda-req">📋 ${reqNames}</span>`;
        }
        if (ayuda.requiereAccionPrevia && ayuda.requiereAccionPrevia.length > 0 && nivelActual === 0) {
            const reqNames = ayuda.requiereAccionPrevia.map(id => { const a = getAccionById(id); return a ? a.emoji : ''; }).join('');
            reqTags += `<span class="ayuda-req">🎯 ${reqNames}</span>`;
        }

        return `
            <div class="ayuda-card ${nivelActual > 0 ? 'activa' : ''} ${!canAfford ? 'disabled' : ''} ${frozenCls}">
                <div class="ayuda-header">
                    <span class="ayuda-emoji">${ayuda.emoji}</span>
                    <div class="ayuda-title">
                        <span class="ayuda-nombre">${ayuda.nombre}</span>
                        <span class="ayuda-nivel">Nv.${nivelActual}/${ayuda.maxNivel}</span>
                    </div>
                </div>
                <p class="ayuda-desc">${ayuda.descripcion}</p>
                <div class="ayuda-stats">
                    <span class="ayuda-prod">+${produccion} 💶/s</span>
                    <span class="ayuda-drain">-${(ayuda.drenaPresupuesto * Math.pow(COSTE_SCALING, nivelActual)).toFixed(3)}% 🇪🇸</span>
                    ${ayuda.bonusPoblacion ? `<span class="ayuda-pop">+${formatNumber(ayuda.bonusPoblacion)} 👥</span>` : ''}
                    ${ayuda.bonusPapeles ? `<span class="ayuda-pop">+${ayuda.bonusPapeles} 📄/s</span>` : ''}
                </div>
                ${reqTags ? `<div class="ayuda-reqs">${reqTags}</div>` : ''}
                <button class="btn btn--ayuda ${canAfford ? '' : 'btn--disabled'}"
                        onclick="handleComprarAyuda('${ayuda.id}')"
                        ${canAfford ? '' : 'disabled'}>
                    ${costePaguitas > 0 ? costePaguitas + '💶' : ''}
                    ${costePapeles > 0 ? costePapeles + '📄' : ''}
                    ${costePaguitas === 0 && costePapeles === 0 ? 'GRATIS' : ''}
                    → Solicitar
                </button>
                ${renovHTML}
            </div>
        `;
    }).join('');
}

function renderAcciones() {
    const container = document.getElementById('acciones-list');
    if (!container) return;

    const disponibles = getAccionesDisponibles(gameState.faseActual);

    container.innerHTML = disponibles.map(accion => {
        const enCooldown = gameState.cooldowns[accion.id] && gameState.cooldowns[accion.id] > 0;
        const canAfford = gameState.paguitas >= accion.costePaguitas && (!accion.costePapeles || gameState.papeles >= accion.costePapeles);
        
        let costText = "";
        if (accion.costePaguitas > 0) costText += accion.costePaguitas + "💶 ";
        if (accion.costePapeles > 0) costText += accion.costePapeles + "📄 ";
        if (costText === "") costText = "Hacer "; else costText += "→ Hacer";

        return `
            <div class="accion-card ${enCooldown ? 'cooldown' : ''} ${!canAfford ? 'disabled' : ''}">
                <div class="accion-header">
                    <span class="accion-emoji">${accion.emoji}</span>
                    <span class="accion-nombre">${accion.nombre}</span>
                </div>
                <p class="accion-desc">${accion.descripcion}</p>
                <div class="accion-efectos">
                    ${accion.recompensaPaguitas > 0 ? `<span class="efecto-pos">+${accion.recompensaPaguitas}💶</span>` : ''}
                    ${accion.recompensaPaguitas < 0 ? `<span class="efecto-neg">${accion.recompensaPaguitas}💶</span>` : ''}
                    ${accion.recompensaPapeles > 0 ? `<span class="efecto-pos">+${accion.recompensaPapeles}📄</span>` : ''}
                    ${accion.subeAlerta > 0 ? `<span class="efecto-neg">+${accion.subeAlerta}📺</span>` : ''}
                    ${accion.subeAlerta < 0 ? `<span class="efecto-pos">${accion.subeAlerta}📺</span>` : ''}
                    ${accion.riesgo ? '<span class="efecto-riesgo">⚠️ Riesgo</span>' : ''}
                </div>
                <button class="btn btn--accion ${enCooldown || !canAfford ? 'btn--disabled' : ''}"
                        onclick="handleEjecutarAccion('${accion.id}')"
                        ${enCooldown || !canAfford ? 'disabled' : ''}>
                    ${enCooldown ? `⏳ ${(gameState.cooldowns[accion.id] / TICKS_POR_SEGUNDO).toFixed(0)}s` : costText}
                </button>
            </div>
        `;
    }).join('');
}

function renderPoblacion() {
    const container = document.getElementById('poblacion-panel-content');
    if (!container) return;

    const ratio = gameState.poblacionInmigrante / gameState.poblacionNativa;
    const porcentaje = (ratio * 100).toFixed(2);

    container.innerHTML = `
        <div class="pop-header">
            <h4>📊 Balance Demográfico</h4>
        </div>
        <div class="pop-bars">
            <div class="pop-row">
                <span class="pop-label">🇪🇸 Españoles nativos</span>
                <div class="pop-bar-container">
                    <div class="pop-bar nativo" style="width: ${Math.min(100, (gameState.poblacionNativa / POBLACION_NATIVA_INICIAL) * 100)}%"></div>
                </div>
                <span class="pop-value">${formatNumber(gameState.poblacionNativa)}</span>
            </div>
            <div class="pop-row">
                <span class="pop-label">🌍 Inmigrantes</span>
                <div class="pop-bar-container">
                    <div class="pop-bar inmigrante" style="width: ${Math.min(100, porcentaje)}%"></div>
                </div>
                <span class="pop-value">${formatNumber(gameState.poblacionInmigrante)}</span>
            </div>
        </div>
        <div class="pop-ratio">
            <span class="ratio-label">Ratio</span>
            <span class="ratio-value ${ratio >= 1 ? 'victoria' : ''}">${porcentaje}%</span>
        </div>
        <div class="pop-info">
            <p>+${formatNumber(gameState.pps)} 👥/s por reagrupación</p>
            <p>Meta: superar ${formatNumber(gameState.poblacionNativa)} españoles</p>
        </div>
    `;
}

function renderStats() {
    const container = document.getElementById('stats-panel-content');
    if (!container) return;

    const score = calcularPuntuacion();
    const rating = getRating(score);

    container.innerHTML = `
        <div class="stats-grid">
            <div class="stat-item">
                <span class="stat-label">Puntuación</span>
                <span class="stat-value">${formatNumber(score)}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Rating</span>
                <span class="stat-value">${rating.emoji} ${rating.title}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Paguitas generadas</span>
                <span class="stat-value">${formatNumber(gameState.totalPaguitasGeneradas)} 💶</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Máx. paguitas</span>
                <span class="stat-value">${formatNumber(gameState.stats.maxPaguitas)} 💶</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Ayudas reclamadas</span>
                <span class="stat-value">${gameState.stats.ayudasReclamadas}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Acciones ejecutadas</span>
                <span class="stat-value">${gameState.stats.accionesEjecutadas}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Eventos vistos</span>
                <span class="stat-value">${gameState.stats.eventosVistos}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Presupuesto drenado</span>
                <span class="stat-value">${gameState.stats.totalPresupuestoDrenado.toFixed(3)}%</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Población traída</span>
                <span class="stat-value">${formatNumber(gameState.stats.totalPoblacionTraida)}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Casi deportado</span>
                <span class="stat-value">${gameState.stats.vecesDeportadoCasi}x</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Logros</span>
                <span class="stat-value">${gameState.logrosObtenidos.length}/${LOGROS.length}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Trampas caídas</span>
                <span class="stat-value">${Object.keys(gameState.trampasActivadas || {}).length} 🪤</span>
            </div>
            ${(gameState.debuffs && gameState.debuffs.length > 0) ? gameState.debuffs.map(d => `
            <div class="stat-item">
                <span class="stat-label">${d.emoji} ${d.nombre}</span>
                <span class="stat-value" style="color: var(--color-danger)">ACTIVO</span>
            </div>
            `).join('') : ''}
            ${gameState.stats.minijuegos && gameState.stats.minijuegos.total > 0 ? `
            <div class="stat-item stat-section">
                <span class="stat-label">🎮 Minijuegos</span>
                <span class="stat-value">${gameState.stats.minijuegos.total} jugados</span>
            </div>
            ${gameState.stats.minijuegos.huye_policia ? `
            <div class="stat-item">
                <span class="stat-label">🚔 Huidas de policía</span>
                <span class="stat-value">${gameState.stats.minijuegos.huye_policia.jugados} (⭐${gameState.stats.minijuegos.huye_policia.perfectos})</span>
            </div>` : ''}
            ${gameState.stats.minijuegos.top_manta ? `
            <div class="stat-item">
                <span class="stat-label">👟 Top Manta</span>
                <span class="stat-value">${gameState.stats.minijuegos.top_manta.jugados} (max ${gameState.stats.minijuegos._topMantaMaxEarnings || 0}💶)</span>
            </div>` : ''}
            ${gameState.stats.minijuegos.cola_extranjeria ? `
            <div class="stat-item">
                <span class="stat-label">🏛️ Colas</span>
                <span class="stat-value">${gameState.stats.minijuegos.cola_extranjeria.jugados} (⭐${gameState.stats.minijuegos.cola_extranjeria.perfectos})</span>
            </div>` : ''}
            ` : ''}
        </div>
    `;
}

function updateTicker() {
    const ticker = document.getElementById('news-ticker-text');
    if (!ticker) return;

    // Update ticker every 10 seconds
    if (gameState.ticksTotales % (TICKS_POR_SEGUNDO * 10) === 0 || !ticker.textContent) {
        ticker.textContent = getTitularPrensa();
    }
}

// === UTILITY ===
function formatNumber(n) {
    if (n >= 1000000000) return (n / 1000000000).toFixed(1) + 'B';
    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
    if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
    return Math.floor(n).toString();
}

// === NAVIGATION ===
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const panels = document.querySelectorAll('.game-panel');

    navItems.forEach(item => {
        item.addEventListener('click', () => {
            // Deactivate all
            navItems.forEach(n => {
                n.classList.remove('active');
                n.setAttribute('aria-selected', 'false');
            });
            panels.forEach(p => p.classList.remove('active'));

            // Activate clicked
            item.classList.add('active');
            item.setAttribute('aria-selected', 'true');

            const tabName = item.dataset.tab;
            const panel = document.getElementById(tabName + '-panel');
            if (panel) panel.classList.add('active');

            // Render the panel
            updateActivePanel();
        });
    });
}

function showStartScreen() {
    const start = document.getElementById('start-screen');
    const game = document.getElementById('game-container');
    if (start) start.style.display = 'flex';
    if (game) game.style.display = 'none';
}

function hideStartScreen() {
    const start = document.getElementById('start-screen');
    const game = document.getElementById('game-container');
    if (start) start.style.display = 'none';
    if (game) game.style.display = 'flex';
}
