body {
    margin: 0;
    padding: 0;
    background-image: url('/wp-content/themes/astra-child/images/back1.jpg') !important; 
    background-size: cover; /* Resize image to cover the entire screen */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    background-attachment: fixed; /* Optional: Keep image fixed while scrolling */
    min-height: 100vh; /* Ensure full vertical coverage */
  }


/* Dark Mode Container Styling */
#quiz-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(26, 26, 26, 0.9); /* Slightly less transparent */
    backdrop-filter: blur(10px); /* Apply blur effect */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    font-family: 'Poppins', Arial, sans-serif;
    text-align: center;
    color: #f5f5f5; /* Light text for contrast */
}

/* Canvas Styling */
#canvas {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #0397AB
    ; /* Elegant golden border */
}

/* Input Field Styling */
#answer {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #333;
    border-radius: 8px;
    font-size: 16px;
    background-color: #2a2a2a; /* Dark input background */
    color: #f5f5f5; /* Light text */
    transition: border-color 0.3s, background-color 0.3s;
}

#answer:focus {
    border-color: #C89B3C; /* Highlight border */
    outline: none;
    background-color: #333; /* Slightly lighter background on focus */
}

/* Button Styling */
button {
    padding: 12px 20px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    color: #f5f5f5; /* Light text */
}

#submit-answer {
    background-color: #007BFF; /* Blue button */
}

#submit-answer:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

#next-question {
    background-color: #28a745; /* Green button */
}

#next-question:hover {
    background-color: #218838; /* Darker green on hover */
}

#show-answer {
    background-color: #ffc107; /* Yellow button */
    color: #212529; /* Dark text for contrast */
}

#show-answer:hover {
    background-color: #e0a800; /* Darker yellow on hover */
}

#skip-question {
    background-color: #6c757d; /* Gray button */
}

#skip-question:hover {
    background-color: #5a6268; /* Darker gray on hover */
}

button:active {
    transform: scale(0.98); /* Subtle press effect */
}

/* Next Button Styling */
#next-button {
    background-color: #28a745; /* Green button */
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 0 10px #28a745, 0 0 20px #28a745; /* Glowing effect */
    animation: pulse 1.5s infinite; /* Pulsing animation */
}

#next-button:hover {
    background-color: #218838; /* Darker green on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 0 15px #28a745, 0 0 30px #28a745; /* Intensify glow on hover */
}

#next-button:disabled {
    background-color: #6c757d; /* Gray for disabled state */
    color: #ccc;
    cursor: not-allowed;
    box-shadow: none; /* Remove glow when disabled */
    animation: none; /* Stop pulsing animation when disabled */
}

/* Pulsing Animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px #28a745, 0 0 20px #28a745;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 15px #28a745, 0 0 25px #28a745;
    }
}

/* Feedback Message Styling */
#feedback {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
}

/* Correct Answer Feedback */
.correct {
    color: #28a745; /* Green for correct */
}

/* Incorrect Answer Feedback */
.incorrect {
    color: #dc3545; /* Red for incorrect */
}

/* Autocomplete Dropdown Styling */
#autocomplete-container {
    background-color: #1a1a1a !important; /* Dark dropdown background */
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    color: #f5f5f5; /* Light text */
    position: absolute;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 0; /* Add padding for spacing */
}

#autocomplete-container div {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    background-color: #1a1a1a; /* Dark background by default */
    transition: background-color 0.3s, color 0.3s;
}

#autocomplete-container div:hover {
    background-color: #C89B3C !important; /* Ensure hover background is applied */
    color: #1a1a1a !important; /* Ensure text color changes on hover */
}

#autocomplete-container img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #444; /* Subtle border around images */
}

/* Progress Bar Container */
#progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #2a2a2a; /* Dark background for contrast */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

/* Progress Bar Fill */
#progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #0397AB, #0397AB); /* Initial gradient */
    transition: width 0.1s linear, background 0.3s ease-in-out; /* Smooth and continuous animation */
    border-radius: 4px;
}

/* Container for score and question index */
#score-container {
    display: flex;
    justify-content: space-between; /* Space between score and question index */
    align-items: center; /* Align items vertically */
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: #2a2a2a; /* Dark background for contrast */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    font-family: 'Poppins', Arial, sans-serif;
}

/* Styling for score display */
#score-display {
    font-size: 20px;
    font-weight: bold;
    color: #4CAF50; /* Modern green color for positivity */
    background: linear-gradient(90deg, #4CAF50, #8BC34A); /* Gradient for a modern look */
    background-clip: text; /* Standard property for compatibility */
    -webkit-background-clip: text; /* Clip the gradient to the text */
    -webkit-text-fill-color: transparent; /* Make the background gradient visible */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Styling for question index display */
#question-index-display {
    font-size: 18px;
    font-weight: bold;
    color: #f5f5f5; /* Light text for contrast */
}

/* Time Expired Banner */
#time-expired-banner {
    animation: fade-in-out 3s ease-in-out;
    background-color: rgba(255, 0, 0, 0.8); /* Red with transparency */
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Correct Answer Banner */
#correct-answer-banner {
    animation: pop-in-out 3s ease-in-out;
}

@keyframes pop-in-out {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    90% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

/* Confetti Animation */
@keyframes fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

@keyframes fly-in {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    100% {
        transform: translateX(calc(100vw - 50%)) translateY(calc(100vh - 50%)) rotate(720deg);
    }
}

@keyframes throw-up {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) rotate(180deg); /* Mid-screen */
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg); /* Off-screen */
        opacity: 0;
    }
}

/* Emoji Confetti Styling */
.emoji-confetti {
    animation: throw-up 3s ease-out;
    font-size: 28px;
    will-change: transform, opacity;
}

/* Bonus Question Options Container */
#bonus-options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two buttons per row */
    gap: 15px; /* Spacing between buttons */
    margin-top: 15px;
}

/* Bonus Question Option Buttons */
.bonus-option-button {
    background-color: #2a2a2a; /* Dark background */
    color: #f5f5f5; /* Light text */
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
    border: 2px solid #333; /* Subtle border */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.bonus-option-button:hover {
    background-color: #0397AB; /* Highlight color on hover */
    color: #fff; /* Bright text on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Intensify shadow on hover */
}

.bonus-option-button:active {
    transform: scale(0.98); /* Subtle press effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Reduce shadow on press */
}

/* Username Interface Styling */
#username-interface {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(26, 26, 26, 0.9) !important; /* Slightly less transparent */
    backdrop-filter: blur(10px) !important; /* Apply blur effect */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    font-family: 'Poppins', Arial, sans-serif;
    text-align: center;
    color: #f5f5f5; /* Light text for contrast */
}


@media (max-width: 600px) {
  #username-interface {
    max-width: none;      /* remove the 400px cap */
    width: 90vw;          /* fill 90% of the viewport width */
    padding: 30px 20px;   /* optionally adjust padding for comfort */
  }
}

/* Username Input Hover Effect */
#username {
    transition: box-shadow 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
}

#username:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 10px #0397AB; /* Subtle glow effect */
    transform: scale(1.02); /* Slightly enlarge on hover */
}

/* Start Quiz Button Hover Effect */
#start-quiz {
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

#start-quiz:hover {
    background-color: #027a92; /* Slightly darker blue on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 15px #0397AB; /* Glow effect */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Sharing and action buttons */
.share-button, .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.share-button i, .action-button i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.share-button:hover, .action-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.share-button:active, .action-button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    #username-interface {
        top: 45% !important /* Move slightly higher for mobile */
    }

    #how-to-play-modal {
        width: 85%; /* Occupy 85% of the screen width */
        height: 60vh; /* Set height to 70% of the screen height */
        max-width: none; /* Remove any max-width constraints */
        padding: 15px; /* Adjust padding for smaller screens */
        overflow-y: auto; /* Make the modal scrollable */
    }
}