.card-thumb,
.card-popup__art {
  position: relative;
  isolation: isolate;
}

.card-particle-layer,
.oracle-reveal-burst {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.card-particle-layer {
  background: radial-gradient(circle at 50% 40%, rgba(255,244,199,.08), transparent 62%);
  mix-blend-mode: screen;
}

.card-particle-layer i {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6ce;
  box-shadow: 0 0 5px #fff, 0 0 12px rgba(226,183,85,.9);
  opacity: 0;
  animation: card-mote-drift var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.oracle-reveal-burst {
  overflow: visible;
  z-index: 5;
}
.oracle-reveal-burst::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,201,.48), rgba(217,173,72,.13) 38%, transparent 68%);
  animation: oracle-burst-halo .8s ease-out both;
}
.oracle-reveal-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--burst-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8d8;
  box-shadow: 0 0 7px #fff, 0 0 16px rgba(220,173,65,.9);
  animation: oracle-burst-spark 1s cubic-bezier(.15,.75,.18,1) var(--burst-delay) both;
}

.card-reveal-flash { animation: card-reveal-fade .32s ease-out; }

.oracle-sound-toggle {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-sticky-controls, 30);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 44px;
  min-height: 44px;
  padding: .55rem .75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.oracle-sound-toggle span { color: var(--color-gold); font-size: 1.15rem; }
.oracle-sound-toggle small { font-size: .72rem; }
.oracle-sound-toggle[aria-pressed="false"] { opacity: .72; }
.oracle-sound-toggle:hover { opacity: 1; transform: translateY(-2px); }
.oracle-sound-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

@keyframes card-mote-drift {
  0%,100% { opacity: 0; transform: translate3d(0,8px,0) scale(.6); }
  24% { opacity: .75; }
  55% { opacity: .35; transform: translate3d(5px,-12px,0) scale(1.15); }
  78% { opacity: .8; }
}
@keyframes oracle-burst-spark {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.1); }
}
@keyframes oracle-burst-halo {
  0% { opacity: 0; transform: scale(.55); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes card-reveal-fade {
  0% { opacity: .4; }
  100% { opacity: 1; }
}

@media (max-width: 520px) {
  .oracle-sound-toggle small { display: none; }
  .oracle-sound-toggle { padding: .55rem; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .card-particle-layer i,
  .oracle-reveal-burst,
  .oracle-sound-toggle { animation: none !important; transition: none !important; }
  .card-particle-layer i:nth-child(-n+4) { opacity: .5; }
}

@media print {
  .card-particle-layer,
  .oracle-reveal-burst,
  .oracle-sound-toggle { display: none !important; }
}