/* ==============================
   REWARD EFFECTS — Player-only
   ============================== */

/* ── Chat dim & slide ──────────────────────────── */

.chat-messages.reward-dimmed {
  opacity: 0.4;
  transform: translateY(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

.chat-messages.reward-dimmed-slow {
  opacity: 0.4;
  transform: translateY(-20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  pointer-events: none;
}

/* ── Desaturate (lose) ─────────────────────────── */

.reward-desaturate {
  filter: grayscale(0.8) brightness(0.7);
  transition: filter 1s ease;
}

/* ── Reward overlay container ──────────────────── */

.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.reward-overlay > * {
  pointer-events: auto;
}

/* ── Gacha orb ─────────────────────────────────── */

.gacha-orb {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at 35% 35%,
    var(--accent-light),
    var(--accent),
    var(--accent-secondary-light));
  box-shadow:
    0 0 40px var(--accent-50),
    0 0 80px var(--accent-secondary-50),
    inset 0 0 20px rgba(255, 255, 255, 0.3);
  position: absolute;
  opacity: 0;
}

.gacha-orb.gacha-appear {
  animation: gachaAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.gacha-orb.gacha-shake-1 {
  animation: gachaShake1 0.8s ease-in-out infinite;
  opacity: 1;
}

.gacha-orb.gacha-shake-2 {
  animation: gachaShake2 0.15s ease-in-out infinite;
  opacity: 1;
  box-shadow:
    0 0 60px var(--accent),
    0 0 120px var(--accent-secondary-light),
    inset 0 0 30px rgba(255, 255, 255, 0.5);
}

.gacha-orb.gacha-crack {
  animation: gachaCrack 0.3s ease-out forwards;
}

@keyframes gachaAppear {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gachaShake1 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-4px) rotate(-2deg); }
  40%      { transform: translateX(4px) rotate(2deg); }
  60%      { transform: translateX(-3px) rotate(-1deg); }
  80%      { transform: translateX(3px) rotate(1deg); }
}

@keyframes gachaShake2 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-8px) rotate(-4deg); }
  75%      { transform: translateX(8px) rotate(4deg); }
}

@keyframes gachaCrack {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── White flash (gacha crack burst) ───────────── */

.white-flash {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 9150;
  opacity: 0;
  pointer-events: none;
  animation: whiteFlash 0.4s ease-out forwards;
}

@keyframes whiteFlash {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ── Reward image reveal ───────────────────────── */

.reward-image-container {
  position: relative;
  max-width: 70vw;
  max-height: 50vh;
  opacity: 0;
  transform: scale(0.3);
}

.reward-image-container.reward-reveal {
  animation: rewardReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.reward-image-container.reward-fade-in {
  animation: rewardFadeIn 0.8s ease-out forwards;
}

@keyframes rewardReveal {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.05); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rewardFadeIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.reward-image {
  width: 100%;
  height: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: var(--border-width-thick) solid var(--accent-50);
  box-shadow:
    0 0 30px var(--accent-50),
    0 0 60px var(--accent-secondary-50);
}

/* ── Radial glow behind image ──────────────────── */

.reward-glow {
  position: absolute;
  inset: -40px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle,
    var(--accent-50) 0%,
    transparent 70%);
  z-index: -1;
  animation: rewardGlow 2s ease-in-out infinite alternate;
}

@keyframes rewardGlow {
  0%   { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* ── Fallback text card (no image) ─────────────── */

.reward-fallback-card {
  padding: var(--space-6);
  text-align: center;
  min-width: 240px;
}

.reward-fallback-card h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
}

.reward-fallback-card.win h2 {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.reward-fallback-card.lose h2 {
  color: var(--neutral);
}

/* ── Vignette overlay (lose) ───────────────────── */

.reward-vignette {
  position: fixed;
  inset: 0;
  z-index: 9090;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.reward-vignette.active {
  opacity: 1;
}

/* ── Try again prompt (lose) ───────────────────── */

.reward-try-again {
  margin-top: var(--space-5);
  opacity: 0;
  animation: rewardFadeIn 0.6s ease-out forwards;
}

.reward-try-again p {
  color: var(--neutral);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}