/* ===========================================================
   Visual FX layer — ambiance, lightning, glow, win effects
   =========================================================== */

/* --- God rays sweeping behind the wheel --- */
.fx-rays {
    position: absolute;
    left: 50%;
    top: 300px;
    width: 760px;
    height: 760px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(199, 138, 255, 0.18) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(255, 214, 120, 0.14) 50deg,
            transparent 60deg,
            transparent 90deg,
            rgba(199, 138, 255, 0.16) 100deg,
            transparent 115deg,
            transparent 150deg,
            rgba(255, 214, 120, 0.12) 160deg,
            transparent 175deg,
            transparent 210deg,
            rgba(199, 138, 255, 0.18) 220deg,
            transparent 235deg,
            transparent 270deg,
            rgba(255, 214, 120, 0.13) 280deg,
            transparent 295deg,
            transparent 330deg,
            rgba(199, 138, 255, 0.16) 340deg,
            transparent 352deg
        );
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 64%);
    mask-image: radial-gradient(circle, #000 18%, transparent 64%);
    filter: blur(2px);
    opacity: 0.75;
    animation: raysSpin 38s linear infinite;
    will-change: transform;
}

@keyframes raysSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.is-spinning .fx-rays {
    opacity: 1;
    animation-duration: 8s;
}

/* --- Floating gold dust / sparkles --- */
.fx-sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

.spark {
    position: absolute;
    bottom: -16px;
    width: var(--s, 6px);
    height: var(--s, 6px);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe79a 38%, rgba(255, 186, 17, 0) 72%);
    opacity: 0;
    will-change: transform, opacity;
    animation: sparkRise var(--dur, 9s) linear var(--delay, 0s) infinite;
}

@keyframes sparkRise {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    10%  { opacity: var(--peak, 0.9); }
    50%  { transform: translate3d(var(--dx, 12px), -440px, 0) scale(1); opacity: var(--peak, 0.9); }
    90%  { opacity: 0; }
    100% { transform: translate3d(calc(var(--dx, 12px) * -1), -880px, 0) scale(0.4); opacity: 0; }
}

/* --- Lightning flashes (Zeus) --- */
.fx-lightning {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(220, 200, 255, 0.9), rgba(161, 1, 253, 0.25) 40%, transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 45%);
}

.fx-lightning.strike {
    animation: lightningStrike 0.9s ease-out;
}

@keyframes lightningStrike {
    0%   { opacity: 0; }
    6%   { opacity: 0.95; }
    12%  { opacity: 0.1; }
    18%  { opacity: 0.8; }
    28%  { opacity: 0; }
    100% { opacity: 0; }
}

/* --- Button shine sweep --- */
.btn-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    border-radius: 22px;
    -webkit-mask-image: url("../images/button.png");
    mask-image: url("../images/button.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.btn-shine::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 45%;
    height: 180%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-18deg);
    animation: shineSweep 3.4s ease-in-out infinite;
}

@keyframes shineSweep {
    0%, 22%  { left: -60%; }
    45%, 100% { left: 130%; }
}

/* --- Win: coin shower --- */
.coins {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9;
}

.coin {
    position: absolute;
    top: -40px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff6cf 0%, #ffd54a 30%, #f4a800 70%, #b9740b 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 247, 200, 0.7), 0 3px 8px rgba(0, 0, 0, 0.35);
    opacity: 0;
    will-change: transform, opacity;
    animation: coinFall var(--dur, 2.6s) cubic-bezier(0.4, 0.1, 0.7, 1) var(--delay, 0s) forwards;
}

.coin::before {
    content: "€";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 14px/1 "Poppins", sans-serif;
    color: #9a5a00;
}

@keyframes coinFall {
    0%   { transform: translate3d(0, -40px, 0) rotateY(0deg) scale(0.7); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate3d(var(--dx, 0), 940px, 0) rotateY(900deg) scale(1); opacity: 0; }
}

/* --- Win screen flash + shake --- */
.fx-winflash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    background: radial-gradient(circle at 50% 38%, rgba(255, 244, 200, 0.85), rgba(255, 213, 80, 0.25) 35%, transparent 70%);
    opacity: 0;
    mix-blend-mode: screen;
}

.fx-winflash.burst {
    animation: winFlash 0.7s ease-out;
}

@keyframes winFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

.shake {
    animation: stageShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes stageShake {
    10%, 90% { transform: translate(-1px, 0) scale(var(--scale, 1)); }
    20%, 80% { transform: translate(2px, -1px) scale(var(--scale, 1)); }
    30%, 50%, 70% { transform: translate(-3px, 1px) scale(var(--scale, 1)); }
    40%, 60% { transform: translate(3px, 1px) scale(var(--scale, 1)); }
}

/* --- Sound toggle button --- */
.sound-toggle {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 46px;
    height: 46px;
    z-index: 11;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(36, 6, 56, 0.55);
    border: 1.5px solid rgba(199, 138, 255, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(161, 1, 253, 0.25);
    transition: transform 0.18s ease, filter 0.18s ease;
}

.sound-toggle:hover { transform: scale(1.08); }
.sound-toggle:active { transform: scale(0.94); }

.sound-toggle svg {
    width: 24px;
    height: 24px;
    fill: #ffe79a;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.sound-toggle .icon-off { display: none; }
.sound-toggle.muted .icon-on { display: none; }
.sound-toggle.muted .icon-off { display: block; }

/* --- Forked lightning bolts (matches the promo videos) --- */
.fx-bolt {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}
.fx-bolt svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-bolt .glow { fill: none; stroke: #b673ff; stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; filter: blur(7px); }
.fx-bolt .core { fill: none; stroke: #eaf3ff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 7px #cfe6ff) drop-shadow(0 0 14px #9d6bff); }

.fx-bolt.strike { animation: boltStrike 0.55s ease-out; }

@keyframes boltStrike {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    18%  { opacity: 0.12; }
    28%  { opacity: 0.9; }
    44%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-rays,
    .spark,
    .btn-shine::after {
        animation: none;
    }
    .fx-sparkles,
    .fx-lightning,
    .fx-bolt { display: none; }
}