/* Páginas dos jogos (Qual é o killer? e Chat vs Névoa): mais vida e mais chamariz. Só movimento e brilho; nenhuma regra de layout muda.
   Tudo respeita "reduzir movimento" no fim do arquivo. */

/* névoa lenta e brasas ao fundo, atrás do conteúdo */
body.jogo-animado { position: relative; }
body.jogo-animado::before, body.jogo-animado::after { content: ''; position: fixed; inset: -10%; pointer-events: none; z-index: 0; }
body.jogo-animado::before { background: radial-gradient(40% 35% at 20% 30%, rgba(197, 43, 43, .16), transparent 70%), radial-gradient(35% 40% at 80% 70%, rgba(242, 181, 68, .09), transparent 70%); animation: ja-nevoa 22s ease-in-out infinite alternate; }
body.jogo-animado::after { background-image: radial-gradient(2px 2px at 12% 90%, rgba(255, 170, 70, .7), transparent), radial-gradient(2px 2px at 38% 96%, rgba(255, 120, 50, .6), transparent), radial-gradient(1.5px 1.5px at 64% 92%, rgba(255, 190, 90, .6), transparent), radial-gradient(2px 2px at 86% 98%, rgba(255, 140, 60, .6), transparent); background-size: 100% 100%; animation: ja-brasas 9s linear infinite; opacity: .7; }
body.jogo-animado > main, body.jogo-animado > header, body.jogo-animado > nav { position: relative; z-index: 1; }

/* título e número do dia */
.kd-cabeca h1, .qj h1 { animation: ja-entra .7s cubic-bezier(.2, .9, .3, 1) both, ja-brilho-titulo 4.5s ease-in-out 1s infinite; }
.kd-numero { animation: ja-entra .6s .1s both; background: linear-gradient(90deg, var(--moss, #9bb86b) 30%, #fff 50%, var(--moss, #9bb86b) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ja-entra .6s .1s both, ja-brilho-faixa 5s linear 1.2s infinite; }
.kd-sub, .qj-sub, .kd-modos, .kd-legenda { animation: ja-entra .7s .2s both; }
.kd-busca { animation: ja-entra .7s .3s both; }

/* abas e botões */
.kd-aba[aria-selected="true"] { box-shadow: 0 0 18px rgba(242, 181, 68, .45); }
.kd-aba { transition: background .15s, color .15s, transform .15s; }
.kd-aba:hover { transform: translateY(-1px); }
.kd-campo input { transition: box-shadow .2s, border-color .2s; }
.kd-campo input:focus { box-shadow: 0 0 0 3px rgba(242, 181, 68, .35), 0 0 24px rgba(242, 181, 68, .2); }
.kd-campo button, .kd-acoes button, .qj-comecar, .qj-form button { transition: transform .12s, box-shadow .2s, filter .2s; }
.kd-campo button:hover:not(:disabled), .kd-acoes button:hover:not(:disabled), .qj-comecar:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.kd-campo button:active:not(:disabled), .qj-comecar:active:not(:disabled) { transform: translateY(0) scale(.98); }
.qj-comecar:not(:disabled) { animation: ja-pulso 2.4s ease-in-out infinite; }

/* linhas de palpite: cada nova linha entra deslizando, e a célula já vira em cascata (kd-vira) */
.kd-tabela tbody tr { animation: ja-linha .45s cubic-bezier(.2, .9, .3, 1) both; }
.kd-celula.certo { animation-name: kd-vira, ja-ok; animation-duration: .55s, 2.6s; animation-delay: var(--atraso, 0s), calc(var(--atraso, 0s) + .6s); animation-iteration-count: 1, 1; animation-fill-mode: backwards, none; }
.kd-celula:hover { transform: translateY(-3px) scale(1.04); transition: transform .15s; z-index: 2; }

/* opções do hub (solo / com a live) e cartas dos killers */
.qj-opcao { transition: transform .18s, box-shadow .25s, border-color .25s; animation: ja-entra .6s both; }
.qj-opcao:nth-child(2) { animation-delay: .12s; }
.qj-opcao:hover, .qj-opcao:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 28px rgba(242, 181, 68, .2); }
.qj-carta { transition: transform .15s, box-shadow .2s, border-color .2s; }
.qj-carta:hover { transform: translateY(-3px) scale(1.03); }
.qj-beta { animation: ja-pulso-beta 3s ease-in-out infinite; }

/* fim de jogo: o painel aparece com destaque e confete quando acerta */
.kd-fim:not([hidden]) { animation: ja-fim .6s cubic-bezier(.2, .9, .3, 1) both; }
.kd-fim:not([hidden]) img { animation: ja-revela 1s cubic-bezier(.2, .9, .3, 1) .15s both; }
.kd-fim.venceu { box-shadow: 0 0 0 1px rgba(242, 181, 68, .5), 0 0 40px rgba(242, 181, 68, .25); }
.ja-confete { position: fixed; inset: 0; pointer-events: none; z-index: 1200; overflow: hidden; }
.ja-confete i { position: absolute; top: -12px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.6); background: var(--c); border-radius: 2px; opacity: 0; animation: ja-cai var(--d) cubic-bezier(.3, .6, .5, 1) var(--a) forwards; }

@keyframes ja-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ja-linha { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes ja-brilho-titulo { 0%, 100% { text-shadow: 0 0 0 rgba(197, 43, 43, 0); } 50% { text-shadow: 0 0 26px rgba(197, 43, 43, .55); } }
@keyframes ja-brilho-faixa { to { background-position: -150% 0; } }
@keyframes ja-nevoa { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes ja-brasas { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-40vh); opacity: 0; } }
@keyframes ja-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 68, .45); } 50% { box-shadow: 0 0 0 10px rgba(242, 181, 68, 0); } }
@keyframes ja-pulso-beta { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes ja-ok { 0% { filter: brightness(1.7); } 100% { filter: none; } }
@keyframes ja-fim { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ja-revela { from { filter: brightness(0) blur(6px); transform: scale(.7) rotate(-6deg); } to { filter: none; transform: none; } }
@keyframes ja-cai { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translate3d(var(--dx), 105vh, 0) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  body.jogo-animado::before, body.jogo-animado::after, .ja-confete { display: none; }
  .kd-cabeca h1, .qj h1, .kd-numero, .kd-sub, .qj-sub, .kd-modos, .kd-legenda, .kd-busca, .kd-tabela tbody tr, .qj-opcao, .qj-comecar, .qj-beta, .kd-fim:not([hidden]), .kd-fim:not([hidden]) img { animation: none !important; }
  .kd-numero { -webkit-text-fill-color: currentColor; background: none; }
}

/* A busca tem animação (cria camada própria): sem isso, a lista de sugestões ficava por baixo dos palpites animados que vêm depois. */
.kd-busca { position: relative; z-index: 30; }

/* Botão de silenciar os sons (Palavra da Névoa e Chat vs Névoa) */
.som-botao { margin-left: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fog-700, #3d2e32); background: var(--fog-900, #151012); color: var(--bone, #f0e7dc); font-size: 17px; line-height: 1; cursor: pointer; transition: transform .12s, border-color .2s; padding: 0; flex: none; }
.som-botao:hover { transform: scale(1.1); border-color: #f2b544; }
.som-botao:focus-visible { outline: 2px solid var(--bone, #f0e7dc); outline-offset: 2px; }
.som-botao[aria-pressed="true"] { opacity: .75; }
.topbar { align-items: center; }