/* announce.css — floating clan-announcement toasts (top-right). Render-only, off the lockstep. */
#announceToasts { position: fixed; top: 14px; right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none; }
.announceToast {
  pointer-events: auto; position: relative; display: flex; gap: 11px; align-items: flex-start;
  background: #101b2e; border: 1px solid #2f86d6; border-left: 4px solid #5cc8ff; border-radius: 12px;
  padding: 12px 30px 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); color: #e8eef7;
  font-family: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; cursor: pointer;
  transform: translateX(120%); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.announceToast.in { transform: translateX(0); opacity: 1; }
.announceToast .atIcon { font-size: 20px; line-height: 1.2; flex: none; }
.announceToast .atHead { font: 700 12px 'Chakra Petch', sans-serif; color: #5cc8ff; letter-spacing: .02em; margin-bottom: 3px; }
.announceToast .atText { font: 500 13px/1.45 'Chakra Petch', sans-serif; word-break: break-word; }
.announceToast .atMute { position: absolute; top: 6px; right: 8px; background: none; border: none; cursor: pointer; font-size: 13px; opacity: .7; }
.announceToast .atMute:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .announceToast { transition: opacity .2s ease; transform: none; } }