/* Full-screen moments (public/js/fx.js): the reveal for anything you get, and money moving (cash-out, buying credits). */
.fx { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 28px 16px; overflow-y: auto; opacity: 0; transition: opacity .3s;
  background: radial-gradient(55% 45% at 50% 40%, color-mix(in srgb, var(--rc, #3d6bff) 16%, transparent), transparent 72%), rgba(6, 7, 10, .95); backdrop-filter: blur(10px); }
.fx.in { opacity: 1; }
body.fx-open { overflow: hidden; }
.fx-box, .rv { position: relative; width: min(540px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; transform: translateY(16px) scale(.98); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fx.in .fx-box, .fx.in .rv { transform: none; }
.fx-title { margin: 0; color: var(--smoke); font-size: 12px; letter-spacing: .18em; }

/* ---- money moving ---- */
.fx-hero { position: relative; width: 210px; height: 210px; display: grid; place-items: center; perspective: 800px; }
.fx-halo { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, var(--halo, rgba(245, 194, 66, .32)), transparent 64%); animation: fx-halo 2.4s ease-in-out infinite; }
@keyframes fx-halo { 50% { transform: scale(1.14); opacity: .65; } }
.fx-coin { position: relative; width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 34px 60px #000b, inset 0 -9px 0 #0000002e, inset 0 7px 0 #ffffff45; animation: fx-bob 2.6s ease-in-out infinite; }
@keyframes fx-bob { 50% { translate: 0 -9px; } }
.coin-credit .fx-coin { background: radial-gradient(circle at 34% 26%, #fff3c2, #f5c242 36%, #d48b10 74%, #94580a); }
.coin-sol { --halo: rgba(20, 241, 149, .28); }
.coin-sol .fx-coin { background: radial-gradient(circle at 34% 26%, #eafff6, #14f195 30%, #7b4cff 82%); }
.fx-face { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #ffffff5c; display: grid; place-items: center; color: #fffffff0; font: 800 50px/1 var(--sans); text-shadow: 0 2px 0 #00000033; }
.coin-credit .fx-face::before { content: 'C'; }
.coin-sol .fx-face::before { content: '\25CE'; font-size: 46px; }
.fx-amt { font-size: clamp(52px, 10vw, 88px); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-unit { margin-top: -6px; color: var(--smoke); font-size: 12px; letter-spacing: .14em; }
.fx.won .fx-amt { color: var(--over); animation: fx-land .6s cubic-bezier(.2, .8, .2, 1.3); }
.coin-credit.won .fx-amt { color: #ffd66b; }
@keyframes fx-land { from { transform: scale(.7); } }
.fx.failed .fx-coin { filter: grayscale(.85) brightness(.65); animation: none; }
.fx-route { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; margin-top: 4px; }
.fx-node { padding: 8px 13px; border-radius: 99px; background: var(--panel); border: 1px solid var(--rule); font: 12px var(--mono); white-space: nowrap; color: var(--ash); }
.fx-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #3a3e47 0 6px, transparent 6px 12px); }
.fx-line i { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 34% 28%, #fff3c2, #f5c242 45%, #b8730a); box-shadow: 0 0 16px #f5c242aa; }
.coin-sol .fx-line i { background: radial-gradient(circle at 34% 28%, #eafff6, #14f195 40%, #7b4cff); box-shadow: 0 0 16px #14f195aa; }
.fx-route.moving .fx-line i { opacity: 1; animation: fx-travel 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes fx-travel { from { left: 0; } to { left: calc(100% - 16px); } }
.fx-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 380px; text-align: left; }
.fx-steps li { display: flex; align-items: center; gap: 12px; color: #4a4f59; font-size: 15px; transition: color .3s; }
.fx-steps li i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2c3038; display: grid; place-items: center; }
.fx-steps li.on { color: var(--ash); }
.fx-steps li.on i { border-color: var(--ember); border-top-color: transparent; animation: fx-spin .8s linear infinite; }
.fx-steps li.done { color: var(--smoke); }
.fx-steps li.done i { border-color: var(--over); background: var(--over); animation: fx-pop .35s cubic-bezier(.2, .8, .2, 1.5); }
.fx-steps li.done i::after { content: ''; width: 9px; height: 5px; border: 2px solid #06140b; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.fx-steps li.bad { color: var(--under); }
.fx-steps li.bad i { border-color: var(--under); }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pop { from { transform: scale(.4); } }
.fx-end { display: grid; gap: 14px; justify-items: center; min-height: 8px; margin-top: 4px; }
.fx-sub { margin: 0; color: var(--ash); font-size: 18px; }
.fx-note { margin: 0; max-width: 42ch; color: var(--smoke); }
.fx-note.bad { color: #ffb3bd; }
.fx-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fx-acts .pill, .rv-acts .pill { min-width: 150px; padding: 15px 24px; }
.fx-p { position: fixed; z-index: 600; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }
.fx-p.sq { width: 7px; height: 12px; border-radius: 2px; }
.fx-rain { position: fixed; z-index: 600; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 28%, #fff3c2, #f5c242 45%, #b8730a); box-shadow: inset 0 0 0 2px #00000024; }

/* ---- the reveal ---- */
.rv-rays { position: absolute; left: 50%; top: 34%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; pointer-events: none; opacity: 0; transition: opacity .7s;
  background: repeating-conic-gradient(color-mix(in srgb, var(--rc, #3d6bff) 26%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); mask-image: radial-gradient(circle, #000 0, transparent 60%); animation: fx-rays 20s linear infinite; }
.reveal.shown .rv-rays { opacity: 1; }
@keyframes fx-rays { to { transform: rotate(360deg); } }
.rv-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; perspective: 1200px; }
.rv-card { position: relative; width: 200px; height: 262px; }
.rv-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .8, .2, 1.1); }
.rv-card.flipped .rv-in { transform: rotateY(180deg); }
.rv-back, .rv-front { position: absolute; inset: 0; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; align-content: center; gap: 10px; }
.rv-back { background: radial-gradient(circle at 50% 30%, #2b2e36, #111317); border: 1px solid #ffffff1c; box-shadow: 0 30px 60px #000c, inset 0 0 0 7px #ffffff07; }
.rv-back span { font: 800 84px/1 var(--sans); color: #ffffff26; }
.rv-card.charging .rv-in { animation: fx-charge .42s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }
.rv-card.charging .rv-back { animation: fx-chargeglow 1.1s ease-in forwards; }
@keyframes fx-charge { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg) translateY(-7px); } }
@keyframes fx-chargeglow { to { box-shadow: 0 30px 60px #000c, 0 0 70px 8px rgba(61, 107, 255, .45); } }
.rv-front { transform: rotateY(180deg); padding: 18px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 66%), #14161b; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 30px 70px #000c, 0 0 56px color-mix(in srgb, var(--rc) 38%, transparent); }
.rv-front .ii { width: 96px; height: 96px; border-radius: 28px; }
.rv-front .ii svg { width: 52px; height: 52px; }
.rv-front .aa { font-size: 40px; }
.rv-front .rar { margin: 4px 0 0; font-size: 11px; }
.rv-front b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.rv-front small { color: var(--smoke); font-size: 13px; }
.rv-text { display: grid; gap: 8px; justify-items: center; width: 100%; opacity: 0; transform: translateY(10px); transition: opacity .5s .1s, transform .5s .1s; }
.reveal.shown .rv-text { opacity: 1; transform: none; }
.rv-got { margin: 0; color: var(--smoke); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.rv-text h2 { margin: 0; font-size: clamp(30px, 6vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.reveal.r-legendary .rv-text h2 { background: linear-gradient(180deg, #fff1b8, #ffc542 60%, #d48b10); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-line { margin: 0; max-width: 40ch; color: var(--smoke); }
.rv-text .preview { width: 100%; max-width: 380px; text-align: left; margin-top: 6px; }
.rv-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; opacity: 0; transition: opacity .4s .3s; }
.reveal.shown .rv-acts { opacity: 1; }

@media (max-width: 640px) {
  .rv-card { width: 150px; height: 200px; }
  .rv-front .ii { width: 70px; height: 70px; border-radius: 20px; }
  .rv-front .ii svg { width: 38px; height: 38px; }
  .fx-hero { width: 170px; height: 170px; }
  .fx-coin { width: 128px; height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx, .fx-box, .rv, .rv-in, .rv-text, .rv-acts { transition: none !important; }
  .fx-halo, .fx-coin, .rv-rays, .rv-card.charging .rv-in, .fx-route.moving .fx-line i, .fx-steps li i { animation: none !important; }
}
/* item art in the reveal: the picture fills its tile */
.rv-front .ii { width: 120px; height: 120px; border-radius: 22px; }
.rv-front .ii .iart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .rv-front .ii { width: 88px; height: 88px; border-radius: 18px; } }