/* =====================================================================
   fx.css — всплеск частиц игры (`TAM.FX`, §108 «particles»).

   Один вид искры на всю игру: та же форма и то же движение, что у искр
   сундука (`modal.css`, §«Сундук»), — победа, покупка и надетый облик
   обязаны праздноваться одной рукой, иначе каждый момент выглядит
   принесённым из другой игры.

   Узел ставится в `body` на фиксированной позиции: панели раздела режут
   всё, что выходит за их край, а всплеск по замыслу выходит.
   ===================================================================== */

.tam-fx {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
    /* Поверх окна, но ниже обучения: кольцо подсказки перекрывать нечем. */
    z-index: var(--tam-z-over);
}

.tam-fx i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--size, 9px);
    height: var(--size, 9px);
    margin: calc(var(--size, 9px) / -2) 0 0 calc(var(--size, 9px) / -2);
    border-radius: 50%;
    opacity: 0;
    animation: tam-fx-fly var(--tam-t-reward) var(--tam-ease-out) forwards;
    animation-delay: var(--delay, 0ms);
}

/* Тона — из смысловых цветов словаря. Ядро искры всегда светлее её
   края: ровно залитый кружок читается точкой интерфейса, а не вспышкой. */
.tam-fx--gold i {
    background: radial-gradient(circle at 35% 35%,
                    var(--ui-gold-hi) 0%, var(--ui-gold-light) 45%, var(--ui-gold-dark) 100%);
    box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold) 90%, transparent);
}

.tam-fx--green i {
    background: radial-gradient(circle at 35% 35%,
                    var(--ui-ivory-light) 0%,
                    color-mix(in srgb, var(--ui-green) 70%, var(--ui-ivory-light)) 45%,
                    var(--ui-green) 100%);
    box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-green) 85%, transparent);
}

.tam-fx--purple i {
    background: radial-gradient(circle at 35% 35%,
                    var(--ui-ivory-light) 0%, var(--ui-purple-light) 45%, var(--ui-purple) 100%);
    box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-purple-light) 85%, transparent);
}

.tam-fx--red i {
    background: radial-gradient(circle at 35% 35%,
                    var(--ui-ivory-light) 0%,
                    color-mix(in srgb, var(--ui-red) 60%, var(--ui-ivory-light)) 45%,
                    var(--ui-red) 100%);
    box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-red) 85%, transparent);
}

.tam-fx--blue i {
    background: radial-gradient(circle at 35% 35%,
                    var(--ui-ivory-light) 0%,
                    color-mix(in srgb, var(--ui-blue) 60%, var(--ui-ivory-light)) 45%,
                    var(--ui-blue) 100%);
    box-shadow: 0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-blue) 85%, transparent);
}

/* Искра вылетает из точки и гаснет на излёте, не долетев до полной
   прозрачности рывком: последняя четверть пути — угасание. */
@keyframes tam-fx-fly {
    0%   { opacity: 0; transform: rotate(var(--angle)) translateX(8px) scale(.45); }
    16%  { opacity: 1; }
    70%  { opacity: .95; }
    100% { opacity: 0;
           transform: rotate(var(--angle)) translateX(var(--distance)) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .tam-fx { display: none; }
}