/* Palavra da Névoa: tabuleiro 6x5, teclado na tela e animações (virar, tremer, pular). Usa o resto do visual de killer-do-dia.css. */
.pn { --pn-certo: #2fa84f; --pn-parcial: #e08a12; --pn-errado: #3a3235; }
.pn-cats { display: inline-flex; gap: 6px; }
.pn-cat { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--fog-700, #2b2023); background: transparent; color: var(--ash, #a99d97); font: 700 14px var(--body, 'Barlow', sans-serif); cursor: pointer; }
.pn-cat[aria-pressed="true"] { border-color: #f2b544; color: #f2b544; background: rgba(242, 181, 68, .1); }
.pn-cat:focus-visible { outline: 2px solid var(--bone, #f0e7dc); outline-offset: 2px; }

.pn-opcoes { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }

/* um ou mais tabuleiros lado a lado (Termo, Dueto, Quarteto); o tamanho da caixa muda com o formato */
.pn-quadros { --casa: 62px; --gap: 8px; display: grid; gap: 22px; justify-content: center; margin: 4px auto; }
.pn-quadros.n1 { grid-template-columns: auto; }
.pn-quadros.n2 { --casa: 50px; --gap: 6px; grid-template-columns: repeat(2, auto); }
.pn-quadros.n4 { --casa: 38px; --gap: 4px; grid-template-columns: repeat(4, auto); gap: 14px; }
.pn-quadro { display: grid; gap: var(--gap); align-content: start; }
.pn-quadro.resolvido { opacity: .92; }
.pn-linha { display: grid; grid-template-columns: repeat(5, var(--casa)); gap: var(--gap); }
.pn-linha.tremer { animation: pn-treme .45s; }
.pn-casa { display: grid; place-items: center; width: var(--casa); height: var(--casa); border-radius: 8px; border: 2px solid var(--fog-700, #3d2e32); background: var(--fog-900, #151012); color: var(--bone, #f0e7dc); font: 700 calc(var(--casa) * .48)/1 var(--display, 'Oswald', sans-serif); text-transform: uppercase; transition: border-color .12s, box-shadow .12s; }
.pn-casa.inativa { opacity: .35; }
.pn-casa.ativa { cursor: pointer; }
.pn-casa.ativa:hover { border-color: #8a7378; }
.pn-casa.cheia { border-color: #8a7378; animation: pn-pula .12s ease-out; }
.pn-casa.cursor { border-color: #f2b544; box-shadow: 0 0 0 2px rgba(242, 181, 68, .35), 0 0 14px rgba(242, 181, 68, .25); }
.pn-casa.ativa:focus-visible { outline: 2px solid var(--bone, #f0e7dc); outline-offset: 2px; }
.pn-casa.certo { background: var(--pn-certo); border-color: var(--pn-certo); }
.pn-casa.parcial { background: var(--pn-parcial); border-color: var(--pn-parcial); }
.pn-casa.errado { background: var(--pn-errado); border-color: var(--pn-errado); color: #cfc4bd; }
.pn-casa.vira { animation: pn-vira .5s ease-in-out backwards; animation-delay: var(--atraso, 0s); }
.pn-linha.venceu .pn-casa { animation: pn-salta .6s ease-in-out both; animation-delay: calc(var(--i) * .08s + .5s); }
.pn-teclado { display: grid; gap: 7px; justify-items: center; margin: 6px auto 0; width: min(560px, 100%); }
.pn-fileira { display: flex; gap: 6px; width: 100%; justify-content: center; }
.pn-tecla { flex: 1 1 0; max-width: 46px; min-width: 0; height: 52px; border: 0; border-radius: 7px; background: #3f3438; color: var(--bone, #f0e7dc); font: 700 16px var(--body, 'Barlow', sans-serif); text-transform: uppercase; cursor: pointer; transition: transform .08s, filter .15s, background .25s; padding: 0; }
.pn-tecla:hover { filter: brightness(1.2); }
.pn-tecla:active { transform: scale(.94); }
.pn-tecla.larga { flex: 1.6 1 0; max-width: 72px; font-size: 13px; background: #5a3a40; }


.pn-tecla.colorida { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pn-tecla:focus-visible { outline: 2px solid var(--bone, #f0e7dc); outline-offset: 2px; }

@keyframes pn-vira { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes pn-pula { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pn-treme { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pn-salta { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }

@media (max-width: 900px) { .pn-quadros.n4 { grid-template-columns: repeat(2, auto); gap: 16px 14px; } }
@media (max-width: 480px) {
  .pn-quadros.n1 { --casa: 54px; --gap: 6px; }
  .pn-quadros.n2 { --casa: 30px; --gap: 3px; gap: 10px; }
  .pn-quadros.n4 { --casa: 28px; --gap: 3px; gap: 14px 10px; }
  .pn-tecla { height: 46px; font-size: 14px; }
  .pn-fileira { gap: 4px; }
}@media (prefers-reduced-motion: reduce) { .pn-casa, .pn-linha { animation: none !important; } }

/* mais vida no tabuleiro: o cursor pulsa, a tecla dá um apertão e o fim de jogo tem festa ou susto */
.pn-casa.cursor { animation: pn-cursor 1.1s ease-in-out infinite; }
.pn-tecla.press { animation: pn-aperta .18s ease-out; }
.pn-quadro.recem { animation: pn-brilho .9s ease-out 1; }
.pn-quadros.perdeu .pn-quadro { animation: pn-susto .6s ease-in-out 1; }
.pn-quadros.entrando .pn-quadro { animation: ja-entra .5s cubic-bezier(.2, .9, .3, 1) both; }
.pn-quadros.entrando .pn-quadro:nth-child(2) { animation-delay: .08s; }
.pn-quadros.entrando .pn-quadro:nth-child(3) { animation-delay: .16s; }
.pn-quadros.entrando .pn-quadro:nth-child(4) { animation-delay: .24s; }
@keyframes pn-cursor { 0%, 100% { box-shadow: 0 0 0 2px rgba(242, 181, 68, .35), 0 0 10px rgba(242, 181, 68, .2); } 50% { box-shadow: 0 0 0 3px rgba(242, 181, 68, .55), 0 0 18px rgba(242, 181, 68, .4); } }
@keyframes pn-aperta { 0% { transform: scale(1); } 40% { transform: scale(.88); filter: brightness(1.5); } 100% { transform: scale(1); } }
@keyframes pn-brilho { 0% { filter: brightness(1); } 35% { filter: brightness(1.6) drop-shadow(0 0 14px rgba(47, 168, 79, .7)); } 100% { filter: brightness(1); } }
@keyframes pn-susto { 0%, 100% { transform: translateX(0); filter: none; } 15% { transform: translateX(-10px); filter: saturate(.4) brightness(.8); } 35% { transform: translateX(10px); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pn-casa.cursor, .pn-tecla.press, .pn-quadro, .pn-quadros .pn-quadro { animation: none !important; } }