/* =====================================================================
   base.css — variables, reset, fond, animations et effets partagés
   ===================================================================== */

:root{
  --night:#0d0b1e;
  --night2:#1a1633;
  --card:#221d42;
  --card-hover:#2b2554;
  --border:#322a5e;
  --border-soft:#35305e;
  --neon:#ffb347;
  --neon2:#ff5e3a;
  --mint:#4ade80;
  --sky:#7dd3fc;
  --pink:#ff8fab;
  --purple:#c084fc;
  --text:#f1eeff;
  --muted:#8b84b8;
  --danger:#ff4d6d;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
}

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

body{
  font-family:'Nunito',sans-serif;
  background:
    radial-gradient(ellipse at 20% -10%, #2d1f5e 0%, transparent 55%),
    radial-gradient(ellipse at 90% 110%, #3a1240 0%, transparent 50%),
    var(--night);
  min-height:100vh;
  color:var(--text);
  overflow-x:hidden;
  padding:24px 16px 100px;
}

button{font-family:'Nunito';}

/* ---------- étoiles de fond ---------- */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.6;animation:twinkle 3s ease-in-out infinite;}

/* ---------- animations réutilisées partout ---------- */
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.8}}
@keyframes dropIn{from{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes popIn{from{transform:scale(.7) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)} 40%{transform:translate(5px,-4px)}
  60%{transform:translate(-4px,2px)} 80%{transform:translate(3px,-2px)}
}
.shake{animation:shake .4s ease;}

/* ---------- particules d'explosion ---------- */
.particle{position:fixed;border-radius:50%;pointer-events:none;z-index:99;}
.spark{position:fixed;pointer-events:none;z-index:99;font-size:1.3rem;}

/* ---------- toast ---------- */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--card);border:2px solid var(--neon);border-radius:14px;
  padding:10px 18px;font-weight:800;font-size:.85rem;z-index:250;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);box-shadow:0 8px 30px rgba(0,0,0,.5);
  max-width:90vw;text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.error{border-color:var(--danger);}

/* ---------- écran de victoire ---------- */
#victory{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(13,11,30,.9);z-index:300;flex-direction:column;gap:18px;text-align:center;padding:20px;
}
#victory.show{display:flex;animation:fadeIn .4s ease;}
#victory h2{
  font-family:'Bungee';font-size:clamp(1.6rem,7vw,2.8rem);
  background:linear-gradient(90deg,#ffe36e,var(--neon),var(--neon2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:bounce 1s ease infinite;
}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(-1deg)}}
#victory p{color:var(--muted);font-weight:800;font-size:1.05rem;}
#victory button{
  padding:14px 28px;border-radius:var(--radius);border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--neon),var(--neon2));
  font-family:'Bungee';font-size:1rem;color:#1a1030;transition:transform .15s;
}
#victory button:hover{transform:scale(1.08);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}