.sg-ach-toast-root{
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(440px, calc(100vw - 40px));
    pointer-events: none;
  }
  
  .sg-ach-toast {
    position: relative;
    overflow: hidden;
  
    border-radius: 16px;
    padding: 14px 16px;
  
    color: #fff;
  
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
  
    transform: translateY(-18px);
    opacity: 0;
  
    animation: sg-ach-in 520ms cubic-bezier(.2,.9,.2,1) forwards;
  }
  
  
  .sg-ach-toast::before{
    content:"";
    position:absolute;
    inset:-50%;
    background: radial-gradient(circle at 30% 20%, rgba(16,223,139,0.20), transparent 60%);
    pointer-events:none;
  }
  
  .sg-ach-head{ display:flex; align-items:flex-start; gap:12px; }
  
  .sg-ach-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  
    display: grid;
    place-items: center;
  
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
  
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  }
  
  
  .sg-ach-title{
    font-size:11px; font-weight:800; letter-spacing:1.1px;
    color: rgba(16,223,139,0.95);
  }
  
  .sg-ach-name{ margin-top:3px; font-size:14px; font-weight:800; color: rgba(255,255,255,0.96); }
  .sg-ach-desc{ margin-top:4px; font-size:12px; line-height:1.35; color: rgba(255,255,255,0.72); }
  .sg-ach-meta{ margin-top:8px; display:flex; justify-content:space-between; font-size:11px; color: rgba(255,255,255,0.55); }
  
  .sg-ach-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background: rgba(255,255,255,0.14); }
  .sg-ach-bar > i{ display:block; height:100%; width:100%; background: rgba(16,223,139,0.9); transform-origin:left center; transform: scaleX(1); }
  
  .sg-ach-toast.sg-ach-out{ animation: sg-ach-out 360ms cubic-bezier(.4,0,.2,1) forwards; }
  
  @keyframes sg-ach-in{ to{ transform: translateY(0); opacity:1; } }
  @keyframes sg-ach-out{ to{ transform: translateY(-16px); opacity:0; } }
  
  /* Rarity glow */
/* ==========================================================
   Rarity-based Toast Backgrounds
   ========================================================== */

   .sg-ach-common {
    background:
      linear-gradient(135deg,
        rgba(70,70,70,0.85),
        rgba(30,30,30,0.85)
      );
  }
  
  .sg-ach-rare {
    background:
      linear-gradient(135deg,
        rgba(60,120,220,0.95),
        rgba(20,40,90,0.95)
      );
  }
  
  .sg-ach-epic {
    background:
      linear-gradient(135deg,
        rgba(150,80,220,0.95),
        rgba(60,20,100,0.95)
      );
  }
  
  .sg-ach-legendary {
    background:
      linear-gradient(135deg,
        rgba(255,175,60,0.95),
        rgba(140,80,10,0.95)
      );
  }
  
  
  @media (max-width: 480px){
    .sg-ach-toast-root{ top:12px; width: calc(100vw - 24px); }
  }
  
  .sg-ach-toast::before {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.25) 40%,
      transparent 80%
    );
  
    opacity: 0.25;
    transform: translateX(-100%);
    animation: sg-ach-sheen 1.2s ease-out forwards;
  
    pointer-events: none;
  }
  
  @keyframes sg-ach-sheen {
    to { transform: translateX(100%); }
  }
  .sg-ach-toast::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
  }
  
  .sg-ach-common::after { background: rgba(255,255,255,0.35); }
  .sg-ach-rare::after { background: rgb(90,160,255); }
  .sg-ach-epic::after { background: rgb(185,90,255); }
  .sg-ach-legendary::after { background: rgb(255,185,70); }
  
  /* ==========================================================
   Legendary FX: Vignette Flash + Particle Burst
   ========================================================== */

/* Full-screen vignette overlay (hidden by default) */
.sg-ach-vignette{
    position: fixed;
    inset: 0;
    z-index: 9998; /* behind toasts (9999) */
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(circle at 50% 30%,
        rgba(255, 200, 120, 0.18),
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.72) 100%
      );
  }
  
  .sg-ach-vignette.is-on{
    animation: sg-ach-vignette 900ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  
  @keyframes sg-ach-vignette{
    0%   { opacity: 0; }
    18%  { opacity: 0.85; }
    55%  { opacity: 0.55; }
    100% { opacity: 0; }
  }
  
  
  /* Particle container positioned over the toast */
  .sg-ach-particles{
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  
  /* Each particle (small ember) */
  .sg-ach-particle{
    position: absolute;
    border-radius: 999px;
    opacity: 0.95;
    background: rgba(255, 215, 140, 0.95);
    box-shadow: 0 0 18px rgba(255, 200, 120, 0.70);
    transform: translate(0, 0) scale(1);
    animation: sg-ach-pop 1400ms cubic-bezier(.15,.85,.2,1) forwards;
  }
  
  @keyframes sg-ach-pop{
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    10%  { opacity: 1; }
    40%  { opacity: 0.95; }   /* linger */
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.9); }
  }