/* Confetti animation for streak milestones */

.confetti-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px; height: 10px;
    top: -10px;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% { opacity: 1; top: -10px; transform: rotate(0deg) scale(1); }
    100% { opacity: 0; top: 110vh; transform: rotate(720deg) scale(0.5); }
}

/* Colors via nth-child */
.confetti-piece:nth-child(odd) { background: #ff6b6b; border-radius: 50%; }
.confetti-piece:nth-child(even) { background: #4ecdc4; }
.confetti-piece:nth-child(3n) { background: #ffe66d; width: 8px; height: 12px; }
.confetti-piece:nth-child(4n) { background: #a855f7; border-radius: 50%; }
.confetti-piece:nth-child(5n) { background: #3b82f6; width: 12px; height: 8px; }

/* 50 particles: unique left positions and animation delays */
.confetti-piece:nth-child(1)  { left: 2%;  animation-delay: 0.00s; }
.confetti-piece:nth-child(2)  { left: 4%;  animation-delay: 0.10s; }
.confetti-piece:nth-child(3)  { left: 6%;  animation-delay: 0.20s; }
.confetti-piece:nth-child(4)  { left: 8%;  animation-delay: 0.05s; }
.confetti-piece:nth-child(5)  { left: 10%; animation-delay: 0.15s; }
.confetti-piece:nth-child(6)  { left: 12%; animation-delay: 0.30s; }
.confetti-piece:nth-child(7)  { left: 14%; animation-delay: 0.00s; }
.confetti-piece:nth-child(8)  { left: 16%; animation-delay: 0.25s; }
.confetti-piece:nth-child(9)  { left: 18%; animation-delay: 0.10s; }
.confetti-piece:nth-child(10) { left: 20%; animation-delay: 0.35s; }
.confetti-piece:nth-child(11) { left: 22%; animation-delay: 0.05s; }
.confetti-piece:nth-child(12) { left: 24%; animation-delay: 0.20s; }
.confetti-piece:nth-child(13) { left: 26%; animation-delay: 0.40s; }
.confetti-piece:nth-child(14) { left: 28%; animation-delay: 0.15s; }
.confetti-piece:nth-child(15) { left: 30%; animation-delay: 0.00s; }
.confetti-piece:nth-child(16) { left: 32%; animation-delay: 0.30s; }
.confetti-piece:nth-child(17) { left: 34%; animation-delay: 0.10s; }
.confetti-piece:nth-child(18) { left: 36%; animation-delay: 0.45s; }
.confetti-piece:nth-child(19) { left: 38%; animation-delay: 0.20s; }
.confetti-piece:nth-child(20) { left: 40%; animation-delay: 0.05s; }
.confetti-piece:nth-child(21) { left: 42%; animation-delay: 0.35s; }
.confetti-piece:nth-child(22) { left: 44%; animation-delay: 0.15s; }
.confetti-piece:nth-child(23) { left: 46%; animation-delay: 0.00s; }
.confetti-piece:nth-child(24) { left: 48%; animation-delay: 0.25s; }
.confetti-piece:nth-child(25) { left: 50%; animation-delay: 0.40s; }
.confetti-piece:nth-child(26) { left: 52%; animation-delay: 0.10s; }
.confetti-piece:nth-child(27) { left: 54%; animation-delay: 0.05s; }
.confetti-piece:nth-child(28) { left: 56%; animation-delay: 0.30s; }
.confetti-piece:nth-child(29) { left: 58%; animation-delay: 0.20s; }
.confetti-piece:nth-child(30) { left: 60%; animation-delay: 0.45s; }
.confetti-piece:nth-child(31) { left: 62%; animation-delay: 0.00s; }
.confetti-piece:nth-child(32) { left: 64%; animation-delay: 0.15s; }
.confetti-piece:nth-child(33) { left: 66%; animation-delay: 0.35s; }
.confetti-piece:nth-child(34) { left: 68%; animation-delay: 0.10s; }
.confetti-piece:nth-child(35) { left: 70%; animation-delay: 0.25s; }
.confetti-piece:nth-child(36) { left: 72%; animation-delay: 0.05s; }
.confetti-piece:nth-child(37) { left: 74%; animation-delay: 0.40s; }
.confetti-piece:nth-child(38) { left: 76%; animation-delay: 0.20s; }
.confetti-piece:nth-child(39) { left: 78%; animation-delay: 0.00s; }
.confetti-piece:nth-child(40) { left: 80%; animation-delay: 0.30s; }
.confetti-piece:nth-child(41) { left: 82%; animation-delay: 0.15s; }
.confetti-piece:nth-child(42) { left: 84%; animation-delay: 0.45s; }
.confetti-piece:nth-child(43) { left: 86%; animation-delay: 0.10s; }
.confetti-piece:nth-child(44) { left: 88%; animation-delay: 0.25s; }
.confetti-piece:nth-child(45) { left: 90%; animation-delay: 0.05s; }
.confetti-piece:nth-child(46) { left: 92%; animation-delay: 0.35s; }
.confetti-piece:nth-child(47) { left: 94%; animation-delay: 0.20s; }
.confetti-piece:nth-child(48) { left: 96%; animation-delay: 0.00s; }
.confetti-piece:nth-child(49) { left: 98%; animation-delay: 0.40s; }
.confetti-piece:nth-child(50) { left: 1%;  animation-delay: 0.15s; }

/* Streak toast */
.streak-toast {
    position: fixed;
    bottom: 80px; right: 20px;
    background: var(--surface-2, #1a1a2e);
    color: var(--text-1, #fff);
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 9998;
    animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in 2.7s forwards;
    font-size: 1.1rem;
}

@keyframes toast-in {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
    from { opacity: 1; }
    to { opacity: 0; }
}