:root {
  --rare: #4d9fff;
  --epic: #a855f7;
  --legendary: #f59e0b;
  --foil: rgba(255,255,255,.28);
  --text: #ffffff;
  --shadow: rgba(0,0,0,.72);
  --duration-in: 700ms;
  --duration-out: 520ms;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.overlay {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: transparent;
}

.drop-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}

.drop-stage.is-active {
  opacity: 1;
  animation: stageIn var(--duration-in) ease-out both;
}

.drop-stage.is-hiding {
  animation: stageOut var(--duration-out) ease-in both;
}

.drop-copy {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text);
  opacity: 0;
  animation: viewerIn 900ms 120ms ease-out both;
  white-space: nowrap;
}

.viewer-name {
  font-size: clamp(30px, 3vw, 58px);
  font-weight: 850;
  letter-spacing: .02em;
  text-shadow: 0 6px 22px var(--shadow), 0 0 18px var(--rarity-color);
}

.obtain-text {
  margin-top: 4px;
  font-size: clamp(17px, 1.35vw, 25px);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  text-shadow: 0 4px 16px var(--shadow), 0 0 12px var(--rarity-glow);
}

.card-frame {
  position: relative;
  width: min(33vw, 430px);
  max-height: 68vh;
  aspect-ratio: 2.5 / 3.5;
  filter: drop-shadow(0 30px 48px rgba(0,0,0,.55)) drop-shadow(0 0 40px var(--rarity-glow));
  transform: translateY(18px) scale(.84);
  opacity: 0;
  animation: cardIn 900ms 280ms cubic-bezier(.18,.9,.2,1.08) both,
             cardIdle 3200ms 1250ms ease-in-out infinite;
}

.card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  outline: 0;
}

.rarity-burst {
  position: absolute;
  width: 32vw;
  height: 32vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rarity-burst) 0%, transparent 64%);
  filter: blur(5px);
  opacity: 0;
  transform: scale(.65);
  animation: burstIn 1100ms 230ms ease-out both;
}

.rarity-badge {
  position: absolute;
  top: calc(50% + min(25vw, 305px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  color: var(--text);
  border: 1px solid var(--rarity-color);
  background: rgba(0,0,0,.58);
  box-shadow: 0 0 28px var(--rarity-glow), inset 0 0 18px rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: clamp(17px, 1.4vw, 24px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  animation: badgeIn 800ms 600ms ease-out both, badgeFade 900ms 2200ms ease-in forwards;
}

.foil-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
}

.card-frame.is-foil .foil-shimmer {
  opacity: 1;
}

.foil-shimmer::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg,
    transparent 24%,
    rgba(255,255,255,.08) 39%,
    rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.08) 61%,
    transparent 76%);
  transform: translateX(-80%) rotate(5deg);
  animation: foilSweep 2300ms 950ms ease-in-out infinite;
  mix-blend-mode: screen;
}

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--rarity-color);
  box-shadow: 0 0 18px var(--rarity-color);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: particleOut var(--life) var(--delay) ease-out both;
}

.drop-stage.rarity-rare {
  --rarity-color: var(--rare);
  --rarity-glow: rgba(77,159,255,.44);
  --rarity-burst: rgba(77,159,255,.22);
}
.drop-stage.rarity-epic {
  --rarity-color: var(--epic);
  --rarity-glow: rgba(168,85,247,.56);
  --rarity-burst: rgba(168,85,247,.30);
}
.drop-stage.rarity-legendary {
  --rarity-color: var(--legendary);
  --rarity-glow: rgba(245,158,11,.82);
  --rarity-burst: rgba(245,158,11,.48);
}

.drop-stage.rarity-epic .rarity-burst { animation-name: burstIn, epicRing; animation-duration: 1100ms, 1300ms; animation-delay: 230ms, 340ms; }
.drop-stage.rarity-legendary .rarity-burst { animation-name: legendaryFlash, legendaryRing; animation-duration: 1650ms, 1250ms; animation-delay: 100ms, 360ms; }
.drop-stage.rarity-legendary .card-frame { animation-duration: 1050ms, 3400ms; }
.drop-stage.rarity-legendary .rarity-badge { box-shadow: 0 0 46px rgba(245,158,11,.9), inset 0 0 22px rgba(255,210,120,.12); }
.drop-stage.rarity-legendary .particle { box-shadow: 0 0 24px rgba(245,158,11,.95); }

@keyframes stageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stageOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.97); } }
@keyframes viewerIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cardIdle { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.004); } }
@keyframes burstIn { 0% { opacity: 0; transform: scale(.55); } 45% { opacity: 1; } 100% { opacity: .34; transform: scale(1.08); } }
@keyframes epicRing { 0% { box-shadow: 0 0 0 0 rgba(168,85,247,.48); } 100% { box-shadow: 0 0 0 52px rgba(168,85,247,0); } }
@keyframes legendaryFlash { 0% { opacity: 0; transform: scale(.45); } 10% { opacity: 1; transform: scale(.92); filter: blur(2px); } 22% { opacity: .85; transform: scale(1.08); } 100% { opacity: .44; transform: scale(1.24); } }
@keyframes legendaryRing { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.72), 0 0 0 0 rgba(255,255,255,.22); } 100% { box-shadow: 0 0 0 78px rgba(245,158,11,0), 0 0 0 118px rgba(255,255,255,0); } }
@keyframes badgeIn { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes badgeFade { to { opacity: .28; } }
@keyframes foilSweep { 0% { transform: translateX(-90%) rotate(5deg); } 55%,100% { transform: translateX(90%) rotate(5deg); } }
@keyframes particleOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.05); }
}

@media (max-width: 900px) {
  .card-frame { width: min(60vw, 380px); }
  .drop-copy { top: 7vh; }
  .rarity-badge { top: calc(50% + min(42vw, 270px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .drop-stage.is-active, .drop-copy, .card-frame, .rarity-badge { opacity: 1; transform: none; }
}