/*! Card Battle Lab. Copyright (c) 2026 Dave Skilton. All rights reserved. See /LICENSE. https://cardbattlelab.com/ */
.system-message {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  height: max(32px, calc(36px * var(--gcg-ui-density, 1)));
  padding: 0 max(10px, calc(12px * var(--gcg-ui-density, 1)));
  box-sizing: border-box;
  color: var(--c-text-hi);
  background: var(--panel-bg);
  border-top: 1px solid var(--c-border-subtle);
  border-bottom: 1px solid var(--c-border-subtle);
  font-family: var(--font-body);
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.25;
}
.system-message[hidden] {
  display: none !important;
}
.system-message-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-accent);
}
.system-message-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.system-message-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: system-message-scroll var(--system-message-duration, 18s) linear infinite;
}
.system-message-cycle {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 48px;
  padding-inline-end: 48px;
}
.system-message-item {
  flex: 0 0 auto;
  white-space: nowrap;
}
.system-message:hover .system-message-track {
  animation-play-state: paused;
}
.system-message-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#bootOverlay .system-message--boot {
  align-self: stretch;
  width: 100%;
}
body:not(.pvp-lobby) .system-message--match {
  display: none;
}
@keyframes system-message-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--system-message-travel, 400px)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .system-message {
    height: auto;
    min-height: max(32px, calc(36px * var(--gcg-ui-density, 1)));
    padding-block: 6px;
  }
  .system-message-viewport {
    overflow: visible;
  }
  .system-message-track {
    width: 100%;
    animation: none;
  }
  .system-message-cycle {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px 24px;
    padding-inline-end: 0;
  }
  .system-message-item {
    white-space: normal;
  }
  .system-message-cycle + .system-message-cycle {
    display: none;
  }
}