.challenge-text,.hero,body{text-align:center}#particles-js,body{background-color:var(--bg-dark)}.logo,.subtitle{letter-spacing:1px}#countdown,.logo,.section h2{font-family:var(--font-title)}:root{--bg-dark:#232946;--bg-light:#fdf0f0;--primary-pastel:#eea5a5;--secondary-pastel:#b8c1ec;--accent-pastel:#fde28f;--text-dark:#232946;--text-light:#ffffff;--font-title:'Orbitron',sans-serif;--font-body:'Poppins',sans-serif;--bg-lineup:#fde28f;--bg-gallery:#b8c1ec;--bg-info:#eea5a5}#challenges-mural,#gallery{background-color:var(--bg-gallery)}.main-container{width:100%;max-width:1200px;margin:0 auto}.artist-image{object-fit:contain;width:100%}.card-front h4{font-size:1.2rem;font-weight:700}.unlock-time{font-size:.9rem;color:#666;margin-top:.5rem;font-weight:600}.file-upload-label.dragover,.file-upload-label:hover{background-color:#eef2ff;border-color:var(--primary-pastel)}.file-upload-label i{font-size:2rem;color:var(--secondary-pastel);margin-bottom:.5rem}.section h2,body{color:var(--text-dark)}.comment-name,.file-upload-label span{font-weight:600;color:var(--text-dark)}.hero,.logo{color:var(--text-light);position:relative}#comment-image,#event-form input[type=file],.file-upload-input{display:none}.challenge-card.completed .card-back{background-color:#d4edda}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);overflow-x:hidden}.main-container{width:100%;max-width:1200px;margin:0 auto}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero{min-height:70vh;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem}#particles-js{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background-image:linear-gradient(135deg,var(--secondary-pastel) 0,var(--primary-pastel) 100%)}.hero-content{z-index:10;animation:1s ease-out fadeIn;width:100%;padding-top:5vh}.hero-logo{max-width:150px;height:auto;margin-bottom:10px;animation:1s ease-out .5s backwards fadeIn;display:block;margin-left:auto;marg... 
#result-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1001;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}.result-overlay.visible{opacity:1;visibility:visible}.result-content{background:var(--bg-dark);padding:3rem;border-radius:20px;text-align:center;color:var(--text-light);transform:scale(.8);transition:transform .5s}.result-overlay.visible .result-content{transform:scale(1)}.winner-name{font-size:2.5rem;color:var(--accent-pastel);margin-top:1rem;font-weight:700}.option-btn-progress {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
}

.voting-ended .option-btn-progress{cursor:default}.voting-ended .option-btn-progress:hover{transform:none;box-shadow:none}.custom-file-input-button{display:inline-block;padding:10px 15px;background-color:var(--secondary-pastel);border-radius:8px;cursor:pointer;transition:background-color .3s;font-weight:600;color:var(--text-dark)}.file-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #ccc;border-radius:10px;padding:2rem;cursor:pointer;transition:background-color .2s,border-color .2s}.file-upload-label span{font-size:1rem}.file-upload-label.dragover,.file-upload-label:hover{background-color:#eef2ff;border-color:var(--primary-pastel)}.file-upload-label i{font-size:2rem;color:var(--secondary-pastel);margin-bottom:.5rem}.challenge-card{perspective:1000px}.challenge-card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.challenge-card.flipped .challenge-card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:15px;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.card-front{background-color:#fff;border:1px solid #eee}.... 

/* Button Styles */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-join, .btn-create {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 50px; /* Rounded buttons */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: white;
    text-decoration: none;
    display: inline-block;
}

.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.btn-primary {
    background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
}

.btn-secondary {
    background: linear-gradient(45deg, #f83600 0%, #f9d423 100%);
    color: var(--text-dark);
}

.btn-danger {
    background: linear-gradient(45deg, #d32f2f 0%, #ef5350 100%);
}

.btn-success {
    background: linear-gradient(45deg, #43a047 0%, #66bb6a 100%);
}

/* Toast Notification Styles */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    border-radius: 50px;
    background-color: #333;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translate(-50%, 100px);
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.success {
    background-color: #2ecc71;
}

.toast.error {
    background-color: #e74c3c;
}

/* Full screen for horse race */
body.horse-race-active,
body.horse-race-active html {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide scrollbars */
}

body.horse-race-active .main-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.horse-race-active #game-voting {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.horse-race-active #game-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive styles for voting options */
.options-grid {
    display: flex;
    flex-direction: column; /* Default to column layout */
    gap: 10px; /* Spacing between options */
    width: 100%; /* Ensure it takes full width */
    max-width: 600px; /* Limit width on larger screens */
    margin: 0 auto; /* Center it */
}

.options-grid.two-column-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 10px; /* Spacing between options */
}

@media (max-width: 768px) {
    .options-grid.two-column-layout {
        /* This rule already exists, but I'll keep it for clarity */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two equal columns */
        gap: 10px; /* Spacing between options */
    }

    .options-grid.two-column-layout .option-btn-progress {
        /* Adjust padding/margins if needed for smaller size */
        padding: 10px 15px; /* Slightly smaller padding */
        min-height: 50px; /* Slightly smaller min-height */
    }

    .options-grid.two-column-layout .option-btn-progress .option-content {
        font-size: 0.75rem; /* Smaller font */
    }

    .options-grid.two-column-layout .option-btn-progress .vote-percentage {
        font-size: 0.7rem; /* Even smaller for percentage */
    }
}