.classhub-sprite-effect {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--classhub-effect-size, 256px);
  height: var(--classhub-effect-size, 256px);
  pointer-events: none;
  z-index: var(--classhub-effect-z, 14000);
  transform: translate(-50%, -50%) scale(var(--classhub-effect-scale, 1));
  opacity: 0;
  animation: classhub-sprite-effect-fade var(--classhub-effect-duration, 900ms) linear forwards;
  overflow: visible;
  will-change: opacity, transform;
}

.classhub-sprite-effect-shell {
  filter: drop-shadow(0 10px 24px rgba(38, 70, 120, 0.22));
}

.classhub-sprite-effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--classhub-effect-image);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0% 0%;
  mix-blend-mode: var(--classhub-layer-blend, normal);
  opacity: 0;
  transform: scale(var(--classhub-layer-scale, 1));
  animation: classhub-sprite-layer-fade var(--classhub-layer-duration, 900ms) ease-out var(--classhub-layer-delay, 0ms) forwards;
  will-change: background-position, opacity, transform;
}

.classhub-sprite-effect-layer.role-back-halo {
  z-index: 0;
  filter: blur(0.2px) saturate(1.08);
}

.classhub-sprite-effect-layer.role-main {
  z-index: 1;
}

.classhub-sprite-effect-layer.role-front-glint {
  z-index: 2;
  filter: saturate(1.15) brightness(1.08);
}

.classhub-sprite-effect-layer.role-residue {
  z-index: 3;
  filter: blur(0.4px) saturate(1.12);
}

.classhub-sprite-effect.is-attached {
  position: fixed;
}

.classhub-sprite-effect.size-sm {
  --classhub-effect-size: 96px;
}

.classhub-sprite-effect.size-md {
  --classhub-effect-size: 144px;
}

.classhub-sprite-effect.size-lg {
  --classhub-effect-size: 220px;
}

.classhub-sprite-effect.size-xl {
  --classhub-effect-size: min(48vw, 380px);
}

.classhub-sprite-effect.anchor-screen {
  left: 50%;
  top: 50%;
}

.classhub-sprite-effect.anchor-modal {
  left: 50%;
  top: 42%;
}

.classhub-sprite-effect.anchor-reward {
  left: 50%;
  top: 38%;
}

.classhub-sprite-effect.is-reduced {
  --classhub-effect-scale: 0.82;
  filter: drop-shadow(0 6px 16px rgba(38, 70, 120, 0.16));
}

@keyframes classhub-sprite-effect-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--classhub-effect-scale, 1) * 0.88));
  }

  10% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--classhub-effect-scale, 1) * 1.08));
  }
}

@keyframes classhub-sprite-layer-fade {
  0% {
    opacity: 0;
    transform: scale(calc(var(--classhub-layer-scale, 1) * 0.96));
  }

  16%,
  72% {
    opacity: var(--classhub-layer-opacity, 1);
  }

  100% {
    opacity: 0;
    transform: scale(calc(var(--classhub-layer-scale, 1) * 1.04));
  }
}

@media (prefers-reduced-motion: reduce) {
  .classhub-sprite-effect {
    animation-duration: min(var(--classhub-effect-duration, 900ms), 520ms);
    filter: none;
  }

  .classhub-sprite-effect-layer {
    animation-duration: min(var(--classhub-layer-duration, 900ms), 520ms);
    filter: none;
  }
}

.gacha-reveal-scene,
.gacha-animation-container,
.knowledge-battle-stage,
.evolution-scene,
.evo-stage,
.boss-attack-stage,
.arena-battle-stage,
.expedition-wild-scene {
  position: relative;
}

.classhub-inline-sprite-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--classhub-inline-effect-size, 220px);
  height: var(--classhub-inline-effect-size, 220px);
  pointer-events: none;
  z-index: var(--classhub-inline-effect-z, 6);
  background-image: var(--classhub-effect-image);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0% 0%;
  transform: translate(-50%, -50%) scale(var(--classhub-inline-effect-scale, 1));
  opacity: 0;
  filter: drop-shadow(0 10px 24px rgba(38, 70, 120, 0.2));
  animation:
    classhub-sprite-sheet-16 var(--classhub-effect-duration, 900ms) steps(1, end) var(--classhub-effect-delay, 0ms) forwards,
    classhub-inline-sprite-fade var(--classhub-effect-duration, 900ms) ease-out var(--classhub-effect-delay, 0ms) forwards;
  will-change: background-position, opacity, transform;
}

.classhub-inline-sprite-effect.is-looping {
  animation:
    classhub-sprite-sheet-16 var(--classhub-effect-duration, 900ms) steps(1, end) var(--classhub-effect-delay, 0ms) infinite,
    classhub-inline-sprite-loop-fade var(--classhub-effect-duration, 900ms) ease-in-out var(--classhub-effect-delay, 0ms) infinite;
}

.classhub-inline-sprite-effect.size-sm {
  --classhub-inline-effect-size: 96px;
}

.classhub-inline-sprite-effect.size-md {
  --classhub-inline-effect-size: 148px;
}

.classhub-inline-sprite-effect.size-lg {
  --classhub-inline-effect-size: 230px;
}

.classhub-inline-sprite-effect.size-xl {
  --classhub-inline-effect-size: min(58vw, 390px);
}

.gacha-animation-container .gacha-sprite-reveal {
  left: 50%;
  top: 46%;
  --classhub-inline-effect-z: 2;
  --classhub-inline-effect-scale: 0.96;
}

.gacha-animation-container .gacha-chest-open {
  left: 50%;
  top: 46%;
  --classhub-inline-effect-z: 4;
  --classhub-inline-effect-scale: 0.86;
}

.gacha-animation-container.gacha-effect-anchor {
  isolation: isolate;
  overflow: visible;
}

.gacha-animation-container .gacha-capsule-wobble {
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -70px;
  z-index: 3;
}

.gacha-animation-container .gacha-reveal-card {
  position: relative;
  z-index: 5;
}

.knowledge-sprite-bloom {
  left: 78%;
  top: 52%;
  --classhub-inline-effect-z: 5;
  --classhub-inline-effect-scale: 0.9;
}

.evo-stage .evo-sprite-column {
  left: 50%;
  top: 50%;
  --classhub-inline-effect-z: 1;
  --classhub-inline-effect-scale: 0.98;
}

.evo-stage .evo-pet-frame,
.evo-stage .evo-arrow-beam {
  position: relative;
  z-index: 2;
}

.boss-sprite-impact {
  left: 76%;
  top: 55%;
  --classhub-inline-effect-z: 7;
  --classhub-inline-effect-scale: 0.94;
}

.arena-sprite-start {
  left: 50%;
  top: 46%;
  --classhub-inline-effect-z: 11;
  --classhub-inline-effect-scale: 0.88;
}

.arena-sprite-result {
  left: 50%;
  top: 50%;
  --classhub-inline-effect-z: 12;
  --classhub-inline-effect-scale: 0.96;
}

.arena-sprite-result.is-win {
  left: 68%;
  top: 52%;
  --classhub-inline-effect-scale: 0.9;
}

.arena-sprite-result.is-loss {
  left: 32%;
  top: 52%;
  --classhub-inline-effect-scale: 0.9;
}

.arena-combatant .arena-combatant-result-sprite {
  left: 50%;
  top: auto;
  bottom: var(--arena-result-effect-bottom, 28%);
  --classhub-inline-effect-z: 15;
  --classhub-inline-effect-scale: var(--arena-result-effect-scale, 0.76);
  filter: drop-shadow(0 12px 26px rgba(10, 28, 62, 0.38)) drop-shadow(0 0 18px currentColor);
}

.arena-combatant .arena-combatant-result-sprite.is-win {
  color: var(--arena-opponent-glow, #ff6bb5);
}

.arena-combatant .arena-combatant-result-sprite.is-loss {
  color: var(--arena-player-glow, #55dcff);
}

.arena-combatant.pet-stage-1 {
  --arena-result-effect-bottom: 15%;
  --arena-result-effect-scale: 0.58;
}

.arena-combatant.pet-stage-2 {
  --arena-result-effect-bottom: 23%;
  --arena-result-effect-scale: 0.68;
}

.arena-combatant.pet-stage-3 {
  --arena-result-effect-bottom: 31%;
  --arena-result-effect-scale: 0.78;
}

.arena-combatant.has-legendary-pet {
  --arena-result-effect-bottom: 36%;
  --arena-result-effect-scale: 0.86;
}

.expedition-sprite-trail {
  left: 40%;
  top: 68%;
  --classhub-inline-effect-z: 5;
  --classhub-inline-effect-scale: 0.82;
}

.expedition-sprite-chest {
  left: 50%;
  top: 50%;
  --classhub-inline-effect-z: 8;
  --classhub-inline-effect-scale: 0.96;
}

.expedition-effect-backdrop .expedition-chest,
.student-game-console .expedition-chest {
  display: grid;
  place-items: center;
  overflow: visible;
  z-index: 8;
}

.expedition-effect-backdrop .expedition-chest > img,
.student-game-console .expedition-chest > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.expedition-effect-backdrop .expedition-chest .classhub-inline-sprite-effect,
.student-game-console .expedition-chest .classhub-inline-sprite-effect {
  grid-area: 1 / 1;
  position: absolute;
  inset: 50% auto auto 50%;
}

.expedition-effect-backdrop .expedition-chest.is-opening > img,
.student-game-console .expedition-chest.is-opening > img {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 720px) {
  .knowledge-sprite-bloom {
    left: 74%;
    top: 50%;
    --classhub-inline-effect-scale: 0.78;
  }

  .boss-sprite-impact {
    left: 50%;
    top: 66%;
    --classhub-inline-effect-scale: 0.76;
  }

  .arena-sprite-start {
    left: 50%;
    top: 50%;
    --classhub-inline-effect-scale: 0.78;
  }

  .arena-sprite-result {
    top: 52%;
    --classhub-inline-effect-scale: 0.72;
  }

  .arena-sprite-result.is-win {
    left: 64%;
  }

  .arena-sprite-result.is-loss {
    left: 36%;
  }

  .expedition-sprite-trail {
    left: 42%;
    top: 66%;
    --classhub-inline-effect-scale: 0.72;
  }

  .expedition-sprite-chest {
    left: 50%;
    top: 50%;
    --classhub-inline-effect-scale: 0.82;
  }
}

@keyframes classhub-sprite-sheet-16 {
  0%, 6.24% { background-position: 0% 0%; }
  6.25%, 12.49% { background-position: 33.333% 0%; }
  12.5%, 18.74% { background-position: 66.666% 0%; }
  18.75%, 24.99% { background-position: 100% 0%; }
  25%, 31.24% { background-position: 0% 33.333%; }
  31.25%, 37.49% { background-position: 33.333% 33.333%; }
  37.5%, 43.74% { background-position: 66.666% 33.333%; }
  43.75%, 49.99% { background-position: 100% 33.333%; }
  50%, 56.24% { background-position: 0% 66.666%; }
  56.25%, 62.49% { background-position: 33.333% 66.666%; }
  62.5%, 68.74% { background-position: 66.666% 66.666%; }
  68.75%, 74.99% { background-position: 100% 66.666%; }
  75%, 81.24% { background-position: 0% 100%; }
  81.25%, 87.49% { background-position: 33.333% 100%; }
  87.5%, 93.74% { background-position: 66.666% 100%; }
  93.75%, 100% { background-position: 100% 100%; }
}

@keyframes classhub-inline-sprite-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--classhub-inline-effect-scale, 1) * 0.86));
  }

  12%,
  74% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--classhub-inline-effect-scale, 1) * 1.08));
  }
}

@keyframes classhub-inline-sprite-loop-fade {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classhub-inline-sprite-effect {
    animation-duration: min(var(--classhub-effect-duration, 900ms), 520ms);
    filter: none;
  }
}

/* Gacha Egg Glow V1: simplify draw reveal to one anchored egg with slow light. */
.gacha-animation-container.is-egg-only-reveal {
  height: clamp(220px, 32vw, 300px);
  display: grid;
  place-items: center;
  margin: 10px 0 6px;
  isolation: isolate;
  overflow: visible;
}

.gacha-animation-container.is-egg-only-reveal .classhub-inline-sprite-effect,
.gacha-animation-container.is-egg-only-reveal .gacha-sprite-reveal,
.gacha-animation-container.is-egg-only-reveal .gacha-chest-open {
  display: none !important;
}

.gacha-animation-container.is-egg-only-reveal .gacha-capsule-wobble {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(136px, 20vw, 172px) !important;
  height: clamp(136px, 20vw, 172px) !important;
  margin: 0 !important;
  z-index: 3 !important;
  display: grid;
  place-items: center;
  transform-origin: center center !important;
  animation: gacha-egg-slow-reveal 3.6s cubic-bezier(.2, .82, .22, 1) forwards !important;
}

.gacha-animation-container.is-egg-only-reveal .gacha-capsule-wobble::before,
.gacha-animation-container.is-egg-only-reveal .gacha-capsule-wobble::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.gacha-animation-container.is-egg-only-reveal .gacha-capsule-wobble::before {
  inset: -34%;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .78) 0 18%, rgba(255, 222, 104, .46) 30%, rgba(255, 149, 67, .16) 56%, transparent 72%),
    conic-gradient(from 15deg, transparent 0 10%, rgba(255, 255, 255, .52) 12% 17%, transparent 20% 32%, rgba(255, 214, 102, .5) 35% 40%, transparent 43% 100%);
  filter: blur(.5px) saturate(1.12);
  opacity: 0;
  animation: gacha-egg-aura 3.6s ease-in-out forwards;
}

.gacha-animation-container.is-egg-only-reveal .gacha-capsule-wobble::after {
  inset: 4%;
  z-index: 4;
  background:
    linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, .76) 44%, rgba(255, 255, 255, .18) 51%, transparent 62%),
    radial-gradient(circle at 72% 28%, rgba(255, 255, 255, .95) 0 5%, transparent 13%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-24%) rotate(-12deg);
  animation: gacha-egg-glint 3.6s ease-in-out forwards;
}

.gacha-animation-container.is-egg-only-reveal .gacha-capsule-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 18px rgba(11, 31, 66, .32))
    drop-shadow(0 0 18px rgba(255, 207, 79, .28));
}

.gacha-animation-container.is-egg-only-reveal .gacha-reveal-card {
  position: relative;
  z-index: 5;
}

@keyframes gacha-egg-slow-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.58) rotate(0deg);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.98) rotate(0deg);
  }

  23% {
    transform: translate(-50%, -50%) scale(1) rotate(-7deg);
  }

  34% {
    transform: translate(-50%, -50%) scale(1.01) rotate(7deg);
  }

  46% {
    transform: translate(-50%, -50%) scale(1.02) rotate(-4deg);
  }

  58% {
    transform: translate(-50%, -50%) scale(1.03) rotate(4deg);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
  }

  86% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1.16) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.34) rotate(0deg);
  }
}

@keyframes gacha-egg-aura {
  0%,
  10% {
    opacity: 0;
    transform: scale(.68) rotate(0deg);
  }

  34% {
    opacity: .58;
    transform: scale(.95) rotate(22deg);
  }

  68% {
    opacity: .9;
    transform: scale(1.08) rotate(62deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.28) rotate(110deg);
  }
}

@keyframes gacha-egg-glint {
  0%,
  24% {
    opacity: 0;
    transform: translateX(-28%) rotate(-12deg);
  }

  48% {
    opacity: .42;
  }

  70% {
    opacity: .9;
    transform: translateX(18%) rotate(-12deg);
  }

  100% {
    opacity: 0;
    transform: translateX(36%) rotate(-12deg);
  }
}