/* Horda em 7 dias: AS 5 IDEIAS (2026-11-06). ideias.js */
.id-caixa { margin: 8px 0; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px; line-height: 1.35; }
.id-caixa small { display: block; color: #aab3c5; font-size: 12px; margin-top: 2px; }
.id-ok { background: rgba(139, 211, 74, 0.12); border-color: rgba(139, 211, 74, 0.5); }
.id-ajuda { background: rgba(124, 196, 255, 0.1); border-color: rgba(124, 196, 255, 0.4); }
.id-evento { background: rgba(120, 90, 255, 0.12); border-color: rgba(160, 140, 255, 0.5); }

/* 1. sequência e baú */
.id-seq, .id-bau { display: flex; align-items: center; gap: 10px; }
.id-seq > span:last-child, .id-bau > span:not(.id-bau-ic) { flex: 1; min-width: 0; }
.id-fogos { display: flex; gap: 2px; flex: none; }
.id-fogos i { font-style: normal; font-size: 20px; filter: grayscale(1) opacity(0.35); }
.id-fogos i.on { filter: none; animation: id-fogo 1.2s ease-in-out infinite; }
@keyframes id-fogo { 50% { transform: translateY(-2px) scale(1.08); } }
.id-bau { background: rgba(255, 211, 107, 0.12); border-color: rgba(255, 211, 107, 0.6); box-shadow: 0 0 18px rgba(255, 211, 107, 0.25); }
.id-bau-ic { font-size: 30px; flex: none; animation: id-bau 1.4s ease-in-out infinite; }
@keyframes id-bau { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
.id-bau button { flex: none; padding: 9px 12px; font-size: 13px; }
.id-abriu { animation: id-pulo 0.5s ease-out; }
@keyframes id-pulo { from { transform: scale(0.92); opacity: 0.4; } }
.id-prox { margin: 6px 0 8px; font-size: 13px; color: #cfd6e4; line-height: 1.35; }

/* 2. chefe */
.id-quase b { display: block; }
.id-barra { display: block; height: 8px; margin: 6px 0 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.id-barra s { display: block; height: 100%; border-radius: 4px; }
.id-chefe { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 10px; border-radius: 12px;
  background: rgba(229, 56, 59, 0.08); border: 1px solid rgba(229, 56, 59, 0.4); }
.id-chefe-fig { position: relative; width: 58px; height: 70px; flex: none; }
.id-chefe-fig img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; animation: id-chefe-brilha 5s ease-in-out infinite; }
/* a "aulinha" de 5 s: ele brilha vermelho, a mira aparece na cabeça e o toque corta */
@keyframes id-chefe-brilha {
  0%, 30%, 100% { filter: none; transform: none; }
  38%, 52% { filter: drop-shadow(0 0 6px #ff2a2a) drop-shadow(0 0 2px #ff2a2a) brightness(1.15); }
  56% { transform: translateX(-3px) rotate(-4deg); filter: brightness(1.8); }
  64% { transform: none; filter: none; }
}
.id-mira { position: absolute; left: 50%; top: 6%; width: 26px; height: 26px; margin-left: -13px; border: 2.5px solid #ffd36b; border-radius: 50%;
  opacity: 0; animation: id-mira 5s ease-in-out infinite; }
.id-mira::before, .id-mira::after { content: ""; position: absolute; background: #ffd36b; }
.id-mira::before { left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; }
.id-mira::after { top: 50%; left: -6px; right: -6px; height: 2px; margin-top: -1px; }
@keyframes id-mira { 0%, 40% { opacity: 0; transform: scale(1.6); } 46%, 56% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(0.7); } }
.id-chefe-fig em { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); font: 900 10px var(--fonte); color: #ffd36b; font-style: normal;
  text-shadow: 0 1px 3px #000; opacity: 0; animation: id-toque 5s ease-in-out infinite; }
@keyframes id-toque { 0%, 46% { opacity: 0; } 50%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
.id-chefe-txt { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.id-chefe-txt small { display: block; color: #cfd6e4; font-size: 12.5px; margin-top: 2px; }

/* 3. reforço */
.id-reforco { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 211, 107, 0.08); border: 1px dashed rgba(255, 211, 107, 0.5); font-size: 13px; line-height: 1.35; }
.id-reforco span { flex: 1; min-width: 0; }
.id-reforco button { flex: none; padding: 8px 12px; font-size: 13px; }

/* 4. Horda das 21h */
#id-evento { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top));
  max-width: calc(100% - 140px); padding: 6px 14px; border-radius: 16px; border: 1px solid rgba(160, 140, 255, 0.6);
  background: rgba(22, 16, 52, 0.94); color: var(--texto); font: 700 12px/1.25 var(--fonte); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); cursor: pointer; }
#id-evento span, #id-evento small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#id-evento small { font-size: 11px; font-weight: 600; color: #cfd6e4; }
#id-evento.some { display: none; }
#id-evento.ao-vivo { border-color: var(--sangue); background: rgba(52, 10, 14, 0.95); box-shadow: 0 0 18px rgba(229, 56, 59, 0.45); }
.id-ponto { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--sangue); vertical-align: 1px;
  animation: id-pisca 1s steps(2) infinite; }
@keyframes id-pisca { 50% { opacity: 0.2; } }
.id-ev-numeros { display: flex; gap: 10px; margin: 10px 0; }
.id-ev-numeros div { flex: 1; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.id-ev-numeros b { display: block; font-size: 26px; font-weight: 900; color: var(--luz); line-height: 1.1; }
.id-ev-numeros small { color: #aab3c5; font-size: 12px; }
.id-ev-relogio { margin: 4px 0 10px; }
.id-ev-painel .largo + .largo { margin-top: 8px; }

/* 5. app */
#j-mapa-lado #j-mapa-app.some { display: none; }
.id-app .j-titulo { margin-top: 12px; }
.id-lista { margin: 6px 0 8px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.id-app .largo + .largo, .id-app .id-caixa + .largo { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .id-fogos i.on, .id-bau-ic, .id-chefe-fig img, .id-mira, .id-chefe-fig em, .id-ponto, .id-abriu { animation: none; }
  .id-mira { opacity: 1; }
}