/* ═════════════════════════════════════════════════════════════════════════
   Battle AIrena — Banner Announcements (shared, Item 1 / T113)
   Paired with /shared/announcements.js. A vertical stack of full-width strips
   between the header and the panels, on both the projection and play
   dashboards. Severity tiers reuse the semantic tokens bound in base.css:
   info → --severity-info (neutral), important → --severity-important (amber),
   critical → --severity-error (red). The region scrolls if many stack rather
   than crushing the panels below.
   ═════════════════════════════════════════════════════════════════════════ */

@layer defaults {

.announcement-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
}

.announcement-banner[hidden] { display: none; }

.announcement {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left-width: 6px;
  border-radius: 3px;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  word-wrap: break-word;
  animation: announcement-in 0.2s ease-out;
}

.announcement-info {
  border-left-color: var(--severity-info);
}

.announcement-important {
  border-color: var(--severity-important);
  background: color-mix(in srgb, var(--severity-important) 14%, var(--panel));
  color: var(--severity-important);
  font-weight: 600;
}

.announcement-critical {
  border-color: var(--severity-error);
  background: color-mix(in srgb, var(--severity-error) 16%, var(--panel));
  color: var(--severity-error);
  font-weight: 700;
}

@keyframes announcement-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

}