/* Neon Dark Mode Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Glow Effects */
.choice-btn:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

#btn-a:hover {
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
}

#btn-b:hover {
    box-shadow: 0 0 30px rgba(255, 0, 122, 0.2);
}

/* Animations */
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100vw); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(100vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-out {
    animation: slideOutLeft 0.5s forwards;
}

.slide-in {
    animation: slideInRight 0.5s forwards;
}

/* Results State */
.voted #btn-a, .voted #btn-b {
    pointer-events: none;
    background: #151515;
}

.voted #percent-a, .voted #percent-b {
    display: block;
}

.voted #bar-a, .voted #bar-b {
    height: 100% !important;
    opacity: 0.1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}