:root {
    --wave-gradient: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255, 180, 0, 0.35) 35%,
      rgba(255, 235, 120, 0.95) 50%,
      rgba(255, 215, 0, 0.85) 65%,
      transparent 80%
    );
    --border-glow-color: rgba(255, 215, 0, 0.9);
    --border-inner-glow: rgba(255, 235, 120, 0.8);
    --sparkle-color: #ffea79;
    --anim-duration: 2.5s;
}

.glass-panel {
    background: rgba(18, 20, 29, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.gradient-title {
    background: linear-gradient(135deg, #fff2a3 0%, #ffd700 50%, #ff9800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stage-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height:407px;
    aspect-ratio: 16 / 9;
    border-radius: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.puzzle-image {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.stage-container.active .puzzle-image {
    transform: scale(1.015);
}

.puzzle-grid {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.25) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.25) 1px, transparent 1px);
    background-size: 25% 33.333%;
    pointer-events: none;
    z-index: 2;
}

.glow-sweep {
    position: absolute;
    top: 0;
    left: -70%;
    width: 120%;
    height: 100%;
    background: var(--wave-gradient);
    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

@keyframes waveSweep {
    0% {
        left: -70%;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    88% {
        opacity: 1;
    }
    100% {
        left: 110%;
        opacity: 0;
    }
}

.stage-container.active-wave .glow-sweep {
    animation: waveSweep var(--anim-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0px transparent;
        border-color: #2a2d3d;
    }
    40% {
        box-shadow: 0 0 45px var(--border-glow-color), inset 0 0 25px var(--border-inner-glow);
        border-color: #ffffff;
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.25);
        border-color: #3b3f54;
    }
}

.stage-container.active-border {
    animation: borderGlow var(--anim-duration) ease-in-out forwards;
}

@keyframes sparkleAnim {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    45% {
        transform: translate(-50%, -50%) scale(1.4) rotate(90deg);
        opacity: 1;
        filter: drop-shadow(0 0 12px var(--sparkle-color)) drop-shadow(0 0 22px rgba(255, 215, 0, 0.9));
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(180deg);
        opacity: 0;
    }
}

.sparkle {
    position: absolute;
    width: 22px;
    height: 22px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.sparkle svg {
    width: 100%;
    height: 100%;
    fill: var(--sparkle-color);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.stage-container.active-stars .sparkle.play {
    animation: sparkleAnim calc(var(--anim-duration) * 0.35) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffd700;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.btn-glow {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(30deg) translateY(-100%);
    transition: transform 0.6s ease;
}

.btn-glow:hover::after {
    transform: rotate(30deg) translateY(100%);
}

/* Click Burst Particle styling */
.click-sparkle {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    animation: clickSparkleFade 0.8s ease-out forwards;
}

@keyframes clickSparkleFade {
    0% {
        transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(60deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(120deg);
        opacity: 0;
    }
}