/* Destruitor Idle — eventos da cidade: o quadro do evento no alto da tela (eventos.js) */
.ev-quadro { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 16px); padding: 8px 10px 8px 8px; border-radius: 10px;
  background: linear-gradient(#1d1410f2, #120d0bf0); border: 1px solid #b4672a; box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(224, 120, 40, .25);
  color: #f3e6d0; font-size: 13px; animation: ev-entra .25s ease-out; }
.ev-quadro[data-fase="aviso"] { border-color: #d8a64a; }
.ev-quadro[data-fase="fim"] { border-color: #3c4458; background: #10131df0; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
@keyframes ev-entra { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ev-img { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #0a0807; border: 1px solid #3a2a1c; overflow: hidden; }
.ev-img canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.ev-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ev-t b { font-size: 14px; color: #ffd27a; }
.ev-tag { font: 800 10px/14px Verdana, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 0 5px; border-radius: 4px; background: #b4672a; color: #1b1006; }
.ev-m { color: #d9cbb3; }
.ev-dif { font-weight: 700; }
.ev-l { color: #e2d4bd; }
.ev-x { font-size: 12px; color: #a8e6b1; }
.ev-x.muted { color: var(--dim, #9aa0ad); }
.ev-hp { height: 5px; width: 220px; max-width: 100%; border-radius: 3px; background: #000; overflow: hidden; margin-top: 2px; }
.ev-hp i { display: block; height: 100%; background: linear-gradient(90deg, #c01010, #e05020 40%, #20c020); border-radius: 3px; transition: width .4s; }
.ev-bt { flex: none; padding: 7px 12px; font-size: 13px; }
.ev-fecha { flex: none; align-self: flex-start; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #4a3a2a; background: #1b1410; color: #c9b79c; font-size: 14px; line-height: 18px; padding: 0; }
.ev-fecha:hover { border-color: #d8a64a; color: #ffd27a; }
@media (max-width: 640px) {
  .ev-quadro { top: 48px; gap: 8px; padding: 6px 8px 6px 6px; font-size: 12px; }
  .ev-img, .ev-img canvas { width: 32px; height: 32px; }
  .ev-t b { font-size: 13px; }
  .ev-m { display: none; }
  .ev-hp { width: 150px; }
  .ev-bt { padding: 6px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ev-quadro { animation: none; } .ev-hp i { transition: none; } }