/* ===== PARTICLE SYSTEM ===== */
/* XP particles, confetti, and particle effects */

/* Particle Canvas */
/* NOTE: Main screen particles use inline styles for fixed positioning to avoid CSS conflicts */
/* This CSS is for backward compatibility only */
.particle-canvas {
    position: fixed; /* Changed from absolute to fixed to avoid overflow clipping */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible; /* Allow particles to be visible even if they go slightly outside */
    z-index: 10000; /* Very high z-index to be above everything */
}

/* XP Particle */
.xp-particle {
    position: absolute;
    pointer-events: none;
    z-index: 1001;
}

/* XP Badge */
.xp-badge {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-primary);
    color: var(--color-accent-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Confetti Canvas (used in level-up modal) */
.confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

.confetti-particle {
    position: absolute;
    pointer-events: none;
}