/* ══════════════════════════════════════════════════════════════
   Component — Banner Toasts
   Single region (#banner-toasts) under the phase pill that hosts
   transient warning / decision / interrupt banners. Each banner
   shares the .banner base; variants colour/border/glow them.

   Visibility is class-driven via .banner-hidden — phase code uses
   classList.toggle('banner-hidden', ...) instead of style.display.
   ══════════════════════════════════════════════════════════════ */

/* Toast region inside #phase-header — flows in document order beneath
   the phase pill so banners stack vertically without overlapping it.
   Each banner inherits the phase-header's centered column width. */
#banner-toasts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  pointer-events: none;
}

.banner {
  box-sizing: border-box;
  padding: 6px 12px;
  font: 700 10px/1 'Rajdhani', sans-serif;
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0,0,0,.4);
}

.banner-hidden { display: none !important; }

/* ── Severity variants ───────────────────────────────────────
   Two semantic classes:
     .banner-error  red   — blocks Confirm + End buttons (errorBannerRegistry)
     .banner-warn   orange — non-blocking warning (player may proceed)
   Decision prompts use .banner-prompt; their inner DOM (decision-prompt,
   interrupt-banner) carries its own faction-tinted chrome.
   ───────────────────────────────────────────────────────── */

.banner-error {
  background: rgba(204,34,34,0.94);
  color: #fff;
  border: 2px solid #e84444;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.banner-warn {
  background: rgba(255,160,0,.94);
  color: #fff;
  border: 2px solid #ffaa40;
}

/* Decision prompt + interrupt: keep their own rich styling from
   game/css/main.css (.decision-prompt, .interrupt-banner). The banner
   wrapper just exposes the hide/show contract via .banner-hidden. */
.banner-prompt,
.banner-interrupt {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  pointer-events: auto;
}