#platformLobby .announcement-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 10px 6px 14px;
  border: 1px solid rgba(216, 199, 159, .28);
  border-left: 3px solid #81b8ae;
  border-radius: 6px;
  color: #eaf1ed;
  background: #172c31;
}

#platformLobby .announcement-bar[hidden] { display: none !important; }
#platformLobby .announcement-bar[data-type="maintenance"] {
  border-left-color: #d8a36f;
  background: #302a29;
}

.announcement-type { flex: 0 0 auto; color: #c8d9cf; font-size: 12px; font-weight: 800; }
.announcement-message { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.announcement-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; }
#platformLobby .announcement-controls .icon-button { width: 44px; height: 44px; min-height: 44px; padding: 10px; box-shadow: none; }
#platformLobby .announcement-controls .icon-button svg { width: 17px; height: 17px; }
#platformLobby .announcement-controls [hidden] { display: none !important; }
.announcement-count { min-width: 32px; color: #aebfbb; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.announcement-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.announcement-message.announcement-enter { animation: announcement-enter 220ms ease-out; }
@keyframes announcement-enter { from { opacity: .25; transform: translateY(4px); } to { opacity: 1; transform: none; } }

#platformLobby .announcement-dialog {
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px;
  border: 1px solid rgba(216, 199, 159, .36);
  border-radius: 6px;
  color: #edf3f2;
  background: #152a2f;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .46);
}
#platformLobby .announcement-dialog::backdrop { background: rgba(2, 11, 15, .72); }
#platformLobby .announcement-dialog:not([open]) { display: none; }
.announcement-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-dialog-heading h2 { font-size: 1.15rem; }
#platformLobby .announcement-dialog-heading button { width: 44px; height: 44px; min-height: 44px; }
#announcementDialogMessage { margin: 16px 0; overflow-wrap: anywhere; line-height: 1.6; }
.announcement-dialog-link { display: inline-block; min-height: 44px; padding: 10px 0; color: #f1d596; text-decoration: underline; }
.announcement-dialog-link[hidden] { display: none; }

@container platform-shell (max-width: 760px) {
  #platformLobby .announcement-bar { min-height: 48px; gap: 7px; padding: 5px 7px 5px 10px; }
  .announcement-type { font-size: 11px; }
  .announcement-message { font-size: 13px; }
  .announcement-count { min-width: 27px; }
}

@container platform-shell (max-width: 380px) {
  #platformLobby .announcement-bar { gap: 5px; }
  .announcement-type { display: none; }
  .announcement-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-message.announcement-enter { animation: none; }
}
