/**
 * Global event banner on the main game, and the admin panel.
 */
.lsx-event-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  color: #fff;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
}

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

.lsx-event-banner[data-event="volcano"] {
  background: linear-gradient(90deg, #7f1d1d, #ea580c, #f59e0b);
}

.lsx-event-banner[data-event="void"] {
  background: linear-gradient(90deg, #0b1026, #2e1065, #7c3aed);
}

.lsx-event-banner[data-event="tornado"] {
  background: linear-gradient(90deg, #334155, #0e7490, #22d3ee);
}

.lsx-event-banner i {
  font-size: 1.4rem;
}

.lsx-event-banner__time {
  font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}

/* Admin panel. */
.lsx-admin-status {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid #d8dce8;
  background: #f5f7ff;
}

.lsx-admin-status.is-live {
  border-color: #ea580c;
  background: #fff7ed;
}

.lsx-admin-status__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.lsx-admin-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.lsx-admin-event {
  padding: 1.25rem;
  border-radius: 14px;
  color: #fff;
}

.lsx-admin-event p,
.lsx-admin-event label {
  color: rgba(255, 255, 255, 0.9);
}

.lsx-admin-event--volcano {
  background: linear-gradient(135deg, #7f1d1d, #ea580c);
}

.lsx-admin-event--void {
  background: linear-gradient(135deg, #0b1026, #4c1d95);
}

.lsx-admin-event--tornado {
  background: linear-gradient(135deg, #334155, #0e7490);
}

.lsx-admin-event__icon {
  font-size: 2.5rem;
}

.lsx-admin-event__name {
  color: #fff;
  margin: 0.25rem 0;
}

/* Secrets page: secret rarities not found yet. */
.lsx-secrets-table tr.is-undiscovered td:first-child {
  opacity: 0.45;
}

/* Several events (live and coming up) in the banner. */
.lsx-event-banner {
  flex-direction: column;
  align-items: stretch;
}

.lsx-event-banner__row {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lsx-event-banner__row.is-upcoming {
  opacity: 0.85;
  font-weight: 600;
  font-size: 0.95em;
}

.lsx-event-banner[data-event="luck"],
.lsx-event-banner[data-event="upcoming"] {
  background: linear-gradient(90deg, #14532d, #16a34a 50%, #0b1026);
}

.lsx-event-banner[data-event="upcoming"] {
  background: linear-gradient(90deg, #1e1b4b, #312e81);
}