/* Raio de Terror: botões de camada (Nível 1, 2, 3 e Perseguição), barras de som animadas e lista de palpites. Usa o resto do visual de killer-do-dia.css. */
.tr-player { display: grid; gap: 14px; justify-items: center; }
.tr-camadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: min(820px, 100%); }
.tr-camada { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--fog-700, #2b2023); background: linear-gradient(180deg, var(--fog-900, #151012), #0f0b0d); color: var(--bone, #f0e7dc); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .25s; }
.tr-camada:hover { transform: translateY(-3px); border-color: var(--rust, #b3121f); }
.tr-camada:focus-visible { outline: 2px solid var(--bone, #f0e7dc); outline-offset: 2px; }
.tr-play { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--rust, #b3121f); color: #fff; font-size: 16px; padding-left: 3px; }
.tr-camada.tocando { border-color: #f2b544; box-shadow: 0 0 0 1px rgba(242, 181, 68, .35), 0 0 28px rgba(242, 181, 68, .2); }
.tr-camada.tocando .tr-play { background: #f2b544; color: #0b0809; padding-left: 0; }
.tr-camada.tocando .tr-play::before { content: ''; }
.tr-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tr-texto strong { font-family: var(--display, 'Oswald', sans-serif); font-size: 19px; letter-spacing: .02em; }
.tr-texto small { color: var(--ash, #a99d97); font-size: 13px; }
.tr-barras { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.tr-barras i { display: block; width: 4px; height: 6px; border-radius: 2px; background: #5a4a4e; }
.tr-camada.tocando .tr-barras i { background: #f2b544; animation: tr-onda .9s ease-in-out infinite; }
.tr-camada.tocando .tr-barras i:nth-child(2) { animation-delay: .12s; }
.tr-camada.tocando .tr-barras i:nth-child(3) { animation-delay: .24s; }
.tr-camada.tocando .tr-barras i:nth-child(4) { animation-delay: .36s; }
.tr-camada.tocando .tr-barras i:nth-child(5) { animation-delay: .48s; }
@keyframes tr-onda { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.tr-volume { display: flex; align-items: center; gap: 10px; color: var(--ash, #a99d97); font-size: 14px; }
.tr-volume input { width: 160px; accent-color: #f2b544; }
.tr-dica { margin: 0; color: var(--ash, #a99d97); font-size: 14px; text-align: center; max-width: 560px; }

.tr-palpites { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; width: min(560px, 100%); }
.tr-palpite { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--fog-700, #2b2023); background: var(--fog-900, #151012); animation: ja-linha .4s cubic-bezier(.2, .9, .3, 1) both; }
.tr-palpite img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.tr-palpite .nome { flex: 1; font-weight: 600; }
.tr-palpite .marca { font-weight: 700; }
.tr-palpite.errado { border-color: rgba(197, 43, 43, .5); }
.tr-palpite.errado .marca { color: #e04b4b; }
.tr-palpite.certo { border-color: rgba(47, 168, 79, .7); }
.tr-palpite.certo .marca { color: #3cc062; }

@media (prefers-reduced-motion: reduce) { .tr-camada.tocando .tr-barras i { animation: none; height: 16px; } }

/* camadas ainda trancadas (liberam a cada palpite errado) e a que acabou de abrir */
.tr-camada.trancada { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.tr-camada.trancada:hover { transform: none; border-color: var(--fog-700, #2b2023); }
.tr-camada.trancada .tr-play { background: #3a2f33; font-size: 15px; padding-left: 0; }
.tr-camada.nova { animation: tr-libera 1s ease-out 1; }
@keyframes tr-libera { 0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(242, 181, 68, .8); } 60% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(242, 181, 68, 0); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-camada.nova { animation: none; } }