/* ==========================================================================
   Gamarium · signature effects (SPEC 23): no sunburst rays anywhere. Our mark is an eclipse: a soft corona of light
   leaking from behind the coin or object, a few slow orbiting sparks, calm star dust. Used by the Daily Tap stage,
   the reveals (eclipse ending: the object rises from behind a dark disc, light breaks round the edge, a shine
   sweeps), the sparkle that replaced confetti, and the mystery cards. Transform and opacity only.
   ========================================================================== */

/* shared corona rings (closest-side: the lit rim sits at about 60% of the box radius) and star dust */
:root {
  --corona-w: radial-gradient(closest-side, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .45) 56%, rgba(255, 255, 255, .85) 61%, rgba(255, 255, 255, .3) 68%,
    rgba(255, 255, 255, .08) 82%, rgba(255, 255, 255, 0) 100%);
  --corona-g: radial-gradient(closest-side, rgba(255, 196, 60, 0) 48%, rgba(255, 196, 60, .4) 56%, rgba(255, 186, 40, .7) 61%, rgba(255, 196, 60, .24) 68%,
    rgba(255, 196, 60, .06) 82%, rgba(255, 196, 60, 0) 100%);
  --corona-v: radial-gradient(closest-side, rgba(123, 77, 255, 0) 48%, rgba(123, 77, 255, .14) 56%, rgba(123, 77, 255, .26) 61%, rgba(123, 77, 255, .1) 68%,
    rgba(123, 77, 255, 0) 90%);
  --dust: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.2px, transparent 1.9px) 7px 11px / 46px 41px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px) 29px 3px / 67px 59px,
    radial-gradient(circle, rgba(255, 246, 214, .9) 0 1.3px, transparent 2px) 50px 30px / 83px 71px;
}

/* ---------- star dust: a sparse, calm field of tiny stars (two layers twinkle out of phase) ---------- */
.sdust { position: absolute; inset: 0; pointer-events: none; }
.sdust::before, .sdust::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.2px, transparent 1.9px) 7px 11px / 46px 41px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px) 29px 3px / 67px 59px; }
.sdust::after { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.1px) 21px 30px / 83px 71px,
    radial-gradient(circle, rgba(255, 246, 214, .9) 0 1px, transparent 1.6px) 50px 17px / 57px 53px; animation: dust-tw 4.6s ease-in-out infinite; }
.sdust::before { animation: dust-tw 5.8s ease-in-out -2.4s infinite; }
@keyframes dust-tw { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }

/* ---------- the eclipse corona behind the Daily Tap coin ---------------------------------------- */
.corona { --cs: min(200px, 54vw); position: absolute; z-index: 0; left: 50%; top: calc(50px + var(--cs) / 2); width: 0; height: 0; pointer-events: none;
  --c-core: 255, 253, 240; --c-mid: 255, 228, 140; --c-out: 255, 246, 200; }
.corona > i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
/* the soft light leaking around the coin's edge */
.cr-halo { width: calc(var(--cs) * 2.3); height: calc(var(--cs) * 2.3); margin: calc(var(--cs) * -1.15) 0 0 calc(var(--cs) * -1.15);
  background: radial-gradient(closest-side, rgba(var(--c-core), 1) 0 44%, rgba(var(--c-core), .92) 47%, rgba(var(--c-mid), .8) 51%, rgba(var(--c-mid), .42) 58%,
    rgba(var(--c-out), .16) 71%, rgba(var(--c-out), 0) 90%);
  animation: cr-breathe 5.5s ease-in-out infinite; }
/* the thin bright rim, a touch bigger than the coin, with the "diamond" bead of light at its top right */
.cr-ring { width: calc(var(--cs) * 1.13); height: calc(var(--cs) * 1.13); margin: calc(var(--cs) * -.565) 0 0 calc(var(--cs) * -.565);
  border: 2px solid rgba(var(--c-core), .9); box-shadow: 0 0 14px 3px rgba(var(--c-core), .75), inset 0 0 12px 2px rgba(var(--c-core), .6);
  animation: cr-turn 26s linear infinite; }
.cr-ring::after { content: ""; position: absolute; left: 82%; top: 7%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 22%, rgba(255, 255, 255, .7) 40%, rgba(var(--c-mid), 0) 100%); }
/* one ring that flashes out on every tap */
.cr-pulse { width: calc(var(--cs) * 1.2); height: calc(var(--cs) * 1.2); margin: calc(var(--cs) * -.6) 0 0 calc(var(--cs) * -.6); opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--c-core), 0) 78%, rgba(var(--c-core), .95) 88%, rgba(var(--c-mid), .5) 94%, rgba(var(--c-mid), 0) 100%); }
/* slow orbiting sparks */
.cr-orb { width: calc(var(--cs) * var(--o, 1.4)); height: calc(var(--cs) * var(--o, 1.4)); margin: calc(var(--cs) * var(--o, 1.4) / -2) 0 0 calc(var(--cs) * var(--o, 1.4) / -2);
  animation: cr-turn var(--od, 18s) linear infinite; }
.cr-orb b { position: absolute; left: 50%; top: 0; width: var(--os, 7px); height: var(--os, 7px); margin: calc(var(--os, 7px) / -2) 0 0 calc(var(--os, 7px) / -2); border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 3px rgba(var(--c-mid), .9); }
.cr-orb.o1 { --o: 1.36; --od: 16s; }
.cr-orb.o2 { --o: 1.62; --od: 27s; --os: 5px; animation-direction: reverse; animation-delay: -9s; }
.cr-orb.o3 { --o: 1.86; --od: 38s; --os: 4px; animation-delay: -21s; }
@keyframes cr-turn { to { transform: rotate(360deg); } }
@keyframes cr-breathe { 50% { transform: scale(1.04); opacity: .86; } }
.stage .st-head, .stage .arena-c { position: relative; }
.stage .coin-sh { opacity: .55; }
/* Turbo: a brighter pink / violet corona, faster sparks */
.stage.is-turbo .corona { --c-mid: 255, 186, 236; --c-out: 236, 200, 255; }
.stage.is-turbo .cr-halo { animation-duration: 1.1s; }
.stage.is-turbo .cr-ring { border-width: 3px; animation-duration: 6s; }
.stage.is-turbo .cr-orb { animation-duration: calc(var(--od) / 5); }
.stage.is-turbo .cr-orb b { width: calc(var(--os, 7px) + 2px); height: calc(var(--os, 7px) + 2px); box-shadow: 0 0 10px 4px rgba(255, 120, 220, .95); }
/* no taps left: the eclipse goes quiet */
.stage.is-empty .corona { opacity: .45; }
.stage.is-empty .cr-orb, .stage.is-empty .cr-halo { animation-play-state: paused; }

/* ---------- eclipse sparkle (replaces confetti): a corona ring flashes out, a few star motes drift ---------- */
.cft { position: fixed; z-index: 700; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; background: #fff;
  box-shadow: 0 0 8px 3px var(--cft, rgba(255, 210, 90, .9)); will-change: transform, opacity; }
.cft.s { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 0; box-shadow: none; background: #FFF6C8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.fx-flare { position: fixed; z-index: 699; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .95) 72%, rgba(255, 214, 110, .55) 82%, rgba(255, 214, 110, 0) 100%); }

/* ---------- mystery eclipse (Coming soon covers) --------------------------------------------- */
.mys { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 42% 36%, #3A2580, #1B0E46 72%); border: 2.5px solid var(--ink);
  box-shadow: 0 0 0 2.5px #fff, 0 0 12px 5px rgba(255, 255, 255, .95), 0 0 30px 12px var(--mg, rgba(255, 255, 255, .4)); }
.mys::after { content: ""; position: absolute; right: 2px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 25%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); }
.mys .q { font: 400 38px/1 var(--f-d); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }

@media (prefers-reduced-motion: reduce) {
  .sdust::before, .sdust::after, .cr-halo, .cr-ring, .cr-orb { animation: none !important; }
}