/* Livria — animations & gamification */
@keyframes fx-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fx-spin { to { transform: rotate(1turn); } }
@keyframes fx-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes fx-confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 340px)) rotate(var(--r)); opacity: 0; } }
@keyframes fx-badge { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; opacity: 1; } }
@keyframes fx-bg { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Entrée en cascade */
.lv > * { animation: lv-rise .5s both; }
.lv > *:nth-child(2) { animation-delay: .06s; } .lv > *:nth-child(3) { animation-delay: .12s; } .lv > *:nth-child(4) { animation-delay: .18s; }
.lv-grid > *, .lv-rail > *, .lv-offers > *, .lv-shelf > * { animation: lv-rise .5s both; animation-delay: calc(var(--i, 0) * 45ms); }

/* Interactions */
.lv-card, .lva-kpi, .lv-feature, .game-tile { transition: transform .25s, box-shadow .25s; }
.lv-card:hover, .lva-kpi:hover, .lv-feature:hover { transform: translateY(-3px); }
.lv-book:hover { transform: translateY(-6px) rotate(-.6deg); }
.lv-primary-btn { position: relative; overflow: hidden; transition: transform .15s, box-shadow .2s; }
.lv-primary-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); }
.lv-primary-btn:active:not(:disabled) { transform: scale(.96); }
.lv-primary-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: rgba(255,255,255,.35); transform: translateX(-120%) skewX(-20deg); }
.lv-primary-btn:hover::after { animation: fx-shine .7s; }
.vp-icon:hover { animation: lv-float 1s ease-in-out infinite; }
.lv-banner { background-size: 200% 200%; animation: lv-rise .5s both, fx-bg 12s ease infinite; }
.lv-banner__deco { animation: lv-float 4s ease-in-out infinite; }
.lv-count { animation: fx-pop .4s both; }

/* Badges */
.lv-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; }
.lv-badge { text-align: center; padding: .8rem .4rem; border-radius: 16px; border: 1px solid var(--lv-border); background: #fff; filter: grayscale(1); opacity: .55; transition: transform .25s; }
.lv-badge small { display: block; font-weight: 700; font-size: .72rem; margin-top: .2rem; }
.lv-badge__icon { font-size: 2rem; display: block; }
.lv-badge--on { filter: none; opacity: 1; animation: fx-badge .6s both; animation-delay: var(--delay, 0s); box-shadow: 0 10px 24px -14px var(--theme-primary); }
.lv-badge--on:hover { transform: translateY(-4px) rotate(-3deg); }
.lv-badge--on .lv-badge__icon { animation: lv-float 3s ease-in-out infinite; }

/* Jeux */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.game-tile { display: block; padding: 1.5rem; border-radius: 24px; color: #fff; text-decoration: none; background: linear-gradient(135deg, hsl(var(--h) 75% 50%), hsl(calc(var(--h) + 40) 80% 62%)); box-shadow: 0 20px 40px -22px hsl(var(--h) 80% 40%); }
.game-tile:hover { transform: translateY(-6px) scale(1.02); }
.game-tile__icon { font-size: 2.6rem; display: inline-block; animation: lv-float 3s ease-in-out infinite; }
.game-tile h3 { margin: .5rem 0 .25rem !important; }
.game-tile small { opacity: .85; }
.daily { text-align: center; position: relative; overflow: hidden; }
.daily__emoji { font-size: 4rem; display: inline-block; animation: lv-float 3s ease-in-out infinite; }
.daily__emoji--spin { animation: fx-spin .7s linear infinite; }
.daily h2 { animation: fx-pop .5s both; }

.quiz__title { margin: .75rem 0 1.25rem !important; font-size: 1.6rem; }
.quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.quiz__opt { padding: .9rem 1rem; border-radius: 16px; border: 2px solid var(--lv-border); background: #fff; font-weight: 700; transition: all .2s; }
.quiz__opt:hover:not(:disabled) { border-color: var(--theme-primary); transform: translateY(-2px); }
.quiz__opt--ok { background: #e3f7ec; border-color: #1a9a5b; animation: fx-pop .4s; }
.quiz__opt--bad { background: #fde6ea; border-color: #d33; animation: lv-shake .4s; }
.quiz__opt--dim { opacity: .5; }
@keyframes lv-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.mg-board { display: grid; grid-template-columns: repeat(4, minmax(70px, 120px)); gap: .75rem; justify-content: center; }
.mg-card { aspect-ratio: 1; border: 0; background: none; padding: 0; perspective: 600px; }
.mg-card__in { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mg-card--on .mg-card__in { transform: rotateY(180deg); }
.mg-card__back, .mg-card__front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; font-size: 2.2rem; backface-visibility: hidden; box-shadow: var(--lv-shadow); }
.mg-card__back { background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)); }
.mg-card__front { background: #fff; transform: rotateY(180deg); border: 2px solid var(--lv-border); }
.mg-card--ok .mg-card__front { border-color: #1a9a5b; background: #e3f7ec; animation: fx-pop .4s; }
.mg-card:hover:not(.mg-card--on) .mg-card__in { transform: translateY(-4px) rotate(-2deg); }

/* Confettis */
.confetti { position: absolute; left: 50%; top: 35%; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; width: 9px; height: 14px; border-radius: 2px; background: hsl(var(--h) 85% 58%); animation: fx-confetti 1.6s ease-out var(--d) both; }

/* Logo Viple */
.vp-logo { height: 32px; width: auto; display: block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }