/* Custom Styles */
        body {
            background-color: #1a1a1a;
            color: #f0f0f0;
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .game-container {
            flex-grow: 1;
            padding-bottom: 120px;
            /* Space for the lifeline */
        }

        .header {
            text-align: center;
            padding: 2rem 1rem;
            background: linear-gradient(135deg, #000000, #1c1c1c);
            border-bottom: 2px solid #ff4141;
            animation: fadeInDown 1s ease-in-out;
            position: relative;
        }

        #mute-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: 1px solid #888;
            color: #888;
            border-radius: 5px;
            width: 40px;
            height: 40px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            color: #ff4141;
            text-shadow: 0 0 10px #ff4141, 0 0 20px #ff4141;
        }

        #timer {
            font-family: 'Orbitron', sans-serif;
            font-size: 3.5rem;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 4px;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff4141;
            animation: pulse 2s infinite;
        }

        /* Custom styles for the lifeline and merged footer */
        .lifeline-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            /* Remove a fixed height to allow content to determine size */
            /* height: 100px; */
            background-color: #000;
            border-top: 1px solid #333;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            /* Use column direction to stack canvas and footer */
            align-items: center;
            justify-content: center;
        }

        #lifeline {
            width: 100%;
            height: 80px;
        }

        /* New CSS for the footer to make it blend with the lifeline container */
        .lifeline-container footer {
            width: 100%;
        }

        .lifeline-container .custom-footer-bg {
            /* Remove padding, shadow, and rounded corners */
            padding: 0;
            box-shadow: none;
            border-radius: 0;

            /* Set background to transparent to inherit the parent's color */
            background-color: transparent;
        }

        footer {
            border-top: 2px solid #ff4141;
        }

        .legal-text {
            color: white ! important;
        }

        .activity-card {
            background-color: #2c2c2c;
            border: 1px solid #444;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
            animation: fadeInUp 0.5s ease-in-out forwards;
            opacity: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .activity-card.clickable {
            cursor: pointer;
        }

        .activity-card.clickable:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(255, 65, 65, 0.2);
        }

        .activity-card.disabled {
            background-color: #1e1e1e;
            cursor: not-allowed;
            opacity: 0.6;
            transform: none;
            box-shadow: none;
        }

        .activity-card h3 {
            color: #ff6b6b;
            font-weight: 700;
            font-size: 1.25rem;
        }

        .activity-card p {
            font-size: 0.9rem;
            color: #ccc;
            flex-grow: 1;
        }

        /* Animations */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Modal Styling */
        .modal-content {
            background-color: #1a1a1a;
            border: 2px solid #ff4141;
            border-radius: 15px;
            color: #f0f0f0;
            box-shadow: 0 0 30px rgba(255, 65, 65, 0.5);
        }

        .modal-header,
        .modal-footer {
            border-color: #ff4141;
        }

        .modal-title {
            color: #ff4141;
            font-family: 'Orbitron', sans-serif;
        }

        .modal-body h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            text-align: center;
            color: #ff4141;
            text-shadow: 0 0 15px #ff4141;
            animation: fadeInDown 1s;
        }

        #chosen-activities li {
            background-color: #2c2c2c;
            margin-bottom: 5px;
            padding: 8px;
            border-radius: 5px;
        }

        #time-input-error {
            color: #ffc107;
            font-size: 0.9rem;
            height: 1rem;
            margin-top: 0.5rem;
        }

        /* Custom range slider */
        .form-range::-webkit-slider-thumb {
            background: #ffc107;
        }

        .form-range::-moz-range-thumb {
            background: #ffc107;
        }

        .form-range::-ms-thumb {
            background: #ffc107;
        }

        .time-input-group input {
            background-color: #333;
            border: 1px solid #555;
            color: #fff;
            text-align: center;
            width: 100px;
        }

        .time-input-group label {
            width: 80px;
            text-align: center;
        }

        /* Responsive adjustments */
        @media (max-width: 767.98px) {
            .header h1 {
                font-size: 1.8rem;
            }

            #timer {
                font-size: 2.5rem;
                letter-spacing: 2px;
            }

            .activity-card h3 {
                font-size: 1rem;
            }

            .activity-card p {
                font-size: 0.8rem;
            }

            .modal-body h2 {
                font-size: 2.5rem;
            }

            .time-input-group label,
            .time-input-group input {
                width: 70px;
            }
        }

        @media (min-width: 992px) {
            .activity-card h3 {
                font-size: 1.5rem;
            }

            .activity-card p {
                font-size: 1rem;
            }
        }

        @media (min-width: 1200px) {
            .activity-card h3 {
                font-size: 1.75rem;
            }

            .activity-card p {
                font-size: 1.1rem;
            }
        }

        .legal-text {
            color: #000000;
        }