/* ============================================================================ QZR vNext — XP feedback FX : "+N" volant sur bonne réponse + bump du compteur. Utilisé par les moteurs realtime SOLO et MULTI (via window.qzrXpFx). Overlay attaché à en position:fixed → jamais clippé par le plateau. ============================================================================ */ .qzr-xp-pop { position: fixed; z-index: 100000; pointer-events: none; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.5rem; line-height: 1; white-space: nowrap; color: var(--qz-accent, #16A87A); text-shadow: 0 1px 0 #fff, 0 2px 12px rgba(6, 52, 42, .30); animation: qzrXpPopRise 1150ms var(--qz-ease) forwards; will-change: transform, opacity; } .qzr-xp-pop i { font-size: .82em; color: var(--qz-energy, #F5C542); filter: drop-shadow(0 1px 1px rgba(6, 52, 42, .25)); margin-right: 1px; } @keyframes qzrXpPopRise { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1.18); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--qzr-xp-dx, 0px)), calc(-50% - var(--qzr-xp-rise, 100px))) scale(1) rotate(var(--qzr-xp-rot, 0deg)); } } /* Variante mouvement réduit : simple fondu vertical court */ .qzr-xp-pop--reduced { animation: qzrXpPopFade 750ms ease forwards; } @keyframes qzrXpPopFade { 0% { opacity: 0; transform: translate(-50%, -50%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 26px)); } } /* ── Coins FX : "+N 💎" volant + gerbe de gemmes (window.qzrXpFx.popCoins) ──── */ .qzr-coin-pop { position: fixed; z-index: 100001; pointer-events: none; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.55rem; line-height: 1; white-space: nowrap; color: var(--qz-accent, #16A87A); text-shadow: 0 1px 0 #fff, 0 2px 12px rgba(6, 52, 42, .30); animation: qzrCoinPopRise 1200ms var(--qz-ease) forwards; will-change: transform, opacity; } .qzr-coin-pop i { font-size: .86em; color: var(--qz-accent, #16A87A); filter: drop-shadow(0 1px 2px rgba(6, 52, 42, .28)); margin-right: 2px; } @keyframes qzrCoinPopRise { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 16% { opacity: 1; transform: translate(-50%, calc(-50% - 8px)) scale(1.22); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--qzr-xp-rise, 104px))) scale(1); } } .qzr-coin-pop--reduced { animation: qzrXpPopFade 750ms ease forwards; } .qzr-coin-spark { position: fixed; z-index: 100000; pointer-events: none; transform: translate(-50%, -50%); font-size: .78rem; color: var(--qz-accent, #16A87A); opacity: 0; filter: drop-shadow(0 1px 1px rgba(6, 52, 42, .22)); animation: qzrCoinSpark 900ms var(--qz-ease) forwards; animation-delay: var(--qzr-cs-delay, 0ms); will-change: transform, opacity; } @keyframes qzrCoinSpark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--qzr-cs-dx, 0px)), calc(-50% + var(--qzr-cs-dy, -40px))) scale(.7); } } /* Bump du compteur XP/points quand il s'incrémente */ .qzr-xp-bump { animation: qzrXpBump 420ms var(--qz-ease-pop, cubic-bezier(.2, 1.5, .4, 1)); } @keyframes qzrXpBump { 0% { transform: scale(1); } 42% { transform: scale(1.16); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .qzr-xp-pop, .qzr-coin-pop { animation: qzrXpPopFade 700ms ease forwards; } .qzr-coin-spark { display: none; } .qzr-xp-bump { animation: none; } }