/* ── Start-screen battle alerts ───────────────────────────────────────────────
 * Bottom-of-menu chips surfacing pending Live Rush / Dual battle invites and
 * "your turn" battles, so the player can jump straight into the match instead of
 * walking through Enter Cave → mode select → the multiplayer lobby. Rendered by
 * js/startup-battle-alerts.js; hidden whenever there is nothing to act on.
 */

.startup-battle-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: min(320px, 78vw);
  margin: 6px auto 0;
}

.startup-battle-alerts[hidden] {
  display: none;
}

.crba-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(42, 246, 255, 0.45);
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.92), rgba(6, 14, 26, 0.92));
  box-shadow: 0 0 16px rgba(42, 246, 255, 0.18), inset 0 0 12px rgba(42, 246, 255, 0.06);
  color: var(--cr-white, #eff9ff);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  animation: crba-pop 0.28s ease both;
}

.crba-chip:active {
  transform: scale(0.98);
}

.crba-chip.crba-chip--live {
  border-color: rgba(255, 143, 92, 0.5);
  box-shadow: 0 0 16px rgba(255, 143, 92, 0.2), inset 0 0 12px rgba(255, 143, 92, 0.07);
}

.crba-chip__icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(42, 246, 255, 0.6));
}

.crba-chip--live .crba-chip__icon {
  filter: drop-shadow(0 0 6px rgba(255, 143, 92, 0.65));
}

.crba-chip__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.crba-chip__title {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crba-chip__sub {
  font-size: 0.72rem;
  color: rgba(239, 249, 255, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crba-chip__go {
  flex: 0 0 auto;
  font-size: 1rem;
  color: rgba(239, 249, 255, 0.55);
}

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

/* Respect the reduce-effects / performance mode toggle. */
body.reduce-effects .crba-chip {
  animation: none;
  box-shadow: none;
}