/* Wick effect layer — warm, tactile, memory/restoration feedback.
   Shared names stay generic so JS can attach them to any scene surface. */
:root {
  --wick-fx-cream: var(--cream);
  --wick-fx-paper: var(--paper);
  --wick-fx-amber: var(--gold);
  --wick-fx-amber-soft: var(--gold-soft);
  --wick-fx-ink: var(--ink);
  --wick-fx-ink-soft: var(--ink-soft);
  --wick-fx-warm-shadow: rgba(69, 55, 36, .18);
}

.wickFxLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.wickFxOverlay,
.wickFxParticles,
.wickFxGlowBurst,
.wickFxGlow,
.wickFxMote,
.wickFxRewardFly,
.wickFxGhost,
.wickFxSettle,
.wickFxCardWarm {
  pointer-events: none;
}

#wickFxRoot {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.wickFxGlow {
  position: absolute;
  inset: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 228, .96) 0%, var(--fx-color, var(--wick-fx-amber-soft)) 28%, rgba(212, 165, 49, .16) 54%, rgba(212, 165, 49, 0) 76%);
}

.wickFxOverlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 247, 224, .16) 0%, rgba(255, 247, 224, 0) 46%),
    linear-gradient(180deg, rgba(255, 245, 220, .08), rgba(255, 245, 220, 0));
}

.wickFxParticles {
  position: absolute;
  inset: 0;
}

.wickFxParticle,
.wickFxMote {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  margin-left: calc(var(--size, 6px) * -.5);
  margin-top: calc(var(--size, 6px) * -.5);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 248, 228, .98) 0 20%, rgba(255, 220, 146, .92) 35%, rgba(212, 165, 49, .12) 68%, rgba(212, 165, 49, 0) 100%);
  box-shadow: 0 0 10px rgba(212, 165, 49, .18);
  opacity: 0;
}

.wickFxParticle {
  animation: wickFxParticleDrift var(--dur, 2.2s) ease-in-out var(--delay, 0s) infinite;
}

.wickFxGlowBurst {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 210, .95) 0%, rgba(244, 213, 132, .7) 22%, rgba(212, 165, 49, .28) 40%, rgba(212, 165, 49, 0) 70%);
  filter: blur(2px);
  transform: scale(.45);
}

.wickFxGlowBurst.wickFxBurstIn {
  animation: wickFxGlowBurst .62s cubic-bezier(.2, .85, .2, 1) both;
}

.wickFxMote {
  transform: translate3d(0, 0, 0);
  animation: wickFxMoteFloat var(--dur, 2.8s) ease-in-out var(--delay, 0s) infinite;
  background:
    radial-gradient(circle, rgba(255, 248, 228, .98) 0 22%, var(--fx-color, rgba(255, 220, 146, .92)) 48%, rgba(212, 165, 49, 0) 100%);
}

.wickFxMoteOut {
  animation: wickFxMoteOut .74s cubic-bezier(.2,.74,.22,1) var(--delay, 0ms) forwards;
}

.wickFxMote::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(.2px);
}

.wickFxRewardFly {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 34px);
  height: var(--size, 34px);
  margin-left: calc(var(--size, 34px) * -.5);
  margin-top: calc(var(--size, 34px) * -.5);
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(255, 245, 224, .98), rgba(239, 226, 201, .96));
  border: 1px solid rgba(212, 165, 49, .28);
  box-shadow: 0 3px 10px rgba(69, 55, 36, .12), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  color: var(--wick-fx-ink);
  opacity: 0;
}

.wickFxRewardFly.wickFxFlyIn {
  animation: wickFxRewardFly var(--dur, .85s) cubic-bezier(.18, .78, .18, 1) var(--delay, 0s) forwards;
}

.wickFxGhost {
  position: fixed;
  z-index: 160;
  margin: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.wickFxGhost img,
.wickFxGhost .objArt,
.wickFxGhost .art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wickFxReward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 248, 234, .94);
  border: 1px solid rgba(212, 165, 49, .28);
  box-shadow: 0 4px 12px rgba(69, 55, 36, .15);
  color: var(--wick-fx-ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.wickFxRewardIcon {
  font-size: 15px;
  line-height: 1;
}
.wickFxRewardIcon.xp {
  color: var(--teal);
  font-size: 11px;
}

.wickFxSettle {
  animation: wickFxSettle var(--dur, .42s) cubic-bezier(.25, .8, .2, 1) both;
}

.wickFxCardWarm {
  position: relative;
  background:
    linear-gradient(150deg, rgba(255, 248, 232, .98), rgba(240, 227, 200, .98));
  box-shadow: 0 4px 12px rgba(69, 55, 36, .12), 0 0 0 1px rgba(212, 165, 49, .16) inset;
}

.wickFxCardWarm::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 247, 224, .4) 0%, rgba(255, 247, 224, 0) 55%);
  opacity: .75;
}

@keyframes wickFxParticleDrift {
  0%   { opacity: 0; transform: translate3d(0, 10px, 0) scale(.72); }
  18%  { opacity: .8; }
  55%  { opacity: .55; transform: translate3d(6px, -8px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-4px, -18px, 0) scale(1.08); }
}

@keyframes wickFxGlowBurst {
  0%   { opacity: 0; transform: scale(.42); }
  20%  { opacity: .95; }
  58%  { opacity: .6; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes wickFxMoteFloat {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0) scale(.78); }
  16%  { opacity: .85; }
  55%  { opacity: .72; transform: translate3d(2px, -10px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-2px, -18px, 0) scale(1.04); }
}

@keyframes wickFxMoteOut {
  0%   { opacity: 0; transform: translate3d(0, 3px, 0) scale(.72); }
  18%  { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, -18px), 0) scale(1.02); }
}

@keyframes wickFxRewardFly {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.78) rotate(-4deg); }
  14%  { opacity: 1; }
  62%  { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, -18px), 0) scale(1.02) rotate(2deg); }
  100% { opacity: 0; transform: translate3d(calc(var(--dx, 0px) * 1.15), calc(var(--dy, -18px) * 1.1), 0) scale(.9) rotate(4deg); }
}

@keyframes wickFxSettle {
  0%   { opacity: 0; transform: translateY(-6px) scale(.98); filter: blur(.4px); }
  45%  { opacity: 1; transform: translateY(0) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wickFxParticle,
  .wickFxGlowBurst.wickFxBurstIn,
  .wickFxMote,
  .wickFxMoteOut,
  .wickFxRewardFly.wickFxFlyIn,
  .wickFxSettle {
    animation: none !important;
  }

  .wickFxParticle,
  .wickFxMote,
  .wickFxRewardFly {
    opacity: .72;
    transform: none;
  }

  .wickFxGlowBurst {
    opacity: .24;
    transform: none;
  }

  .wickFxCardWarm::before {
    opacity: .35;
  }
}