* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: transparent;
  width: 100vw; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ══ CARTE D'ALERTE — violet sombre, noir, étoiles blanches ══ */
.alert-box {
  --accent: #6d28d9;
  position: relative;
  width: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(91,33,182,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(59,7,100,.30) 0%, transparent 60%),
    linear-gradient(135deg, #030106 0%, #08030f 55%, #0f0520 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  box-shadow: 0 0 0 1px rgba(109,40,217,.15), 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.04);
}
.alert-box::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), #e9d5ff, var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent); border-radius: 2px; z-index: 3;
}

/* Champ d'étoiles : deux couches de points blancs qui scintillent en décalé */
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-repeat: repeat; }
.stars-a {
  background-image:
    radial-gradient(1.9px 1.9px at 12% 24%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 34% 78%, #fff 50%, transparent 52%),
    radial-gradient(2.3px 2.3px at 58% 16%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 76% 62%, #fff 50%, transparent 52%),
    radial-gradient(1.9px 1.9px at 92% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 46% 50%, #e9d5ff 50%, transparent 52%);
  animation: twinkle 3.2s ease-in-out infinite;
}
.stars-b {
  background-image:
    radial-gradient(1.5px 1.5px at 22% 60%, #fff 50%, transparent 52%),
    radial-gradient(2.1px 2.1px at 66% 84%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 84% 14%, #e9d5ff 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 6% 82%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 52% 34%, #fff 50%, transparent 52%);
  animation: twinkle 4.4s ease-in-out infinite reverse;
}
@keyframes twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* Petites étoiles à 4 branches */
.spark { position: absolute; fill: #fff; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 5px rgba(216,180,254,.9)); opacity: 0; animation: spark 3.6s ease-in-out infinite; }
.spark.s1 { width: 13px; height: 13px; top: 12px; right: 74px; }
.spark.s2 { width: 10px; height: 10px; bottom: 16px; right: 28px; animation-delay: 1.1s; }
.spark.s3 { width: 11px; height: 11px; top: 40%; left: 96px; animation-delay: 2.2s; }
@keyframes spark { 0%,100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45%,55% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* Paliers spéciaux : voile plus lumineux + bordure qui respire violet ↔ blanc */
.alert-box.legendary {
  border-color: rgba(196,181,253,.75);
  animation: legend-glow 2.4s ease-in-out infinite;
}
.alert-box.legendary .spark { width: 15px; height: 15px; }
@keyframes legend-glow {
  0%,100% { box-shadow: 0 0 30px rgba(109,40,217,.5), 0 0 0 1px rgba(196,181,253,.3); }
  50%     { box-shadow: 0 0 50px rgba(139,92,246,.65), 0 0 0 1px rgba(233,213,255,.5); }
}

.alert-box.show { animation: alert-in .55s cubic-bezier(.34,1.4,.64,1) forwards; }
.alert-box.show.legendary { animation: alert-in .55s cubic-bezier(.34,1.4,.64,1) forwards, legend-glow 2.4s ease-in-out .55s infinite; }
.alert-box.hide { animation: alert-out .45s ease-in forwards; }
@keyframes alert-in  { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes alert-out { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* ══ AVATAR + BADGE ══ */
.alert-logo-wrap { width: 78px; height: 78px; flex-shrink: 0; position: relative; z-index: 2; }
.alert-logo-wrap img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: logo-pulse 2.2s ease-in-out infinite;
}
@keyframes logo-pulse { 0%,100% { box-shadow: 0 0 12px var(--accent); } 50% { box-shadow: 0 0 26px var(--accent), 0 0 52px color-mix(in srgb, var(--accent) 45%, transparent); } }
.type-badge {
  position: absolute; bottom: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%;
  background: #050208; border: 1.5px solid var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 3;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.type-badge svg { width: 15px; height: 15px; filter: drop-shadow(0 0 3px var(--accent)); }

/* ══ TEXTE ══ */
.alert-content { flex: 1; z-index: 2; min-width: 0; }
.alert-type {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 55%, #f3e8ff);
  margin-bottom: 3px; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.alert-name {
  font-family: 'Cinzel', serif; font-size: 23px; font-weight: 900; color: #fff; line-height: 1.2;
  text-shadow: 0 0 14px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
  margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.alert-msg {
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
  color: rgba(221,201,250,.72); letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}

/* ══ TIMER ══ */
.timer-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.05); overflow: hidden; z-index: 3; }
.timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2e1065, var(--accent), #ddd6fe); transform-origin: left; }
.alert-box.show .timer-fill { animation: timer-drain linear forwards; }
@keyframes timer-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }