/*====================================================
Sommaire (Table des matières)
1. Overlay global
2. Backdrop & effets
3. Panneau principal
4. Textes & indicateurs
5. Statut
6. États & animations
7. Responsive
====================================================*/

/* 1. Overlay global */

.va-levelUpOverlay{
  --va-level-hsl:190 95% 70%;
  --va-glow-hsl:190 95% 70%;
  --va-gold-hsl:45 100% 58%;
  --va-text-violet-hsl:248 100% 77.45%;
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  will-change:opacity;
  transition:opacity .32s ease, visibility .32s ease;
}

.va-levelUpOverlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* 2. Backdrop & effets */

.va-levelUpOverlay__backdrop{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(108, 138, 255, 0.16) 0%, rgba(108, 138, 255, 0) 28%),
    radial-gradient(circle at 18% 20%, rgba(154, 112, 255, 0.10) 0%, rgba(154, 112, 255, 0) 32%),
    radial-gradient(circle at 82% 72%, rgba(255, 121, 203, 0.10) 0%, rgba(255, 121, 203, 0) 30%),
    linear-gradient(180deg, rgba(7, 12, 28, 0.74), rgba(3, 6, 16, 0.96));
  transform:translateZ(0);
}

.va-levelUpOverlay__backdrop::before,
.va-levelUpOverlay__backdrop::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
}

.va-levelUpOverlay__backdrop::before{
  top:-14%;
  left:-8%;
  width:56%;
  height:44%;
  background:radial-gradient(ellipse at center, rgba(118, 156, 255, 0.18) 0%, rgba(118, 156, 255, 0.08) 26%, rgba(118, 156, 255, 0) 74%);
  filter:blur(42px);
  opacity:.72;
  animation:va-levelUpNebulaFloat 14s ease-in-out infinite;
}

.va-levelUpOverlay__backdrop::after{
  right:-10%;
  bottom:-16%;
  width:54%;
  height:40%;
  background:radial-gradient(ellipse at center, rgba(255, 130, 190, 0.16) 0%, rgba(255, 130, 190, 0.07) 26%, rgba(255, 130, 190, 0) 74%);
  filter:blur(48px);
  opacity:.66;
  animation:va-levelUpNebulaFloat 16s ease-in-out infinite reverse;
}

.va-levelUpOverlay__space{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.va-levelUpOverlay__starfield{
  position:absolute;
  inset:-18%;
  background-repeat:repeat;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.22));
  transform:rotate(-6deg);
  will-change:background-position, transform;
}

.va-levelUpOverlay__starfield--back{
  opacity:.42;
  background-size:980px 760px;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.70) 50%, transparent 56%),
    radial-gradient(1.4px 1.4px at 26% 68%, rgba(196,214,255,.52) 50%, transparent 56%),
    radial-gradient(1.8px 1.8px at 42% 30%, rgba(255,255,255,.58) 50%, transparent 56%),
    radial-gradient(1.5px 1.5px at 63% 74%, rgba(255,255,255,.46) 50%, transparent 56%),
    radial-gradient(1.4px 1.4px at 78% 16%, rgba(212,224,255,.44) 50%, transparent 56%),
    radial-gradient(1.6px 1.6px at 92% 52%, rgba(255,255,255,.50) 50%, transparent 56%);
  animation:va-levelUpDriftBack 170s linear infinite;
}

.va-levelUpOverlay__starfield--mid{
  opacity:.62;
  background-size:1240px 920px;
  background-image:
    radial-gradient(1.9px 1.9px at 10% 42%, rgba(255,255,255,.82) 50%, transparent 56%),
    radial-gradient(1.7px 1.7px at 24% 12%, rgba(230,236,255,.74) 50%, transparent 56%),
    radial-gradient(1.5px 1.5px at 38% 82%, rgba(255,255,255,.78) 50%, transparent 56%),
    radial-gradient(1.8px 1.8px at 56% 34%, rgba(218,230,255,.82) 50%, transparent 56%),
    radial-gradient(1.7px 1.7px at 71% 58%, rgba(255,255,255,.76) 50%, transparent 56%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(255,255,255,.72) 50%, transparent 56%),
    radial-gradient(1.6px 1.6px at 94% 78%, rgba(230,236,255,.68) 50%, transparent 56%);
  animation:va-levelUpDriftMid 126s linear infinite;
}

.va-levelUpOverlay__starfield--front{
  opacity:.84;
  background-size:1500px 1120px;
  background-image:
    radial-gradient(2.2px 2.2px at 14% 26%, rgba(255,255,255,.96) 50%, transparent 56%),
    radial-gradient(2.4px 2.4px at 29% 64%, rgba(255,255,255,.92) 50%, transparent 56%),
    radial-gradient(2.1px 2.1px at 47% 18%, rgba(255,255,255,.95) 50%, transparent 56%),
    radial-gradient(2.3px 2.3px at 62% 78%, rgba(255,255,255,.94) 50%, transparent 56%),
    radial-gradient(2.2px 2.2px at 79% 36%, rgba(255,255,255,.96) 50%, transparent 56%),
    radial-gradient(2.0px 2.0px at 92% 60%, rgba(255,255,255,.90) 50%, transparent 56%);
  animation:va-levelUpDriftFront 94s linear infinite;
}

.va-levelUpOverlay__star{
  --star-size:2px;
  --star-delay:0s;
  --star-duration:4.6s;
  position:absolute;
  left:var(--star-x);
  top:var(--star-y);
  width:var(--star-size);
  height:var(--star-size);
  border-radius:999px;
  background:radial-gradient(circle at center, var(--star-color, rgba(255,255,255,.96)) 0 62%, transparent 72%);
  box-shadow:0 0 8px var(--star-glow, rgba(255,255,255,.38));
  opacity:.34;
  transform:translate(-50%, -50%);
  transform-origin:center;
  animation:va-levelUpTwinkle var(--star-duration) ease-in-out infinite var(--star-delay);
}

.va-levelUpOverlay__star::before,
.va-levelUpOverlay__star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  opacity:.72;
  border-radius:999px;
  transform:translate(-50%, -50%);
}

.va-levelUpOverlay__star::before{
  width:calc(var(--star-size) * 5.2);
  height:calc(var(--star-size) * .42);
  min-height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 88%, transparent 100%);
}

.va-levelUpOverlay__star::after{
  width:calc(var(--star-size) * .42);
  min-width:1px;
  height:calc(var(--star-size) * 5.2);
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 88%, transparent 100%);
}


/* 3. Panneau principal */

.va-levelUpOverlay__panel{
  position:relative;
  width:min(100%, 760px);
  border:2px solid hsl(var(--va-gold-hsl) / 0.94);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(11, 18, 40, 0.95), rgba(6, 10, 24, 0.97));
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 30px hsl(var(--va-gold-hsl) / 0.46),
    0 0 78px hsl(var(--va-gold-hsl) / 0.28),
    0 0 126px hsl(var(--va-gold-hsl) / 0.14);
  overflow:hidden;
  transform:translateY(18px) scale(calc(.982 * var(--site-global-zoom, 1)));
  transform-origin:center center;
  transition:transform .42s ease;
}

.va-levelUpOverlay.is-open .va-levelUpOverlay__panel{
  transform:translateY(0) scale(var(--site-global-zoom, 1));
}

.va-levelUpOverlay__panel::before,
.va-levelUpOverlay__panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.va-levelUpOverlay__panel::before{
  background:
    linear-gradient(90deg, transparent 0%, hsl(var(--va-gold-hsl) / 0.16) 18%, transparent 42%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 18%);
}

.va-levelUpOverlay__panel::after{
  inset:8px;
  border-radius:18px;
  border:1px solid hsl(var(--va-gold-hsl) / 0.20);
  box-shadow:0 0 22px hsl(var(--va-gold-hsl) / 0.16) inset;
}

.va-levelUpOverlay__inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:38px 32px 30px;
  text-align:center;
}

/* 4. Textes & indicateurs */

.va-levelUpOverlay__eyebrow{
  margin:0;
  color:rgba(183, 244, 255, 0.84);
  font:700 12px/1.2 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.va-levelUpOverlay__ring{
  position:relative;
  width:min(100%, 340px);
  min-height:168px;
  display:grid;
  place-items:center;
}

.va-levelUpOverlay__logo{
  width:min(286px, 96%);
  height:auto;
  display:block;
  filter:
    drop-shadow(0 0 10px hsl(var(--va-level-hsl) / 0.34))
    drop-shadow(0 0 26px hsl(var(--va-level-hsl) / 0.24))
    drop-shadow(0 0 20px hsl(var(--va-gold-hsl) / 0.16));
  transform-origin:center;
  animation:va-levelUpLogoFloat 3.4s ease-in-out infinite;
}

.va-levelUpOverlay__title{
  margin:0;
  color:hsl(var(--va-level-hsl));
  font:800 clamp(30px, 4.8vw, 46px)/1.08 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 0 8px hsl(var(--va-level-hsl) / 0.44), 0 0 22px hsl(var(--va-glow-hsl) / 0.28), 0 0 38px hsl(var(--va-glow-hsl) / 0.18);
}

.va-levelUpOverlay.is-level-10 .va-levelUpOverlay__title{
  background:linear-gradient(90deg, hsl(var(--va-level-hsl)), hsl(var(--va-glow-hsl)));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 4px color-mix(in hsl,hsl(var(--va-level-hsl)) 36%,transparent), 0 0 7px color-mix(in hsl,hsl(var(--va-glow-hsl)) 24%,transparent);
}

.va-levelUpOverlay__text{
  max-width:580px;
  margin:0;
  color:hsl(var(--va-text-violet-hsl));
  font:700 italic 15px/1.55 Inter, system-ui, sans-serif;
  text-shadow:0 0 8px hsl(var(--va-text-violet-hsl) / 0.30), 0 0 22px hsl(var(--va-text-violet-hsl) / 0.14);
}

.va-levelUpOverlay__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.va-levelUpOverlay__pill{
  min-width:128px;
  padding:10px 14px;
  border:1px solid rgba(126, 245, 255, 0.22);
  border-radius:999px;
  background:rgba(126, 245, 255, 0.08);
  color:rgba(220, 249, 255, 0.92);
  font:700 11px/1.2 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* 5. Statut */

.va-levelUpOverlay__status{
  position:relative;
  padding-top:14px;
  color:rgba(255, 227, 171, 0.88);
  font:700 12px/1.2 Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.va-levelUpOverlay__statusDots{
  display:inline-block;
  width:1.6em;
  overflow:hidden;
  vertical-align:bottom;
  animation:va-levelUpDots 1.2s steps(4, end) infinite;
}

.va-levelUpOverlay__status::before,
.va-levelUpOverlay__status::after{
  content:"";
  position:absolute;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(126, 245, 255, 0.52), rgba(255, 225, 160, 0.72), rgba(126, 245, 255, 0.52), transparent);
}

.va-levelUpOverlay__status::before{
  left:50%;
  width:min(100%, 260px);
  transform:translateX(-50%);
}

.va-levelUpOverlay__status::after{
  display:none;
}

/* 6. États & animations */

.va-levelUpOverlay.is-closing{
  opacity:0;
}

@keyframes va-levelUpNebulaFloat{
  0%,100%{transform:translate3d(0, 0, 0) scale(1);}
  50%{transform:translate3d(2.4%, -1.8%, 0) scale(1.06);}
}

@keyframes va-levelUpDriftBack{
  from{background-position:0 0;}
  to{background-position:-1180px 620px;}
}

@keyframes va-levelUpDriftMid{
  from{background-position:0 0;}
  to{background-position:-1620px 900px;}
}

@keyframes va-levelUpDriftFront{
  from{background-position:0 0;}
  to{background-position:-2050px 1240px;}
}

@keyframes va-levelUpTwinkle{
  0%,100%{opacity:.24;transform:translate(-50%, -50%) scale(.92);}
  35%{opacity:.62;transform:translate(-50%, -50%) scale(1);}
  50%{opacity:1;transform:translate(-50%, -50%) scale(1.14);}
  70%{opacity:.42;transform:translate(-50%, -50%) scale(.98);}
}


@keyframes va-levelUpLogoFloat{
  0%,100%{transform:translateY(0) scale(.985);}
  50%{transform:translateY(-4px) scale(1.02);}
}

@keyframes va-levelUpDots{
  0%{width:0;}
  100%{width:1.6em;}
}

/* 7. Responsive */

@media (max-width:700px){
  .va-levelUpOverlay{padding:16px;}
  .va-levelUpOverlay__inner{padding:30px 20px 24px;gap:16px;}
  .va-levelUpOverlay__panel{border-radius:22px;}
  .va-levelUpOverlay__panel::after{inset:7px;border-radius:15px;}
  .va-levelUpOverlay__ring{width:min(100%, 230px);min-height:120px;}
  .va-levelUpOverlay__logo{width:min(244px, 98%);}
  .va-levelUpOverlay__meta{gap:8px;}
  .va-levelUpOverlay__pill{min-width:0;width:100%;}
  .va-levelUpOverlay__status::before,
  .va-levelUpOverlay__status::after{display:none;}
}