.rl-toast-stack{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  pointer-events:none;
}

.rl-toast{
  min-width:280px;
  max-width:360px;
  padding:14px 16px;
  border-radius:16px;
  color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  transform:translateY(24px);
  opacity:0;
  animation:rlToastIn .28s ease forwards, rlToastOut .28s ease forwards 2.6s;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid rgba(255,255,255,.12);
}

.rl-toast--success{ background:linear-gradient(135deg,var(--rl-success),var(--rl-success)); }
.rl-toast--error{ background:linear-gradient(135deg,var(--rl-danger),var(--rl-danger)); }
.rl-toast--xp{ background:linear-gradient(135deg,#7c3aed,#5b21b6); }
.rl-toast--info{ background:var(--rl-brand-button); color:var(--rl-text); }

.rl-toast__icon{
  width:28px;height:28px;display:grid;place-items:center;
  border-radius:999px;background:rgba(255,255,255,.18);font-weight:900;flex:0 0 28px;
}
.rl-toast__title{font-weight:900;line-height:1.1;margin-bottom:3px;}
.rl-toast__desc{font-size:.9rem;opacity:.95;line-height:1.3;}

.rl-confetti-layer{
  position:fixed;right:0;bottom:0;width:240px;height:240px;
  pointer-events:none;z-index:99998;overflow:visible;
}
.rl-confetti{
  position:absolute;width:10px;height:16px;border-radius:3px;opacity:0;
  animation:rlConfetti 1.2s ease-out forwards;
}

.rl-xp-float{
  position:fixed;
  z-index:99997;
  font-weight:900;
  font-size:20px;
  color:var(--rl-brand-orange-1);
  text-shadow:0 6px 20px rgba(0,0,0,.35);
  animation:rlXpFloat .9s ease-out forwards;
  pointer-events:none;
}

.rl-hit-ring{
  position:fixed;
  width:18px;height:18px;
  border-radius:999px;
  border:2px solid rgba(255,211,107,.9);
  z-index:99996;
  pointer-events:none;
  animation:rlHitRing .55s ease-out forwards;
}

@keyframes rlToastIn{
  from{transform:translateY(24px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes rlToastOut{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(12px);opacity:0}
}
@keyframes rlConfetti{
  0%{transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--x), var(--y)) rotate(var(--r));opacity:0}
}
@keyframes rlXpFloat{
  0%{transform:translateY(0) scale(.9);opacity:0}
  15%{transform:translateY(-6px) scale(1);opacity:1}
  100%{transform:translateY(-48px) scale(1.02);opacity:0}
}
@keyframes rlHitRing{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(4);opacity:0}
}

@media (max-width:991.98px){
  .rl-toast-stack{
    left:16px;right:16px;bottom:16px;align-items:stretch;
  }
  .rl-toast{
    min-width:0;max-width:none;width:100%;
  }
}

.rl-levelup-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(255,179,71,.18), rgba(0,0,0,.42));
  opacity:0;
  animation:rlLevelOverlay .9s ease forwards;
}

.rl-levelup-card{
  min-width:320px;
  max-width:520px;
  padding:28px 32px;
  border-radius:28px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,211,107,.28), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,111,26,.28), transparent 40%),
    linear-gradient(135deg, rgba(17,24,39,.98), rgba(31,41,55,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  transform:scale(.82) translateY(20px);
  animation:rlLevelCardIn 1s cubic-bezier(.2,.9,.2,1) forwards;
}

.rl-levelup-kicker{
  font-size:.82rem;
  letter-spacing:.18em;
  font-weight:900;
  color:var(--rl-brand-orange-1);
  margin-bottom:10px;
}

.rl-levelup-title{
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1;
  font-weight:900;
  margin-bottom:10px;
  text-shadow:0 10px 30px rgba(255,159,67,.26);
}

.rl-levelup-desc{
  font-size:1rem;
  color:rgba(255,255,255,.86);
}

.rl-levelup-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.rl-levelup-star{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--rl-brand-orange-1);
  box-shadow:0 0 18px rgba(255,211,107,.6);
  animation:rlLevelStar 1.2s ease-out forwards;
}

@keyframes rlLevelOverlay{
  0%{opacity:0}
  15%{opacity:1}
  100%{opacity:1}
}
@keyframes rlLevelCardIn{
  0%{transform:scale(.82) translateY(20px);opacity:0}
  18%{transform:scale(1.05) translateY(0);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes rlLevelStar{
  0%{transform:translate(0,0) scale(.4);opacity:1}
  100%{transform:translate(var(--x), var(--y)) scale(1.3);opacity:0}
}
