/* Custom styles for the face fortune app */
body {
    font-family: 'Noto Sans KR', sans-serif;
}

.action-btn {
    @apply px-8 py-4 rounded-full font-bold text-white transition-all duration-200 text-center shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.promo-btn {
    @apply px-8 py-4 rounded-full font-bold transition-all duration-200 text-center block shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

#snackbar {
    transform: translateX(-50%) translateY(100px);
    transition: all 0.3s ease-in-out;
}

#snackbar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1 !important;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-text {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Result section styling */
#detailed-result {
    max-height: 400px;
    overflow-y: auto;
}

#detailed-result::-webkit-scrollbar {
    width: 6px;
}

#detailed-result::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.3);
    border-radius: 3px;
}

#detailed-result::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

#detailed-result::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* Canvas styling */
#result-canvas {
    max-width: 100%;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .action-btn {
        @apply text-sm px-4 py-2;
    }
    
    .promo-btn {
        @apply text-sm px-6 py-3;
    }
}