/*
 * @file Aparência do Chat vs Névoa: cartão escuro de névoa com a imagem escondida atrás de pixels, barra de tempo que esquenta
 * (verde-água -> âmbar -> vermelho), placar enxuto e pódio no fim. Só transform/opacity/width animam (leve no navegador do OBS).
 */
.qz {
  --qz-cor: #f2b544; --qz-cor-b: #b3790f; --qz-brilho: rgba(242, 181, 68, 0.26);
  --qz-fonte: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --qz-digitos: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  position: relative; display: inline-block; width: 380px; max-width: 100%; padding: 14px 18px 16px; border-radius: 18px;
  font-family: var(--qz-fonte); color: #f0e7dc; user-select: none; isolation: isolate; overflow: hidden;
  background: radial-gradient(130% 90% at 50% 0%, rgba(29, 22, 25, 0.97), rgba(11, 8, 9, 0.98) 72%);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 34px var(--qz-brilho), inset 0 0 0 1px rgba(240, 231, 220, 0.1);
  animation: qz-entra 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.qz.qz-urgente { --qz-cor: #f05a5a; --qz-cor-b: #b3121f; --qz-brilho: rgba(240, 90, 90, 0.36); }
.qz[data-fase="revelacao"][data-resultado="acerto"] { --qz-cor: #ffd45e; --qz-cor-b: #c98d17; --qz-brilho: rgba(255, 212, 94, 0.4); }
.qz[data-fase="revelacao"][data-resultado="erro"] { --qz-cor: #a99d97; --qz-cor-b: #5a4a4e; --qz-brilho: rgba(169, 157, 151, 0.22); }
.qz[data-fase="fim"] { --qz-cor: #ffd45e; --qz-cor-b: #c98d17; --qz-brilho: rgba(255, 212, 94, 0.4); }
.qz[hidden], .qz [hidden] { display: none !important; }

.qz-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qz-modo { font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--qz-cor); }
.qz-rodada { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; color: #a99d97; }
.qz-tempo { font-family: var(--qz-digitos); font-size: 22px; font-weight: 600; color: #f0e7dc; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

.qz-barra { height: 7px; margin: 8px 0 12px; border-radius: 4px; background: rgba(240, 231, 220, 0.09); overflow: hidden; }
.qz-barra i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--qz-cor-b), var(--qz-cor)); box-shadow: 0 0 12px var(--qz-cor); transition: width 0.12s linear; }

.qz-palco {
  position: relative; width: 300px; height: 300px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2b2023, #0b0809 75%); box-shadow: inset 0 0 0 1px rgba(240, 231, 220, 0.08);
}
.qz-img { display: block; width: 300px; height: 300px; image-rendering: pixelated; }
.qz-contagem {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--qz-digitos); font-size: 150px; font-weight: 600;
  color: #fff; text-shadow: 0 0 30px var(--qz-brilho), 0 6px 14px rgba(0, 0, 0, 0.7);
}
.qz-resposta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(11, 8, 9, 0.93) 55%);
  animation: qz-sobe 0.45s ease-out both;
}
.qz-resposta strong { display: block; font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--qz-cor); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.qz-resposta span { display: block; margin-top: 3px; font-size: 16px; color: #f0e7dc; }
.qz-pausa {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 8, 9, 0.72);
  font-size: 30px; font-weight: 700; letter-spacing: 0.3em; color: #f2b544;
}

.qz-dica { margin: 12px 0 0; min-height: 22px; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: 0.04em; color: #d8cdc3; }
.qz-ultimos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; min-height: 0; margin-top: 4px; }
.qz-chute { font-size: 14px; color: #a99d97; }
.qz-chute b { color: #f0e7dc; font-weight: 600; }

.qz-placar, .qz-podio { margin-top: 10px; display: grid; gap: 3px; }
.qz-placar:empty { display: none; }
.qz-linha { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: baseline; padding: 3px 10px; border-radius: 8px; background: rgba(240, 231, 220, 0.04); }
.qz-linha:first-child { background: rgba(255, 212, 94, 0.1); }
.qz-pos { font-weight: 700; color: #a99d97; }
.qz-linha:first-child .qz-pos { color: #ffd45e; }
.qz-nome { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-acertos { font-family: var(--qz-digitos); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.qz-podio { text-align: center; padding: 8px 0 0; }
.qz-podio-titulo { font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: #a99d97; }
.qz-podio-nome { font-size: 40px; font-weight: 700; line-height: 1.05; color: #ffd45e; text-shadow: 0 0 22px rgba(255, 212, 94, 0.45); overflow-wrap: anywhere; }
.qz-podio-sub { margin-bottom: 8px; font-size: 16px; color: #f0e7dc; }
.qz-podio .qz-linha { text-align: left; }

.qz[data-fase="ocioso"] { opacity: 0.88; }
.qz[data-fase="ocioso"] .qz-palco, .qz[data-fase="ocioso"] .qz-barra { display: none; }
.qz[data-fase="fim"] .qz-palco, .qz[data-fase="fim"] .qz-barra { display: none; }

@keyframes qz-entra { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes qz-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qz-erro { display: inline-block; padding: 10px 14px; border-radius: 10px; background: rgba(29, 12, 14, 0.92); color: #f05a5a; font: 600 16px 'Barlow Condensed', system-ui, sans-serif; }