/* Proten LMS — Gamification CSS */
.proten-xp-toast {
    position: fixed; top: 80px; right: 24px; z-index: 99999;
    background: linear-gradient(135deg,var(--proten-primary),var(--proten-secondary));
    color: var(--proten-dark); padding: 12px 20px; border-radius: var(--proten-radius);
    font-weight: 800; font-size: 16px; box-shadow: 0 4px 20px rgba(255,213,63,.4);
    animation: xp-pop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes xp-pop {
    0%  { transform: scale(.5) translateY(20px); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100%{ transform: scale(1); opacity: 1; }
}
.proten-badge-earned-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(9,50,77,.7); backdrop-filter: blur(6px);
}
.proten-badge-earned-card {
    background: #fff; border-radius: var(--proten-radius-lg); padding: 40px;
    text-align: center; max-width: 340px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: badge-pop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes badge-pop {
    0%  { transform: scale(.5) rotate(-10deg); opacity: 0; }
    100%{ transform: scale(1) rotate(0); opacity: 1; }
}
.proten-badge-earned-icon  { font-size: 72px; display: block; margin-bottom: 12px; animation: badge-spin 1s ease; }
@keyframes badge-spin { 0%{transform:rotate(-20deg);}50%{transform:rotate(10deg);}100%{transform:rotate(0);} }
.proten-badge-earned-title { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.proten-badge-earned-desc  { font-size: 14px; color: var(--proten-gray-700); margin-bottom: 20px; }
.proten-level-up-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(9,50,77,.85);
}
.proten-level-up-card {
    background: linear-gradient(135deg,var(--proten-primary),var(--proten-secondary));
    border-radius: var(--proten-radius-lg); padding: 48px 40px; text-align: center;
    max-width: 360px; width: 90%; color: var(--proten-dark);
    box-shadow: 0 20px 60px rgba(255,213,63,.3);
    animation: level-up-pop .6s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes level-up-pop {
    0%  { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.1); }
    100%{ transform: scale(1); opacity: 1; }
}
.proten-level-up-emoji  { font-size: 80px; display: block; animation: spin-once 1s ease; }
@keyframes spin-once { 0%{transform:rotate(-30deg)scale(.5);}100%{transform:rotate(0)scale(1);} }
.proten-level-up-title  { font-size: 28px; font-weight: 900; margin: 12px 0 6px; }
.proten-level-up-number { font-size: 72px; font-weight: 900; line-height: 1; }
.proten-level-up-label  { font-size: 13px; opacity: .75; }
.proten-confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99998; }
.proten-confetti-piece {
    position: absolute; width: 10px; height: 10px; top: -10px;
    animation: confetti-fall linear infinite;
    border-radius: 2px;
}
@keyframes confetti-fall {
    0%  { transform: translateY(0) rotate(0) scaleX(1); opacity: 1; }
    100%{ transform: translateY(110vh) rotate(720deg) scaleX(0.5); opacity: 0; }
}
.proten-streak-fire { display: inline-block; animation: fire-flicker 1s ease infinite alternate; }
@keyframes fire-flicker {
    0%  { transform: scale(1) rotate(-3deg); }
    100%{ transform: scale(1.1) rotate(3deg); }
}