body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Base emoji styles */
.emoji-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: white;
    transform-origin: center;
}

.emoji-btn:active {
    transform: scale(0.92);
}

.emoji-btn.sangat-puas .emoji-icon {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.emoji-btn.puas .emoji-icon {
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.emoji-btn.kurang-puas .emoji-icon {
    text-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
}

.emoji-btn.tidak-puas .emoji-icon {
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

/* Selected state animation */
.emoji-btn.selected {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.emoji-btn.sangat-puas.selected {
    border: 4px solid #3b82f6;
}

.emoji-btn.puas.selected {
    border: 4px solid #22c55e;
}

.emoji-btn.kurang-puas.selected {
    border: 4px solid #eab308;
}

.emoji-btn.tidak-puas.selected {
    border: 4px solid #ef4444;
}

/* Thank you overlay animation */
#thank-you-overlay {
    backdrop-filter: blur(10px);
    transition: opacity 0.5s ease-in-out;
}

#thank-you-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#thank-you-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.thank-you-card {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.8) translateY(20px);
}

#thank-you-overlay:not(.hidden) .thank-you-card {
    transform: scale(1) translateY(0);
}

/* ====== Carousel Styles ====== */
.carousel-viewport {
    position: relative;
}

.carousel-slide {
    transition: opacity 10s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-dot.active {
    background-color: white;
    transform: scale(1.4);
}

.carousel-dot:not(.active) {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Carousel screen fade-out */
#carousel-screen {
    transition: opacity 2s ease-in-out;
}

#carousel-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}