/* Banners for big moments (announce.js), floating over the top of the map. */
.board-wrap { position: relative; }
.announce { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, 90%); }
.announce-card {
  pointer-events: auto; cursor: grab; touch-action: none; width: 100%;
  display: flex; flex-direction: column; gap: 2px; padding: 10px 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-left: 5px solid var(--who, var(--orange)); border-radius: 10px; box-shadow: var(--shadow);
  animation: announce-in 0.25s ease-out;
}
.announce-card b { font-size: 1rem; }
.announce-card.is-dragging { cursor: grabbing; user-select: none; }
.announce-card span { font-size: 0.88rem; color: var(--muted); }
.announce-card .announce-meaning { color: var(--text); }
.announce-card.ev-progress { padding: 14px 18px; }
.announce-card.ev-progress .announce-meaning { font-size: 1rem; }
.announce-card.ev-barbarians { border-left-color: var(--missing); }
.announce-card.ev-win { border-width: 2px 2px 2px 8px; padding: 16px 20px; }
.announce-card.ev-win b { font-size: 1.4rem; }
@keyframes announce-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .announce-card { animation: none; } }

/* Countdown ring: empties over the same time the banner stays, then the banner goes. */
.announce-card { position: relative; padding-right: 34px; }
.announce-card.ev-progress { padding-right: 34px; }
.announce-timer {
  position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; pointer-events: none;
}
.announce-timer .track { fill: none; stroke: var(--border); stroke-width: 2; }
.announce-timer .left {
  fill: none; stroke: var(--who, var(--orange)); stroke-width: 2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 10px 10px;
  animation: announce-countdown linear forwards;
}
@keyframes announce-countdown { to { stroke-dashoffset: var(--ring); } }