/* Additional custom styles for Joke.llc */

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 20px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Neon accent utilities */
.neon-cyan {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.neon-purple {
    box-shadow: 0 0 15px rgba(192, 38, 255, 0.5);
}

/* Joke item styling */
.joke-text {
    font-size: 15.5px;
    line-height: 1.45;
    color: #e4e4e7;
}

/* Category badge */
.category-badge {
    font-size: 10px;
    letter-spacing: 1.5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 9999px;
}

/* Form focus states */
#joke-form textarea:focus,
#joke-form input:focus,
#joke-form select:focus {
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1);
}

/* Subtle background pattern for hero */
.joker-bg {
    background-image: 
        radial-gradient(circle at 20% 25%, rgba(192, 38, 255, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(0, 240, 255, 0.05) 0%, transparent 45%);
}