/* V1.96: outcome-specific atmosphere contained entirely inside the conclusion panel. */
html body:not(.maintenance-mode) #resultOverlay.result-overlay > .result-atmosphere {
  position: absolute;
  inset: 10px;
  overflow: hidden;
  pointer-events: none;
  border-radius: 14px;
  contain: paint;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay > .result-atmosphere > i {
  --result-particle-x: 50%;
  --result-particle-y: 50%;
  --result-particle-delay: 0ms;
  position: absolute;
  left: var(--result-particle-x);
  display: block;
  opacity: 0;
  background: var(--result-accent-bright);
  box-shadow: 0 0 9px var(--result-glow);
  will-change: transform, opacity;
}

#resultOverlay > .result-atmosphere > i:nth-child(1) { --result-particle-x: 9%; --result-particle-y: 14%; --result-particle-delay: 80ms; }
#resultOverlay > .result-atmosphere > i:nth-child(2) { --result-particle-x: 19%; --result-particle-y: 68%; --result-particle-delay: 260ms; }
#resultOverlay > .result-atmosphere > i:nth-child(3) { --result-particle-x: 31%; --result-particle-y: 34%; --result-particle-delay: 140ms; }
#resultOverlay > .result-atmosphere > i:nth-child(4) { --result-particle-x: 43%; --result-particle-y: 82%; --result-particle-delay: 380ms; }
#resultOverlay > .result-atmosphere > i:nth-child(5) { --result-particle-x: 55%; --result-particle-y: 22%; --result-particle-delay: 210ms; }
#resultOverlay > .result-atmosphere > i:nth-child(6) { --result-particle-x: 67%; --result-particle-y: 56%; --result-particle-delay: 430ms; }
#resultOverlay > .result-atmosphere > i:nth-child(7) { --result-particle-x: 77%; --result-particle-y: 40%; --result-particle-delay: 110ms; }
#resultOverlay > .result-atmosphere > i:nth-child(8) { --result-particle-x: 86%; --result-particle-y: 74%; --result-particle-delay: 320ms; }
#resultOverlay > .result-atmosphere > i:nth-child(9) { --result-particle-x: 94%; --result-particle-y: 28%; --result-particle-delay: 190ms; }

html body:not(.maintenance-mode) #resultOverlay.result-overlay.victory.result-revealed > .result-atmosphere > i {
  bottom: -10px;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(255, 245, 198, .72);
  border-radius: 1px;
  background: rgba(255, 206, 104, .78);
  transform: rotate(45deg);
  animation: result-victory-mote 1450ms var(--result-particle-delay) cubic-bezier(.18, .72, .24, 1) both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.defeat.result-revealed > .result-atmosphere > i {
  top: -12px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 185, 149, .82), rgba(175, 55, 46, .14));
  animation: result-defeat-ember 1560ms var(--result-particle-delay) cubic-bezier(.38, .08, .74, .66) both;
}

html body:not(.maintenance-mode) #resultOverlay.result-overlay.draw.result-revealed > .result-atmosphere > i {
  top: var(--result-particle-y);
  left: -9px;
  width: 9px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(209, 241, 255, .82));
  animation: result-draw-drift 1680ms var(--result-particle-delay) ease-in-out both;
}

@keyframes result-victory-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(45deg) scale(.45); }
  28% { opacity: .86; }
  100% { opacity: 0; transform: translate3d(10px, -230px, 0) rotate(225deg) scale(.9); }
}

@keyframes result-defeat-ember {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg) scaleY(.45); }
  22% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(-12px, 310px, 0) rotate(24deg) scaleY(1.08); }
}

@keyframes result-draw-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scaleX(.45); }
  28%, 68% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(560px, 18px, 0) scaleX(1); }
}

body[data-vfx-quality="medium"] #resultOverlay > .result-atmosphere > i:nth-child(n + 7),
body[data-vfx-quality="low"] #resultOverlay > .result-atmosphere > i:nth-child(n + 4) {
  display: none;
}

body[data-vfx-quality="low"] #resultOverlay > .result-atmosphere > i {
  box-shadow: none;
  will-change: auto;
}

@media (max-width: 640px) {
  html body:not(.maintenance-mode) #resultOverlay.result-overlay > .result-atmosphere {
    inset: 8px;
    border-radius: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #resultOverlay.result-overlay > .result-atmosphere {
    display: none;
  }

  html body:not(.maintenance-mode) #resultOverlay.result-overlay > .result-atmosphere > i {
    animation: none !important;
  }
}