/* SequeLariGTA — reações 🔥 😂 😮 👑 (pendência 10). */
.reacoes { display: block; margin-top: 12px; position: relative; }
.reacoes-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.reacao { --fatia: 0; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 52px; padding: 6px 12px 8px;
  border-radius: 99px; border: 1px solid var(--borda); background: rgba(13, 16, 32, .7); color: var(--texto); font: inherit; font-weight: 700; font-size: .9rem;
  cursor: pointer; overflow: visible; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .25s, box-shadow .25s, background .25s; }
/* Fatia de cada reação no total, como uma barrinha de néon embaixo do botão */
.reacao::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--neon-rosa), var(--sol)) left / calc(var(--fatia) * 100%) 100% no-repeat, rgba(255, 255, 255, .06);
  transition: background-size .6s cubic-bezier(.2, .9, .3, 1.1); }
.reacoes.sem-contagem .reacao::after { display: none; }
.reacao-emoji { font-size: 1.25rem; line-height: 1; display: inline-block; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.reacao-n { font-variant-numeric: tabular-nums; min-width: 0; color: var(--texto-2); }
.reacao-n:empty { display: none; }
.reacao:hover { transform: translateY(-2px); border-color: rgba(255, 63, 164, .55); box-shadow: 0 0 14px rgba(255, 63, 164, .3); }
.reacao:hover .reacao-emoji { transform: scale(1.22) rotate(-8deg); }
.reacao:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.reacao[aria-pressed="true"] { background: linear-gradient(135deg, rgba(255, 63, 164, .35), rgba(255, 201, 74, .28)); border-color: rgba(255, 201, 74, .8);
  box-shadow: 0 0 18px rgba(255, 63, 164, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.reacao[aria-pressed="true"] .reacao-n { color: var(--sol); }
.reacoes.tem-minha .reacao:not([aria-pressed="true"]) .reacao-emoji { filter: saturate(.55); opacity: .8; }
.reacao.pulou .reacao-emoji { animation: reacao-pulo .55s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes reacao-pulo { 0% { transform: scale(1); } 35% { transform: scale(1.65) rotate(-14deg); } 70% { transform: scale(.9) rotate(6deg); } 100% { transform: scale(1); } }
.reacao-n.vira { animation: reacao-vira .35s ease-out; }
@keyframes reacao-vira { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.reacao-faisca { position: absolute; left: 50%; top: 40%; pointer-events: none; font-size: .95rem; z-index: 3;
  animation: reacao-faisca .75s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes reacao-faisca {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05) rotate(var(--giro)); opacity: 0; }
}
.reacoes .reacoes-texto { margin: 6px 0 0; min-height: 1.3em; flex: none; color: var(--texto-2); }

/* Página de jogo: cartão "O que você acha de…?" */
.jogo-reagir { margin: 14px 0 4px; border-left: 4px solid var(--cor, var(--neon-rosa)); }
.jogo-reagir h2 { margin: 0; font-size: 1.1rem; }
.jogo-reagir .reacao { min-height: 46px; padding: 8px 16px 10px; }
.jogo-reagir .reacao-emoji { font-size: 1.5rem; }

@media (max-width: 420px) {
  .reacoes-botoes { gap: 6px; }
  .reacao { padding: 6px 10px 8px; min-width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .reacao, .reacao-emoji, .reacao::after { transition: none; }
  .reacao:hover { transform: none; }
  .reacao:hover .reacao-emoji { transform: none; }
  .reacao.pulou .reacao-emoji, .reacao-n.vira, .reacao-faisca { animation: none; }
  .reacao-faisca { display: none; }
}