/* Custom styles for the Inter font and general body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #333;
}

/* Games Remaining Counter Colors */
.games-remaining.yellow { color: #F59E0B; } /* text-yellow-500 */
.games-remaining.orange { color: #EA580C; } /* text-orange-600 */
.games-remaining.red { color: #EF4444; }    /* text-red-500 */


.screen-container {
    padding: 1rem;
}

/* Theme-specific styles */
body.theme-night { background-color: #1a202c; color: #e2e8f0; }
body.theme-futuristic { background-color: #0d1a26; color: #00e6e6; }
body.theme-pastel { background-color: #fce4ec; color: #6a0572; }

/* Home Screen Logo */
#homeScreen {
    background-image: url('Textures/itsjusttrivia.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
}

/* Modal Overlay & Content */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1010; /* Increased z-index to be on top of sidebar */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.show { opacity: 1; visibility: visible; }

.modal-content {
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    text-align: center;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    color: #333;
    min-height: 480px; /* Default min-height */
    display: flex;
    flex-direction: column;
}
/* Smaller Round Over modal */
#finalScoreModal .modal-content, #h2hFinalScoreModal .modal-content, #accountModal .modal-content, #challengeSetupModal .modal-content, #resetPasswordModal .modal-content, #dailyChallengesModal .modal-content {
    min-height: auto;
}
#accountModal .modal-content, #dailyChallengesModal .modal-content {
    min-height: 520px;
}


.modal-overlay.show .modal-content { transform: translateY(0); opacity: 1; }

/* Theme-specific modal adjustments */
body.theme-night .modal-content { background-color: #2d3748; color: #e2e8f0; }
body.theme-futuristic .modal-content { background-color: #1a2a3a; color: #00e6e6; border: 1px solid #00e6e6; }
body.theme-pastel .modal-content { background-color: #ffebee; color: #6a0572; }

/* Countdown Bar */
.countdown-bar {
    position: absolute;
    top: 0; left: 0; height: 8px;
    background-color: #4CAF50;
    width: 100%;
    border-top-left-radius: 15px; border-top-right-radius: 15px;
}
/* Specific timer transitions */
#countdownBar { transition: width 15s linear; }
#partyCountdownBar { transition: width 12s linear; }


/* Sidebar & Hamburger Menu */
.sidebar {
    position: fixed;
    top: 0; left: 0; height: 100%; width: 250px;
    background-color: #1a202c;
    color: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* This is important for the mt-auto on the shop link */
}
.sidebar.show-sidebar { transform: translateX(0); }

.hamburger-menu {
    position: fixed;
    top: 20px; left: 20px; z-index: 1002;
    cursor: pointer;
    display: flex; flex-direction: column;
    justify-content: space-between;
    width: 30px; height: 24px;
    transition: all 0.3s ease, left 0.3s ease;
}
.hamburger-menu .line {
    width: 100%; height: 4px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}
body.theme-night .hamburger-menu .line,
body.theme-futuristic .hamburger-menu .line,
body.theme-pastel .hamburger-menu .line { background-color: currentColor; }
.hamburger-menu.open .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger-menu.open .line:nth-child(2) { opacity: 0; }
.hamburger-menu.open .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Sidebar Button Styling */
#sidebar ul {
    list-style: none;
    padding: 0;
    width: 100%;
}
#sidebar ul a {
    display: block;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.25rem; /* Larger font */
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
#sidebar ul a:hover {
    transform: scale(1.05);
}

#sidebar li:nth-child(1) a { background-color: #4B5563; } /* Gray for Home */
#sidebar li:nth-child(1) a:hover { background-color: #374151; }
#sidebar li:nth-child(2) a { background-color: #10B981; } /* Green for Solo */
#sidebar li:nth-child(2) a:hover { background-color: #16a34a; }
#sidebar li:nth-child(3) a { background-color: #3B82F6; } /* Blue for H2H */
#sidebar li:nth-child(3) a:hover { background-color: #2563eb; }
#sidebar li:nth-child(4) a { background-color: #A855F7; } /* Purple for Party */
#sidebar li:nth-child(4) a:hover { background-color: #9333ea; }
#sidebar li:nth-child(5) a { background-color: #6366f1; } /* Indigo for Daily */
#sidebar li:nth-child(5) a:hover { background-color: #4f46e5; }
#sidebar li:nth-child(6) a { background-color: #F59E0B; } /* Yellow */
#sidebar li:nth-child(6) a:hover { background-color: #d97706; }
#sidebar li:nth-child(7) a { background-color: #EF4444; } /* Red */
#sidebar li:nth-child(7) a:hover { background-color: #dc2626; }
#sidebar li:nth-child(8) a { background-color: #8B5CF6; } /* Purple */
#sidebar li:nth-child(8) a:hover { background-color: #7c3aed; }


/* Question Card Tags */
#questionCategoryDisplay {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.05);
}
#questionDifficultyDisplay { 
    position: absolute;
    top: 15px;
    right: 15px; 
    text-align: right; 
}
.difficulty-tag, .h2h-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.h2h-tag {
    background-color: #e2e8f0;
    color: #4a5568;
}
body.theme-night .h2h-tag {
    background-color: #4a5568;
    color: #e2e8f0;
}
body.theme-night #questionCategoryDisplay { 
    color: #a0aec0; background-color: rgba(255,255,255,0.1); 
}

/* Difficulty Tag Colors */
.difficulty-fundamentals { color: #10B981; border: 1px solid #10B981; }
.difficulty-headScratchers { color: #F59E0B; border: 1px solid #F59E0B; }
.difficulty-outrageous { color: #EF4444; border: 1px solid #EF4444; }
.difficulty-aBitOfEverything { color: #8B5CF6; border: 1px solid #8B5CF6; }

/* Start game button dynamic styling */
#startGameBtn.ready {
    background-color: #10B981;
    box-shadow: 0 0 15px 3px rgba(16, 185, 129, 0.6);
}

/* Highlight for selected difficulty button on desktop */
.difficulty-btn.is-selected {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5);
}

/* Modal Close Button (X) */
.close-modal-btn {
    position: absolute;
    top: 15px; right: 15px;
    background: none; border: none;
    font-size: 1.5rem; font-weight: bold;
    color: #9CA3AF; cursor: pointer;
}

/* Category Carousel Styling */
.category-carousel {
    cursor: grab;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 50px;
    margin-top: 1rem;
}
.category-carousel.is-dragging { cursor: grabbing; }
.carousel-track {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.carousel-item {
    flex-shrink: 0;
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    user-select: none;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0.5;
    transform: scale(0.8);
}
.carousel-item.active {
    opacity: 1;
    transform: scale(1.1);
    color: #2563eb;
}
body.theme-night .carousel-item.active { color: #60a5fa; }

/* Static buffer for message box */
#messageBoxContainer {
    height: 3rem; /* Reserve space for message */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Difficulty Selection Styles */
@media (max-width: 768px) {
    #difficultySelection {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        transition: all 0.3s ease-in-out;
    }
    .difficulty-btn {
        height: 100px; /* Make them square-ish */
    }
    .difficulty-btn.is-selected {
        box-shadow: none; /* Remove desktop highlight on mobile */
    }
    
    /* State when a difficulty is chosen on mobile */
    #gameSetupScreen.difficulty-chosen #difficultySelection {
        grid-template-columns: 1fr; /* Single column */
        height: auto;
    }
    #gameSetupScreen.difficulty-chosen .difficulty-btn:not(.is-selected) {
        display: none;
    }
    #gameSetupScreen.difficulty-chosen .difficulty-btn.is-selected {
        height: auto; /* Back to normal height */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    /* H2H Score position fix on mobile */
    #triviaModal .modal-content {
        justify-content: flex-start;
    }
    #h2hScoreContainer {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        order: -1; /* Move to top of flex container */
        margin-bottom: 1rem;
        justify-content: center;
    }
}

@keyframes tada {
    from { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    to { transform: scale3d(1, 1, 1); }
}
.tada-animation {
    animation: tada 1s ease-in-out;
}

/* Tab styling for Modals */
.tab-button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}
.tab-button.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    font-weight: 600;
}
body.theme-night .tab-button.active {
    border-bottom-color: #60a5fa;
    color: #60a5fa;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* H2H Score Display */
#h2hScoreContainer {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    background-color: rgba(0,0,0,0.05);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 600;
}
body.theme-night #h2hScoreContainer {
    background-color: rgba(255,255,255,0.1);
}

/* Challenge Toast Notification */
#challengeToast {
    position: fixed;
    bottom: -100px; /* Start off-screen */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d3748;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 2000;
    transition: bottom 0.5s ease-in-out;
}
#challengeToast.show {
    bottom: 20px;
}
#challengeToast button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    border: none;
    cursor: pointer;
}

/* Daily Challenge Progress Bar */
.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 9999px;
    height: 1.25rem;
    position: relative;
    overflow: hidden;
}
.progress-bar {
    background-color: #4ade80; /* Green */
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14532d; /* Dark green text */
    font-weight: 600;
    font-size: 0.75rem;
}
.challenge-item.completed .progress-bar {
    background-color: #facc15; /* Yellow for completed */
    color: #713f12; /* Dark yellow text */
}
.challenge-description {
    color: #111827; /* Dark gray for readability */
}

/* Party Play Styles */
.game-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
}

.category-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.category-header {
    color: white;
    padding: 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    height: 60px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-card {
    width: 100%;
    height: 80px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
    background-color: transparent;
}

.question-card img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain */
    border-radius: 0.5rem;
}

.question-card:hover {
    transform: scale(1.05);
}

.question-card.answered {
    cursor: not-allowed;
    opacity: 0.5;
}

.player-score-box {
    color: white; /* Ensure text is white */
}

@keyframes glowing {
    0% { box-shadow: 0 0 5px #2dd4bf, 0 0 10px #2dd4bf, 0 0 15px #2dd4bf; }
    50% { box-shadow: 0 0 20px #2dd4bf, 0 0 30px #2dd4bf, 0 0 40px #2dd4bf; }
    100% { box-shadow: 0 0 5px #2dd4bf, 0 0 10px #2dd4bf, 0 0 15px #2dd4bf; }
}

.glowing-turn {
    animation: glowing 1.5s infinite;
    border-radius: 8px;
    padding: 4px 8px;
    background-color: #0d9488;
    color: white !important;
}

.party-announcement-box {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    z-index: 2000;
    transition: bottom 0.5s ease-in-out;
}

.party-announcement-box.show {
    bottom: 20px;
}

/* Party Play Answer Feedback */
.party-answer-btn.selected {
    background-color: #10B981 !important;
    color: white !important;
    box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.7);
}
.party-answer-btn.incorrect {
    background-color: #EF4444 !important;
    color: white !important;
}
.correct-answer-text {
    font-size: 1.1rem;
    font-weight: bold;
}
.correct-answer-text.long {
    font-size: 0.9rem;
}

.buy-me-a-coffee {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.buy-me-a-coffee img {
    width: 200px;
    height: auto;
}

#partyRankings p {
    font-weight: bold;
}

.create-account-link {
    font-size: 0.8rem;
    font-weight: normal;
    text-decoration: underline;
    color: #60a5fa;
    margin-left: 8px;
}

/* Donation Link Styles */
#donationLink {
    text-decoration: none;
    font-weight: 600;
    color: #3B82F6; /* Blue */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#donationLink:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

body.theme-night #donationLink {
    background-color: #2d3748;
    color: #60a5fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}