/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.font-riftwars {
  font-family: "Zen Dots", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
}

.attack-alert {
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.95), rgba(220, 38, 38, 0.95));
  border: 1px solid rgba(248, 113, 113, 0.7);
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(248, 113, 113, 0.25);
  color: #fee2e2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.35em;
  padding: 0.9rem 1.5rem;
  position: relative;
  text-transform: uppercase;
  width: 100%;
}

.attack-alert::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(248, 113, 113, 0.35);
  pointer-events: none;
}

.attack-alert__label {
  font-size: 1.4rem;
  font-weight: 800;
}

.attack-alert__support {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(254, 202, 202, 0.9);
}

.animate-attack-pulse {
  animation: attack-alert-pulse 1.3s ease-in-out infinite;
}

@keyframes attack-alert-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(248, 113, 113, 0.2);
  }
  50% {
    transform: scale(1.01);
    box-shadow: 0 16px 40px rgba(248, 113, 113, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 25px rgba(248, 113, 113, 0.2);
  }
}