<!-- ============================================================================
   InsidePlay - Widget de Jogadores Online
   Adicione este código no template do site onde deseja exibir o contador
   
   1. Inclua o script:
   <script src="/admin/api/players-widget.js"></script>
   
   2. Adicione o elemento onde será renderizado:
   <div id="ragna-players"></div>
   
   3. (Opcional) Adicione o CSS abaixo no seu stylesheet
   ============================================================================ */

/* ===== Widget de Jogadores Online - InsidePlay ===== */
.ragna-players-widget {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #f8fafc;
    animation: ragnaFadeIn 0.5s ease;
}

@keyframes ragnaFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ragna-players-icon {
    width: 20px;
    height: 20px;
    color: #6366f1;
    flex-shrink: 0;
}

.ragna-players-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ragna-players-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ragna-players-count {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
}

.ragna-players-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #a5b4fc;
    animation: ragnaPulse 2s infinite;
}

@keyframes ragnaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ragna-players-details {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    font-size: 11px;
    color: #64748b;
    display: flex;
    gap: 16px;
}

.ragna-players-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.ragna-players-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ragna-players-dot--real {
    background: #06b6d4;
    box-shadow: 0 0 6px #06b6d4;
}

.ragna-players-dot--sim {
    background: #6366f1;
    box-shadow: 0 0 6px #6366f1;
    animation: ragnaPulse 2s infinite;
}

/* ===== Exemplo de uso no HTML =====
<div id="ragna-players"></div>
<script src="/admin/api/players-widget.js"></script>
========================================== */
