/* Base font setup combining Nunito and Noto Sans TC */
body {
    font-family: 'Nunito', 'Noto Sans TC', sans-serif;
}

/* Glassmorphism utility - 3D Crystal Style */
.glass {
    background: rgba(255, 255, 255, 0.35);
    /* More transparent */
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-top: 2px solid rgba(255, 255, 255, 0.9);
    border-left: 2px solid rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Iridescent Shadows */
.shadow-iridescent {
    box-shadow:
        0 8px 32px 0 rgba(180, 150, 255, 0.15),
        inset 0 0 15px rgba(255, 255, 255, 0.5);
}

.shadow-iridescent-hover {
    box-shadow:
        0 15px 45px -5px rgba(255, 160, 200, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.8),
        0 0 15px rgba(150, 200, 255, 0.2);
}

/* Iridescent 3D Button */
.btn-iridescent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 230, 240, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: #f472b6;
    /* rose-400 */
    box-shadow:
        0 4px 15px rgba(255, 180, 220, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 1);
    background-size: 200% auto;
}

.btn-iridescent:hover {
    background-position: right center;
    color: #e879f9;
    /* fuchsia-400 */
    box-shadow:
        0 8px 25px rgba(255, 180, 220, 0.6),
        inset 0 2px 4px rgba(255, 255, 255, 1);
    border-color: #fff;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Base keyframes for animations */
@keyframes fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: var(--fall-opacity, 0.8);
    }

    90% {
        opacity: var(--fall-opacity, 0.8);
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Classes applied from JS */
.falling-item {
    position: fixed;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* Decorative 3D Glass Elements - With Glowing Effect */
.glass-bubble {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    box-shadow:
        inset -2px -2px 6px rgba(150, 200, 255, 0.3),
        inset 2px 2px 6px rgba(255, 255, 255, 0.9),
        0 0 15px rgba(255, 180, 220, 0.8),
        /* Inner pink glow */
        0 0 30px rgba(150, 200, 255, 0.6);
    /* Outer blue glow */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glass-diamond {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow:
        inset 0px 0px 8px rgba(255, 255, 255, 0.8),
        0 0 12px 2px rgba(180, 150, 255, 0.8),
        /* Inner purple glow */
        0 0 25px rgba(255, 200, 255, 0.5);
    /* Outer pink glow */
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

.glass-prism {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7), rgba(255, 192, 203, 0.1), rgba(135, 206, 235, 0.1));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Multiple drop-shadows for a strong glowing aura on clipped elements */
    filter: drop-shadow(0px 0px 8px rgba(200, 180, 255, 0.9)) drop-shadow(0px 0px 20px rgba(135, 206, 235, 0.6));
    position: relative;
}

.glass-prism::after {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: inherit;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.ripple {
    position: fixed;
    border-radius: 50%;
    /* Soft white/pinkish radial gradient */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 192, 203, 0) 70%);
    pointer-events: none;
    animation: ripple 1s ease-out forwards;
    z-index: 50;
    width: 60px;
    height: 60px;
}

body {
    background-image: url('assets/iridescent_bg_original_hd.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

/* Modal Open State */
body.modal-open {
    overflow: hidden;
}