/* Живые превью игр на «Главной» (js/ui/game-previews.js). Двигаются только transform и opacity.
   Пауза: .is-off на карточке (вне экрана или не на «Главной»), .is-still на самом превью (лента LIVE),
   просьба системы о покое. Цвет игры — --g с карточки, по умолчанию — золото. */

.pv { display: block; width: 100%; height: 100%; --g: var(--gold); }
.pv svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv svg * { transform-box: fill-box; transform-origin: center; }
[data-game="fastbag"] { --g: #B8801C; }
[data-game="durak"]   { --g: #C4343C; }
[data-game="mines"]   { --g: #1E9C80; }
[data-game="crash"]   { --g: #D9581F; }
[data-game="bounce"]  { --g: #2B86D0; }
[data-game="chicken"] { --g: #6E9A1C; }
[data-game="tower"]   { --g: #7557D9; }
[data-game="flip"]    { --g: #B0801A; }
[data-game="cases"]   { --g: #C94A8C; }
[data-game="plinko"]  { --g: #1F93AC; }
[data-game="dice"]    { --g: #4F63D6; }
[data-game="limbo"]   { --g: #CF3F5C; }
[data-game="wheel"]   { --g: #9C4FBF; }
[data-game="keno"]    { --g: #2E9A55; }
[data-game="hilo"]    { --g: #C66A2E; }
[data-game="horses"]  { --g: #3F8F3A; }

.is-off .pv *, .pv.is-still * { animation-play-state: paused !important; }
.pv.is-still * { animation-delay: -1.2s !important; }
@media (prefers-reduced-motion: reduce) { .pv * { animation: none !important; } }

/* общие */
.pv-spark { animation: pv-twinkle 2.4s ease-in-out infinite; }
.pv-d2 { animation-delay: -1.2s; }
@keyframes pv-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.pv-pop { opacity: 0; }

/* Фортуна: кольцо крутится, центр дышит, стрелка подпрыгивает на долях */
.pv-spin { animation: pv-rot 9s linear infinite; transform-origin: 80px 50px !important; transform-box: view-box !important; }
@keyframes pv-rot { to { transform: rotate(360deg); } }
.pv-pulse { animation: pv-breath 1.8s ease-in-out infinite; }
@keyframes pv-breath { 50% { transform: scale(1.18); } }
.pv-fort-glow { animation: pv-glow 3s ease-in-out infinite; }
@keyframes pv-glow { 50% { opacity: .35; transform: scale(1.08); } }
.pv-tick { animation: pv-tick .75s ease-in-out infinite; transform-origin: 50% 0 !important; }
@keyframes pv-tick { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } }

/* Дурак: три карты раскрываются веером и собираются */
.pv-card { transform-origin: 81px 90px !important; transform-box: view-box !important; animation: 3.6s cubic-bezier(.3, .7, .2, 1) infinite; }
.pv-c1 { animation-name: pv-fan1; }
.pv-c2 { animation-name: pv-fan2; }
.pv-c3 { animation-name: pv-fan3; }
@keyframes pv-fan1 { 0%, 12%, 100% { transform: rotate(0); } 35%, 80% { transform: rotate(-24deg) translateX(-6px); } }
@keyframes pv-fan2 { 0%, 12%, 100% { transform: rotate(0); } 35%, 80% { transform: rotate(0) translateY(-6px); } }
@keyframes pv-fan3 { 0%, 12%, 100% { transform: rotate(0); } 35%, 80% { transform: rotate(24deg) translateX(6px); } }

/* Сапёр: клетки открываются камнями по очереди, потом — мина, и всё заново */
.pv-m1, .pv-m2, .pv-m3, .pv-m4, .pv-boom, .pv-boomtxt { animation: 5s ease-out infinite; }
.pv-m1 { animation-name: pv-gem1; } .pv-m2 { animation-name: pv-gem2; } .pv-m3 { animation-name: pv-gem3; } .pv-m4 { animation-name: pv-gem4; }
.pv-boom { animation-name: pv-boom; } .pv-boomtxt { animation-name: pv-boom; }
@keyframes pv-gem1 { 0%, 8% { opacity: 0; transform: scale(.5); } 13%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }
@keyframes pv-gem2 { 0%, 22% { opacity: 0; transform: scale(.5); } 27%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }
@keyframes pv-gem3 { 0%, 36% { opacity: 0; transform: scale(.5); } 41%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }
@keyframes pv-gem4 { 0%, 50% { opacity: 0; transform: scale(.5); } 55%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }
@keyframes pv-boom { 0%, 64% { opacity: 0; transform: scale(.4); } 69% { opacity: 1; transform: scale(1.25); } 73%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }

/* Плинко: шарик скачет по пинам к среднему слоту, слот вспыхивает */
.pv-ball { animation: pv-drop 2.6s cubic-bezier(.45, 0, .7, 1) infinite; }
.pv-ball.pv-d2 { animation-delay: -1.3s; animation-name: pv-drop2; }
@keyframes pv-drop {
    0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; }
    20% { transform: translate(-6px, 18px); } 36% { transform: translate(4px, 32px); } 52% { transform: translate(-4px, 46px); }
    68% { transform: translate(5px, 60px); } 84%, 92% { transform: translate(0, 80px); opacity: 1; } 100% { transform: translate(0, 80px); opacity: 0; }
}
@keyframes pv-drop2 {
    0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; }
    20% { transform: translate(7px, 18px); } 36% { transform: translate(-3px, 32px); } 52% { transform: translate(8px, 46px); }
    68% { transform: translate(18px, 60px); } 84%, 92% { transform: translate(18px, 80px); opacity: 1; } 100% { transform: translate(18px, 80px); opacity: 0; }
}
.pv-slot { animation: pv-slot 1.3s ease-out infinite; }
@keyframes pv-slot { 0%, 60% { opacity: .45; } 70% { opacity: 1; } 100% { opacity: .45; } }

/* Турбо: кривая растёт, наездник на конце, множитель вспыхивает */
.pv-draw { stroke-dasharray: 100; animation: pv-draw 3.2s ease-in infinite; }
@keyframes pv-draw { 0% { stroke-dashoffset: 100; } 80%, 100% { stroke-dashoffset: 0; } }
.pv-rider { animation: pv-ride 3.2s ease-in infinite; transform-box: view-box !important; transform-origin: 0 0 !important; }
@keyframes pv-ride {
    0% { transform: translate(16px, 86px); } 20% { transform: translate(52px, 83px); } 40% { transform: translate(88px, 72px); }
    60% { transform: translate(116px, 46px); } 80%, 90% { transform: translate(146px, 12px); opacity: 1; } 100% { transform: translate(146px, 12px); opacity: 0; }
}
.pv-mult { animation: pv-flash 1.6s ease-in-out infinite; }
@keyframes pv-flash { 50% { opacity: .55; transform: scale(1.06); } }

/* Шарик: прыгает всё выше и лопается */
.pv-bounce { animation: pv-jump 2.8s cubic-bezier(.3, 0, .7, 1) infinite; transform-origin: 50% 100% !important; }
@keyframes pv-jump {
    0%, 100% { transform: translateY(0) scale(1.12, .85); }
    12% { transform: translateY(-22px) scale(.95, 1.05); } 24% { transform: translateY(0) scale(1.1, .88); }
    42% { transform: translateY(-42px) scale(.95, 1.05); } 60% { transform: translateY(0) scale(1.1, .88); }
    80% { transform: translateY(-56px); opacity: 1; } 84% { transform: translateY(-56px) scale(1.4); opacity: 0; } 96% { opacity: 0; transform: translateY(0); }
}
.pv-shadow { animation: pv-shadow 2.8s cubic-bezier(.3, 0, .7, 1) infinite; }
@keyframes pv-shadow { 12%, 42%, 80% { transform: scale(.55); opacity: .15; } 0%, 24%, 60%, 100% { transform: scale(1); opacity: .35; } }
.pv-burst { opacity: 0; animation: pv-burst 2.8s ease-out infinite; transform-origin: 80px 40px !important; transform-box: view-box !important; }
@keyframes pv-burst { 0%, 80% { opacity: 0; transform: scale(.3); } 84% { opacity: 1; } 96%, 100% { opacity: 0; transform: scale(1.4); } }
.pv[data-game="flip"] .pv-shadow { animation: pv-coinshadow 2.4s ease-in-out infinite; }

/* Курица: машины едут, разметка бежит, курица перебегает */
.pv-lane { animation: pv-lane 1s linear infinite; }
@keyframes pv-lane { to { transform: translateX(-18px); } }
.pv-car { animation: pv-car 2.2s linear infinite; }
.pv-car2 { animation-duration: 1.7s; animation-delay: -.8s; }
@keyframes pv-car { from { transform: translateX(0); } to { transform: translateX(200px); } }
.pv-hen { animation: pv-hen 3.4s ease-in-out infinite; }
@keyframes pv-hen {
    0%, 15% { transform: translateY(0); } 25%, 45% { transform: translateY(-32px); } 55%, 80% { transform: translateY(-62px); }
    90% { transform: translateY(-62px); opacity: 1; } 96% { opacity: 0; } 100% { transform: translateY(0); opacity: 0; }
}

/* Башня: этажи загораются снизу вверх, флажок машет */
.pv-floor { opacity: 0; animation: 4s ease-out infinite; }
.pv-f0 { animation-name: pv-fl0; } .pv-f1 { animation-name: pv-fl1; } .pv-f2 { animation-name: pv-fl2; } .pv-f3 { animation-name: pv-fl3; } .pv-f4 { animation-name: pv-fl4; }
@keyframes pv-fl0 { 0%, 5% { opacity: 0; } 10%, 88% { opacity: .9; } 96%, 100% { opacity: 0; } }
@keyframes pv-fl1 { 0%, 20% { opacity: 0; } 25%, 88% { opacity: .9; } 96%, 100% { opacity: 0; } }
@keyframes pv-fl2 { 0%, 35% { opacity: 0; } 40%, 88% { opacity: .9; } 96%, 100% { opacity: 0; } }
@keyframes pv-fl3 { 0%, 50% { opacity: 0; } 55%, 88% { opacity: .9; } 96%, 100% { opacity: 0; } }
@keyframes pv-fl4 { 0%, 65% { opacity: 0; } 70%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-flag { animation: pv-flag .9s ease-in-out infinite; transform-origin: 0 50% !important; }
@keyframes pv-flag { 50% { transform: scaleX(.6) skewY(8deg); } }

/* Монетка: подлетает и крутится */
.pv-coin { animation: pv-coin 2.4s ease-in-out infinite; }
@keyframes pv-coin {
    0%, 100% { transform: translateY(0) scaleX(1); } 20% { transform: translateY(-16px) scaleX(.1); }
    40% { transform: translateY(-24px) scaleX(-1); } 60% { transform: translateY(-16px) scaleX(.1); } 80% { transform: translateY(0) scaleX(1); }
}
@keyframes pv-coinshadow { 40% { transform: scale(.6); opacity: .15; } }

/* Кейсы: кейс трясётся, крышка открывается, камень взлетает в лучах */
.pv-shake { animation: pv-shake 3.2s ease-in-out infinite; }
@keyframes pv-shake { 0%, 30% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-4deg); } 10%, 20% { transform: rotate(4deg); } }
.pv-lid { animation: pv-lid 3.2s ease-out infinite; transform-origin: 0 100% !important; }
@keyframes pv-lid { 0%, 34% { transform: rotate(0); } 44%, 86% { transform: rotate(-32deg) translate(-4px, -6px); } 96%, 100% { transform: rotate(0); } }
.pv-gem { opacity: 0; animation: pv-gem 3.2s ease-out infinite; }
@keyframes pv-gem { 0%, 38% { opacity: 0; transform: translateY(26px) scale(.4); } 50%, 84% { opacity: 1; transform: translateY(0) scale(1); } 94%, 100% { opacity: 0; } }
.pv-rays { opacity: 0; animation: pv-rays 3.2s ease-out infinite; transform-origin: 80px 44px !important; transform-box: view-box !important; }
@keyframes pv-rays { 0%, 38% { opacity: 0; transform: rotate(0) scale(.6); } 52%, 84% { opacity: 1; } 96%, 100% { opacity: 0; transform: rotate(40deg) scale(1.1); } }

/* Кости: кубики кувыркаются, ползунок ходит */
.pv-die { animation: pv-die 2.4s cubic-bezier(.3, .8, .3, 1) infinite; }
.pv-die.pv-d2 { animation-delay: -.25s; }
@keyframes pv-die { 0% { transform: translateY(-14px) rotate(-90deg); } 40%, 100% { transform: translateY(0) rotate(0); } 52% { transform: translateY(-4px) rotate(0); } 62% { transform: translateY(0); } }
.pv-knob { animation: pv-knob 2.4s ease-in-out infinite; }
@keyframes pv-knob { 0%, 100% { transform: translateX(-20px); } 50% { transform: translateX(26px); } }

/* Лимбо: кольцо пульсирует, стрелка рвётся вверх */
.pv-ringp { animation: pv-ringp 1.6s ease-out infinite; }
@keyframes pv-ringp { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.pv-rise { animation: pv-rise 1.6s ease-in-out infinite; }
@keyframes pv-rise { 0% { transform: translateY(12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }

/* Колесо: разгон и плавная остановка */
.pv-wheel { animation: pv-wheel 4s cubic-bezier(.15, .6, .2, 1) infinite; transform-origin: 80px 52px !important; transform-box: view-box !important; }
@keyframes pv-wheel { 0% { transform: rotate(0); } 75%, 100% { transform: rotate(1116deg); } }

/* Кено: номера загораются по очереди */
.pv-k1, .pv-k2, .pv-k3, .pv-k4, .pv-k5, .pv-k6 { animation: 4.2s ease-out infinite; }
.pv-k1 { animation-name: pv-kn1; } .pv-k2 { animation-name: pv-kn2; } .pv-k3 { animation-name: pv-kn3; }
.pv-k4 { animation-name: pv-kn4; } .pv-k5 { animation-name: pv-kn5; } .pv-k6 { animation-name: pv-kn6; }
@keyframes pv-kn1 { 0%, 5% { opacity: 0; transform: scale(.3); } 10%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes pv-kn2 { 0%, 17% { opacity: 0; transform: scale(.3); } 22%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes pv-kn3 { 0%, 29% { opacity: 0; transform: scale(.3); } 34%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes pv-kn4 { 0%, 41% { opacity: 0; transform: scale(.3); } 46%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes pv-kn5 { 0%, 53% { opacity: 0; transform: scale(.3); } 58%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes pv-kn6 { 0%, 65% { opacity: 0; transform: scale(.3); } 70%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }

/* Выше-ниже: карта переворачивается, стрелки мигают по очереди */
.pv-flipcard { animation: pv-flipcard 2.6s ease-in-out infinite; }
@keyframes pv-flipcard { 0%, 35%, 100% { transform: scaleX(1); } 45% { transform: scaleX(0); } 55% { transform: scaleX(1); } }
.pv-up { animation: pv-arrow 1.3s ease-in-out infinite; }
.pv-down { animation: pv-arrow 1.3s ease-in-out infinite -.65s; }
@keyframes pv-arrow { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.pv-down { animation-name: pv-arrow-d; }
@keyframes pv-arrow-d { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

/* Скачки: лошади скачут через кадр с разной скоростью */
.pv-horse { transform-box: view-box !important; transform-origin: 0 0 !important; animation: pv-run 3s linear infinite; }
.pv-h2 { animation-duration: 2.6s; animation-delay: -1s; }
.pv-h3 { animation-duration: 3.4s; animation-delay: -2s; }
@keyframes pv-run { from { transform: translateX(-20px); } to { transform: translateX(180px); } }
.pv-gallop { animation: pv-gallop .36s ease-in-out infinite; }
@keyframes pv-gallop { 50% { transform: translateY(-3px) rotate(-4deg); } }