/* The animation lives above the page; secret rarities dim the surroundings. */
.reveal-fx-layer { position: fixed; inset: 0; z-index: 21000; overflow: hidden; pointer-events: none; }
.reveal-fx-dimmer { position: absolute; inset: 0; background: #0d081b; opacity: 0; }
/* The screen-wide spectacle: above the dimmer, below the card. */
.reveal-fx-surface { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* What is drawn again above the card: the bolt that strikes a Stormforged one, where it lands on it, and the light that falls over an Overgrown one. */
.reveal-fx-strike { z-index: 4; }
/* What grows across the card in an Overgrown reveal: over it, under the light. */
.reveal-fx-growth-front { z-index: 3; }
.reveal-fx-stage { position: absolute; display: grid; place-items: center; }
.reveal-fx-shell { position: relative; z-index: 2; width: 100%; height: 100%; }
.reveal-fx-front, .reveal-fx-front .trading-card { width: 100%; height: 100%; margin: 0; }
.reveal-fx-front .full-card-image img { width: 100%; height: 100%; object-fit: contain; }
/* The same card, bare as it lies on the table. */
.reveal-fx-front .trading-card.full-card-image:not(.has-caption-overlay) > .collectible-caption { display: none; }
/* A regular card is turned over by hand: its shadow stays on the table under it, the light runs across its face once it is up, and its edge lights in its rarity's colour. */
.reveal-fx-shadow { position: absolute; z-index: 1; inset: 0; border-radius: 20px; box-shadow: 0 18px 34px #000000a6, 0 5px 9px #00000059; opacity: 0; }
.reveal-fx-sheen { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; mix-blend-mode: screen; }
.reveal-fx-sheen i { position: absolute; top: -12%; bottom: -12%; left: 22%; width: 56%; background: linear-gradient(90deg, transparent, #ffffffb3 46%, #fff 50%, #ffffffb3 54%, transparent); opacity: 0; }
.reveal-fx-legendary .reveal-fx-sheen i { background: linear-gradient(90deg, transparent, #ffe9a3b3 46%, #fff6d6 50%, #ffe9a3b3 54%, transparent); }
.reveal-fx-rim { position: absolute; inset: 0; border-radius: 20px; box-shadow: 0 0 0 2px var(--fx-highlight), 0 0 28px var(--fx-color), inset 0 0 24px var(--fx-color); opacity: 0; }
.reveal-fx-cover { position: absolute; inset: 0; border-radius: 20px; background: #25252d; overflow: hidden; }
.reveal-fx-cover .card-back { box-sizing: border-box; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.reveal-fx-cover .card-back, .reveal-fx-front .trading-card { animation: none; }
.reveal-fx-aura { position: absolute; width: 120%; height: 105%; border-radius: 50%; background: conic-gradient(var(--fx-color), var(--fx-highlight), var(--fx-color)); filter: blur(35px); opacity: 0; }
.reveal-fx-wave { position: absolute; z-index: 3; width: 95%; aspect-ratio: 1; border: 5px solid var(--fx-highlight); border-radius: 50%; box-shadow: 0 0 22px var(--fx-color), inset 0 0 22px var(--fx-color); opacity: 0; }
.reveal-fx-sunburst { position: absolute; width: 220%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, var(--fx-highlight) 12deg 18deg, transparent 18deg 30deg); mask-image: radial-gradient(circle, black 15%, transparent 68%); opacity: 0; }
.reveal-fx-particles { position: absolute; z-index: 3; inset: 0; }
.reveal-fx-particles i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--fx-highlight); box-shadow: 0 0 10px var(--fx-color); opacity: 0; }
.reveal-fx-prism { position: absolute; pointer-events: none; opacity: 0; }
/* Regular tiers shape what they throw off: motes, sparkles, shards; a legendary card sends a second ring after the first. */
.reveal-fx-uncommon.reveal-fx-flip .reveal-fx-particles i { width: 9px; height: 9px; filter: blur(.5px); box-shadow: 0 0 14px 2px var(--fx-color); }
.reveal-fx-rare.reveal-fx-flip .reveal-fx-particles i { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); box-shadow: none; filter: drop-shadow(0 0 5px var(--fx-color)); }
.reveal-fx-epic.reveal-fx-flip .reveal-fx-particles i { width: 4px; height: 13px; border-radius: 1px; box-shadow: 0 0 8px var(--fx-color); }
/* Turned over by hand, a card sends its wave out from its own edge, in its own shape, behind it. */
.reveal-fx-flip .reveal-fx-wave, .reveal-fx-flip.reveal-fx-legendary .reveal-fx-prism { z-index: 1; inset: 0; width: auto; aspect-ratio: auto; border: 3px solid var(--fx-highlight); border-radius: 22px; box-shadow: 0 0 20px var(--fx-color), inset 0 0 20px var(--fx-color); }
/* Secret tiers frame the artwork; their energy never washes over its face. */
.reveal-fx-mythical .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #210710, #050207 75%); }
.reveal-fx-celestial .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #070a1c, #010208 75%); }
.reveal-fx-gilded .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #2a1c03, #0a0602 75%); }
.reveal-fx-unique .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #2a1030, #0b0610 75%); }
.reveal-fx-abyssal .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #021a24, #000509 75%); }
.reveal-fx-glitched .reveal-fx-dimmer { background: #000; }
.reveal-fx-overgrown .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #16240f, #060a04 75%); }
.reveal-fx-special .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #062422, #010707 75%); }
.reveal-fx-stormforged .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #0b1330, #02040c 75%); }
/* The half a torn copy loses lies over the one it keeps, until it is pulled away; the paper it sheds falls in front. */
.reveal-fx-front .reveal-fx-torn-away { position: absolute; inset: 0; }
.reveal-fx-flecks { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.reveal-fx-flecks i { position: absolute; left: 50%; top: 50%; width: 7px; height: 4px; border-radius: 1px; background: #fbf8f0; box-shadow: 0 1px 1px #0006; opacity: 0; }
.reveal-fx-flecks i:nth-child(3n) { width: 4px; height: 3px; background: #e9dcc0; }
/* The fryer's kitchen: a dark room, lit by the oil once the fryer is up. */
.reveal-fx-deepfried .reveal-fx-dimmer { background: radial-gradient(ellipse at center, #2a1606, #090402 75%); }
/* Raw: a Deep Fried copy shows its picture as it was made before it goes into the fryer, and the fried one as it comes out.
   It outweighs trading-card.css, which hides that picture and which the opening page loads after this sheet (#990). */
.reveal-fx-raw .reveal-fx-front .card-art .card-raw-art { opacity: 1; }
/* A Full Art copy goes in with its subject inside the frame and comes out with the fried one stepping out of it (#1207). */
.reveal-fx-raw .reveal-fx-front .card-pop-out { opacity: 0; }
/* Drafting paper: the blue of a print, ruled in a fine grid. */
.reveal-fx-blueprint .reveal-fx-dimmer { background: linear-gradient(#ffffff12 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / 22px 100%, radial-gradient(ellipse at center, #1b519b, #0d3167 80%); }
/* Inkbound turns the screen to paper rather than dark: the ink is drawn on it. */
.reveal-fx-inkbound .reveal-fx-dimmer { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") #efe8d6; }
:is(.reveal-fx-unique, .reveal-fx-mythical, .reveal-fx-celestial, .reveal-fx-gilded, .reveal-fx-abyssal, .reveal-fx-overgrown, .reveal-fx-special) .reveal-fx-wave { z-index: 1; }
/* Coins, bubbles and leaves spill past the card, so they stay in front of it. */
:is(.reveal-fx-unique, .reveal-fx-mythical, .reveal-fx-celestial) .reveal-fx-particles { z-index: 1; }
.reveal-fx-gilded .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(24px);
    background: radial-gradient(ellipse, transparent 30%, #8a5a08 45%, #ffe9a0 56%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-mythical .reveal-fx-aura {
    width: 155%; height: 145%; border-radius: 35%; filter: blur(18px) saturate(1.35);
    background: radial-gradient(ellipse, transparent 28%, #7e091f 46%, var(--fx-color) 56%, #ffb36b 61%, transparent 74%);
    mix-blend-mode: screen;
}
.reveal-fx-unique .reveal-fx-aura {
    width: 160%; height: 135%; filter: blur(20px);
    background: radial-gradient(ellipse, transparent 30%, #ff3cac 43%, #4deeea 53%, #a1fffa 59%, transparent 72%);
    mix-blend-mode: screen;
}
.reveal-fx-mythical .reveal-fx-particles i { width: 3px; height: 11px; border-radius: 1px; box-shadow: 0 0 9px var(--fx-color); }
.reveal-fx-mythical .reveal-fx-particles i:nth-child(3n) { width: 4px; height: 4px; background: #ffe4a3; box-shadow: 0 0 12px #ff6937; }
/* Celestial is an eclipse: the corona round the card's dark edge, then the sun's halo and rays when the day comes back. */
.reveal-fx-celestial .reveal-fx-aura {
    width: 190%; height: 170%; filter: blur(22px);
    background: radial-gradient(ellipse, transparent 27%, #ffd9e6 31%, #fff7f0 36%, #9fc8ff88 46%, transparent 64%);
    mix-blend-mode: screen;
}
.reveal-fx-celestial .reveal-fx-prism {
    z-index: 1; width: 230%; aspect-ratio: 1; border-radius: 50%;
    background: conic-gradient(from 0deg, #ffb3b3, #ffe9a8, #c8ffd9, #b3dcff, #e4c4ff, #ffb3b3);
    mask-image: radial-gradient(circle, transparent 46%, #0007 48.5%, black 50%, transparent 53%);
    filter: blur(3px); mix-blend-mode: screen;
}
.reveal-fx-celestial .reveal-fx-sunburst {
    width: 260%;
    background: repeating-conic-gradient(from 0deg, transparent 0deg 7deg, #fff3d680 8deg 11deg, transparent 12deg 20deg);
    mask-image: radial-gradient(circle, transparent 18%, black 30%, transparent 70%);
    mix-blend-mode: screen;
}
/* Stardust, and the shooting stars among it: a streak with a bright head, lying along the way it goes. */
.reveal-fx-celestial .reveal-fx-particles i { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 8px #d8f5ff; }
.reveal-fx-celestial .reveal-fx-particles i:nth-child(odd) {
    width: 2px; height: 34px; border-radius: 1px; transform-origin: 50% 0;
    background: linear-gradient(#fff, #d8f5ffcc 40%, transparent); box-shadow: none;
}
.reveal-fx-unique .reveal-fx-particles i { width: 3px; height: 3px; background: #c9fffb; box-shadow: 0 0 10px #4deeea, 0 0 3px #fff; }
.reveal-fx-unique .reveal-fx-particles i:nth-child(odd) { background: #ffd0ec; box-shadow: 0 0 10px #ff3cac, 0 0 3px #fff; }
.reveal-fx-abyssal .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(26px);
    background: radial-gradient(ellipse, transparent 30%, #0b5d73 45%, #3ff5d8 55%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-abyssal .reveal-fx-particles i {
    width: 10px; height: 10px; background: radial-gradient(circle at 32% 30%, #ffffffcc 0 12%, transparent 18%);
    border: 1.5px solid #b8fff2bb; box-shadow: 0 0 6px #3ff5d888, inset 0 0 4px #3ff5d844;
}
.reveal-fx-abyssal .reveal-fx-particles i:nth-child(3n) { width: 6px; height: 6px; }
.reveal-fx-overgrown .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(24px);
    background: radial-gradient(ellipse, transparent 30%, #3b6a1f 46%, #d8f0a0 56%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-special .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(24px);
    background: radial-gradient(ellipse, transparent 30%, #0a6a64 45%, #7ff5e6 55%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-special .reveal-fx-particles i { width: 3px; height: 3px; background: #dcfffa; box-shadow: 0 0 9px #3fe0cf, 0 0 2px #fff; }
.reveal-fx-special .reveal-fx-particles i:nth-child(4n) { width: 2px; height: 2px; background: #fff4d8; box-shadow: 0 0 8px #ffe3a3; }
.reveal-fx-stormforged .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(22px);
    background: radial-gradient(ellipse, transparent 30%, #14268a 44%, #7cc4ff 55%, #e2f3ff 58%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-stormforged .reveal-fx-particles i { width: 3px; height: 3px; background: #eaf6ff; box-shadow: 0 0 8px #7cc4ff, 0 0 2px #fff; }
.reveal-fx-stormforged .reveal-fx-particles i:nth-child(3n) { width: 2px; height: 2px; background: #fff; box-shadow: 0 0 6px #b3a8ff; }
/* The oil spitting off a Deep Fried card as it comes out: golden drops, and the crumbs that come off with them. */
.reveal-fx-deepfried .reveal-fx-aura {
    width: 150%; height: 140%; filter: blur(22px);
    background: radial-gradient(ellipse, transparent 30%, #5e3a1c 45%, #b5814e 55%, #ecd6b2 59%, transparent 70%);
    mix-blend-mode: screen;
}
.reveal-fx-deepfried .reveal-fx-particles i { width: 5px; height: 5px; background: radial-gradient(circle at 35% 30%, #fff3d6 0 25%, #b5814e 60%, #7b4a26); box-shadow: 0 0 6px #b5814eaa; }
.reveal-fx-deepfried .reveal-fx-particles i:nth-child(3n) { width: 4px; height: 3px; border-radius: 1px; background: #4f2b13; box-shadow: none; }
.reveal-fx-spectrum {
    position: absolute; z-index: 1; width: 215%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
    background: conic-gradient(from 15deg, #ff68a4, #ffe58b, #92ffd7, #68d9ff, #b194ff, #ff86df, #ff68a4);
    mask-image: radial-gradient(circle, transparent 28%, #0007 36%, black 43%, transparent 65%);
    filter: blur(4px);
}
.reveal-fx-spectrum::after {
    content: ''; position: absolute; inset: -8%; border-radius: inherit;
    background: repeating-conic-gradient(transparent 0deg 18deg, #fff 18.5deg 19deg, transparent 19.5deg 30deg);
}
.reveal-fx-pending > .trading-card { visibility: hidden; }
.reveal-card.is-revealed .trading-card { animation: none; }
.reveal-card:disabled { cursor: wait; opacity: 1; }
.reveal-animation-setting { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.reveal-animation-setting input { width: 18px; height: 18px; accent-color: #8d55ef; }
.reveal-animation-note { max-width: 360px; margin: 8px 0 0; color: #625c6d; font-size: .75rem; }
.reveal-animation-note[hidden] { display: none; }