/* ==========================================================================
   BADGES / CHIPS
   .badge = chip con punto pulsante (usado en hero/home y otras).
   .badge--win/--loss/--draw = variantes de color de resultado.
   (El pill de resultado de partida especifico vive en tags-badges.css.)
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-accent);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    background: rgba(129, 140, 248, .08);
    border: 1px solid rgba(129, 140, 248, .22);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 28px;
}
.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--brand-accent);
    border-radius: var(--radius-circle);
    animation: pulse 2s ease-in-out infinite;
}

.badge--win  { background: #5FBF6A; color: var(--on-accent); }
.badge--loss { background: #D46163; color: var(--on-accent); }
.badge--draw { background: #9aa4b2; color: var(--on-accent); }

.tag{
    display: inline-block;
    margin-top: var(--sp-4);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    color: var(--text-black);
}

.tag-premiun { background: #D49D68; }
.tag-free { background: #5FBF6A; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .1em;
    border-radius: var(--radius-xl);
    padding: 5px 14px;
    color: var(--brand-accent, var(--brand-accent-light));
    background: rgba(61,219,217,.1); 
    border: 1px solid rgba(61,219,217,.25);
}