/* Manga effects of the pack opening (see fx.js). Everything sits above the page and never catches the pointer */
.fx-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fx { position: fixed; z-index: 62; pointer-events: none; }

/* Discovery notice lives below the card, leaving the existing rarity banner its own space. */
.wish-discovery { display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%;
  text-align: left; animation: wish-arrival .55s cubic-bezier(.16, 1, .3, 1) both; }
.wish-discovery-icon { width: 40px; height: 46px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 0 6px #ff932b) drop-shadow(0 0 16px #f64d2677); animation: wish-ignite .8s ease-out both; }
.wish-discovery > span { min-width: 0; }
.wish-discovery strong { display: block; color: #ffd6a0; font-size: clamp(13px, 3.5vw, 16px); line-height: 1.35; }
.wish-discovery-name { display: block; color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.wish-discovery-next { display: block; margin-top: 4px; font-size: 12px; }
@keyframes wish-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wish-ignite { 0% { opacity: 0; transform: translateY(8px) scale(.5) rotate(-12deg); } 45% { opacity: 1; transform: translateY(-3px) scale(1.2) rotate(6deg); } 100% { transform: none; } }

/* Onomatopoeia : heavy letters, black outline, a hard shadow, stamped then gone */
.fx-sfx, .fx-menace { translate: -50% -50%; rotate: var(--rot); color: var(--c); font: 900 var(--size) / 1 "Arial Black", "Segoe UI Black", "Yu Gothic", "Hiragino Sans", system-ui, sans-serif;
  white-space: nowrap; -webkit-text-stroke: calc(var(--size) * .06) #000; paint-order: stroke fill; text-shadow: calc(var(--size) * .07) calc(var(--size) * .07) 0 #000; }
.fx-sfx { animation: fx-stamp 1.3s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.fx-menace { animation: fx-rise 1.1s ease-out forwards; }

/* Screentone : halftone dots that flash over the screen and fade from the middle out */
.fx-tone { inset: 0; left: 0 !important; top: 0 !important; z-index: 59;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 85%, transparent) 32%, transparent 36%) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 10%, #000 70%); mask-image: radial-gradient(circle at 50% 45%, transparent 10%, #000 70%);
  animation: fx-tone .6s ease-out forwards; }

/* Impact frame : the page in negative for an instant */
html.fx-impact { filter: invert(1) grayscale(1) contrast(1.6); }

/* Katana cut : a blade of light drawn across, then gone */
.fx-slash { width: var(--len); height: 6px; translate: -50% -50%; rotate: var(--rot); border-radius: 50%; background: var(--c);
  box-shadow: 0 0 12px 3px var(--c), 0 0 30px 8px color-mix(in srgb, var(--c) 50%, transparent); transform-origin: left center; animation: fx-cut .45s ease-out forwards; }
/* The two halves of the black cover sliding apart along the cut */
.fx-half { border-radius: 14px; background: radial-gradient(circle at 50% 35%, #1a161a, #000 70%); }
.fx-half.a { clip-path: polygon(0 0, 100% 0, 100% 22%, 0 78%); animation: fx-half-a .7s ease-in forwards; }
.fx-half.b { clip-path: polygon(0 78%, 100% 22%, 100% 100%, 0 100%); animation: fx-half-b .7s ease-in forwards; }

/* Aura of a charging card : flames of its colour licking up around it */
.pcard.charge.aura::before { content: ""; position: absolute; inset: -18% -22% -6%; z-index: -1; pointer-events: none; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 85%, var(--glow), transparent 62%), conic-gradient(from 180deg at 50% 100%, transparent 0 20%, color-mix(in srgb, var(--glow) 70%, transparent) 25% 30%, transparent 35% 45%, color-mix(in srgb, var(--glow) 70%, transparent) 50% 55%, transparent 60% 70%, color-mix(in srgb, var(--glow) 70%, transparent) 75% 80%, transparent 85%);
  filter: blur(6px); animation: fx-flame .18s ease-in-out infinite alternate; }

@keyframes fx-stamp { 0% { opacity: 0; scale: 2.4; } 12% { opacity: 1; scale: .9; } 20% { scale: 1.05; } 26%, 75% { scale: 1; opacity: 1; } 100% { opacity: 0; scale: 1.08; } }
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }
@keyframes fx-tone { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes fx-cut { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fx-half-a { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(-18%, -26%) rotate(-6deg); opacity: 0; } }
@keyframes fx-half-b { 0%, 25% { transform: none; opacity: 1; } 100% { transform: translate(18%, 26%) rotate(6deg); opacity: 0; } }
@keyframes fx-flame { from { transform: scaleY(.94) skewX(-2deg); opacity: .75; } to { transform: scaleY(1.08) skewX(2deg); opacity: 1; } }