.reactions-bar {
    display: flex; gap: 10px; padding: 18px 24px;
    background: rgba(22, 30, 48, 0.72);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow:
      0 30px 70px rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,255,255,0.04),
      inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .reaction {
    width: 64px; height: 64px; cursor: pointer;
    border-radius: 50%; position: relative;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);
    display: flex; align-items: center; justify-content: center;
  }
  .reaction:hover { transform: translateY(-16px) scale(1.24); }
  .reaction:active { transform: translateY(-12px) scale(1.38); }
  .reaction svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); }

  /* Elementi SVG con animazioni - tutti in fill-box per scalare dal centro */
  .tear-l, .tear-r, .sad-tear, .steam-1, .steam-2, .steam-3 {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
  }
  .haha-face, .wow-face, .sad-face, .angry-face, .heart, .like-hand, .wow-eyes {
    will-change: transform;
  }

  /* ========== LIKE ========== */
  @keyframes likeWave {
    0%   { transform: rotate(0deg) translateY(0); }
    25%  { transform: rotate(-7deg) translateY(-1.5px); }
    50%  { transform: rotate(0deg) translateY(0); }
    75%  { transform: rotate(7deg) translateY(-1.5px); }
    100% { transform: rotate(0deg) translateY(0); }
  }
  @keyframes likeGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.08); }
  }
  .like-hand {
    animation: likeWave 2s ease-in-out infinite;
    transform-box: view-box;
    transform-origin: 50px 66px;
  }
  .like-glow {
    transform-box: fill-box; transform-origin: center;
    animation: likeGlow 2s ease-in-out infinite;
  }

  /* ========== LOVE ========== */
  @keyframes heartBeat {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.18); }
    24%  { transform: scale(1); }
    36%  { transform: scale(1.12); }
    48%  { transform: scale(1); }
    100% { transform: scale(1); }
  }
  @keyframes heartHalo {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    20%      { opacity: 0.55; transform: scale(1.15); }
    50%      { opacity: 0;    transform: scale(1.4); }
  }
  .heart {
    animation: heartBeat 1.4s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .heart-glow {
    transform-box: fill-box; transform-origin: center;
    animation: heartHalo 1.4s ease-in-out infinite;
  }

  /* ========== HAHA ========== */
  @keyframes hahaLaugh {
    0%   { transform: rotate(-8deg) translateY(0); }
    25%  { transform: rotate(0deg)  translateY(-3px); }
    50%  { transform: rotate(8deg)  translateY(0); }
    75%  { transform: rotate(0deg)  translateY(-3px); }
    100% { transform: rotate(-8deg) translateY(0); }
  }
  @keyframes tearFall {
    0%   { transform: translateY(-6px) scale(0.2); opacity: 0; }
    20%  { transform: translateY(-2px) scale(1);   opacity: 1; }
    100% { transform: translateY(28px) scale(0.4); opacity: 0; }
  }
  .haha-face {
    animation: hahaLaugh 0.6s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .tear-l { animation: tearFall 1.7s cubic-bezier(0.4,0,0.6,1) infinite; }
  .tear-r { animation: tearFall 1.7s cubic-bezier(0.4,0,0.6,1) infinite 0.85s; }

  /* ========== WOW ========== */
  @keyframes wowBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.035); }
  }
  @keyframes eyeBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    94%           { transform: scaleY(0.08); }
  }
  .wow-face {
    animation: wowBounce 2s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .wow-eyes {
    animation: eyeBlink 3.6s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }

  /* ========== SAD ========== */
  @keyframes sadSway {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(2px) rotate(1.5deg); }
  }
  @keyframes sadTearFall {
    0%   { transform: translateY(0)   scale(0.3); opacity: 0; }
    15%  { transform: translateY(0)   scale(1);   opacity: 1; }
    100% { transform: translateY(30px) scale(0.4); opacity: 0; }
  }
  .sad-face {
    animation: sadSway 2.6s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .sad-tear { animation: sadTearFall 2.4s cubic-bezier(0.4,0,0.6,1) infinite; }

  /* ========== ANGRY ========== */
  @keyframes angryShake {
    0%, 100% { transform: translate(0, 0)       rotate(0deg); }
    20%      { transform: translate(-1.5px,-0.5px) rotate(-2deg); }
    40%      { transform: translate(1.5px, 0)     rotate(2deg); }
    60%      { transform: translate(-1px, -1px)   rotate(-1.5deg); }
    80%      { transform: translate(1px,  0.5px)  rotate(1.5deg); }
  }
  @keyframes steamRise {
    0%   { transform: translateY(4px)  scale(0.3); opacity: 0; }
    30%  { opacity: 0.85; }
    100% { transform: translateY(-22px) scale(1.25); opacity: 0; }
  }
  .angry-face {
    animation: angryShake 0.4s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .steam-1 { animation: steamRise 1.6s ease-out infinite; }
  .steam-2 { animation: steamRise 1.6s ease-out infinite 0.53s; }
  .steam-3 { animation: steamRise 1.6s ease-out infinite 1.06s; }

  /* ========== Shine sweep (Like + Love) ========== */
  @keyframes shineSweep {
    0%   { transform: translateX(-75px) rotate(20deg); opacity: 0; }
    12%  { opacity: 0.85; }
    35%  { transform: translateX(75px) rotate(20deg); opacity: 0; }
    100% { transform: translateX(75px) rotate(20deg); opacity: 0; }
  }
  .shine         { animation: shineSweep 3.8s ease-in-out infinite; }
  .shine-delayed { animation: shineSweep 3.8s ease-in-out infinite 0.5s; }