:root {
            --p: #5b21b6;
            --pd: #4c1d95;
            --s: #059669;
            --d: #dc2626;
            --radius: 12px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Hind Siliguri', system-ui, sans-serif;
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
            color: #1e293b;
            min-height: 100vh;
            font-size: 15px;
            /* छोटा बेस फॉन्ट */
            line-height: 1.5;
        }

        body.dark-mode {
            background: #0f172a;
            color: #e2e8f0;
        }

        /* Main Layout */
        .container {
            max-width: 680px;
            margin: 6px auto;
            padding: 0 8px;
        }

        /* Card */
        .screen-card {
            background: #fff;
            border-radius: var(--radius);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
            overflow: hidden;
            margin-bottom: 10px;
        }

        body.dark-mode .screen-card {
            background: #1e293b;
        }

        /* Header */
        .header-gradient {
            background: linear-gradient(135deg, var(--p), #7c3aed);
            color: #fff;
            text-align: center;
            padding: 14px 4px;
            position: relative;
        }

        .header-gradient h1 {
            font-size: 1.5rem;
            margin: 0;
        }

        .header-gradient p {
            font-size: 0.88rem;
            margin-top: 4px;
            opacity: 0.9;
        }

        /* Dark Toggle - Real Icon */
        #darkToggle {
            position: absolute;
            top: 8px;
            right: 10px;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 19px;
            cursor: pointer;
        }

        /* Content */
        .content {
            padding: 14px 12px;
            text-align: center;

        }

        /* Select & Buttons */
        .select-box,
        .btn-primary {
            width: 100%;
            max-width: 380px;
            padding: 10px 12px;
            margin: 7px auto;
            display: block;
            border-radius: 10px;
            font-size: 0.98rem;
            border: 2px solid #e2e8f0;
        }





        .btn-primary {
            background: var(--p);
            color: #fff;
            border: none;
            cursor: pointer;
            font-weight: 600;
            transition: 0.25s;
        }

        .btn-primary:hover {
            background: var(--pd);
            transform: translateY(-2px);
        }

        .btn-danger {
            background: var(--d) !important;
        }

        /* Quiz Header */
        .quiz-header {
            background: #f1f5f9;
            padding: 9px 12px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        body.dark-mode .quiz-header {
            background: #1e293b;
            color: #e2e8f0;
        }

        /* Progress Bar */
        .progress-bar {
            height: 6px;
            background: #e2e8f0;
            border-radius: 6px;
            margin: 8px 12px;
            overflow: hidden;
        }

        body.dark-mode .progress-bar {
            background: #334155;
        }

        #progressFill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--s), #34d399);
            transition: width 0.6s ease;
        }

        /* Question */
        .question {
            font-size: 1.15rem;
            margin: 12px 0;
            font-weight: 500;
            line-height: 1.55;
            text-align: left;
            text-align: justify;
        }

        /* Options */
        .options-grid {
            gap: 12px;
            margin: 12px 0;
        }

        .option {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            padding: 11px 13px;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s;
            text-align: left;
            font-size: 0.96rem;
            margin: .5rem auto;
        }

        .option:hover {
            border-color: var(--p);
            background: #eef2ff;
            transform: translateY(-3px);
        }

        .option.correct {
            background: #d1fae5;
            border-color: var(--s);
            font-weight: bold;
        }

        body.dark-mode .option.correct {
            border-color: #d1fae5;
            background-color: var(--s);
        }

        body.dark-mode .option.wrong {
            border-color: rgb(84, 3, 3);
            background-color: var(--d);
        }

        .option.wrong {
            background: #fee2e2;
            border-color: var(--d);
        }

        .option.disabled {
            pointer-events: none;
            opacity: 0.7;
        }

        body.dark-mode .option {
            background: #334155;
            border-color: #475569;
        }

        body.dark-mode .option:hover {
            background: #475569;
        }

        /* Explanation */
        .explanation-box {
            background: #ecfdf5;
            border-left: 4px solid var(--s);
            padding: 11px 13px;
            margin: 14px 0;
            border-radius: 8px;
            text-align: left;
            font-size: 0.94rem;
            line-height: 1.5;
        }

        body.dark-mode .explanation-box {
            background: #064e3b;
            color: #d1fae5;
        }

        body.dark-mode .result-text,
        .resume-text {
            color: #475569;
        }

        /* Result Circle */
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 12px auto;
            display: grid;
            place-items: center;
            background: conic-gradient(var(--s) 0%, #e2e8f0 0%);
            font-size: 1.7rem;
            font-weight: bold;
            color: #fff;
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
        }

        /* Navigation Buttons */
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            margin: 14px 12px 6px;
            gap: 10px;
            flex-wrap: nowrap;
        }

        /* Hidden Class */
        .hidden {
            display: none !important;
        }

        /* Ultra Responsive */
        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }

            .header-gradient {
                padding: 12px 6px;
            }

            .header-gradient h1 {
                font-size: 1.35rem;
            }

            .content {
                padding: 12px 10px;
            }

            .question {
                font-size: 1.08rem;
                margin: 10px 0;
            }

            .option {
                padding: 10px 12px;
                font-size: 0.94rem;
            }

            .explanation-box {
                padding: 10px 12px;
                font-size: 0.92rem;
            }

            .circle {
                width: 90px;
                height: 90px;
                font-size: 1.5rem;
            }

            .nav-buttons {
                margin: 10px 8px;
            }

            .btn-primary {
                padding: 10px 20px;
                font-size: 0.96rem;
            }

            #darkToggle {
                width: 34px;
                height: 34px;
                font-size: 18px;
            }
        }

        /* प्रश्न के नीचे इमेज के लिए कंटेनर */
        #questionImage {
            text-align: center;
            /* इमेज को हॉरिजॉन्टल सेंटर में रखता है */
            margin: 20px 0;
            /* ऊपर-नीचे स्पेस */
            padding: 10px;
        }

        /* असली इमेज का स्टाइल */
        #imgDisplay {
            max-width: 90%;
            /* स्क्रीन के 90% से ज़्यादा चौड़ा नहीं होगा */
            height: auto;
            /* अनुपात सही रहेगा */
            height: 150px;
            /* बहुत बड़ी इमेज को कंट्रोल करता है */
            border-radius: 12px;
            /* गोल कोने */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            /* सुंदर शैडो */
            border: 3px solid #e2e8f0;
            /* हल्की बॉर्डर */
            display: block;
            /* सेंटर के लिए ज़रूरी */
            margin: 0 auto;
            /* परफेक्ट सेंटर (block एलिमेंट के लिए) */
            object-fit: contain;
            /* इमेज कटेगी नहीं, पूरा दिखेगा */
            background-color: #f8fafc;
            /* लोडिंग के समय बैकग्राउंड */
            transition: all 0.3s ease;
            /* स्मूथ लोडिंग इफ़ेक्ट */
        }

        /* अगर इमेज नहीं मिली तो अच्छा मैसेज दिखे */
        #imgDisplay:not([src]),
        #imgDisplay[src=""] {
            display: none !important;
        }


        .social-media-app {
            transition: opacity 1s ease;
        }

        .hide-section {
            opacity: 0;
            pointer-events: none;
        }


        /* Music Toggle Button - Next to Dark Mode */
        #musicToggle {
            position: absolute;
            top: 8px;
            right: 54px;
            /* darkToggle के बगल में */
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 18px;
            cursor: pointer;
            z-index: 10;
        }

        @media (max-width: 480px) {
            #musicToggle {
                width: 34px;
                height: 34px;
                font-size: 17px;
                right: 50px;
            }
        }



        /* #performanceMsg {
            font-size: 2.2rem !important;
            font-weight: 700 !important;
            margin: 20px 0 !important;
            text-align: center !important;
            line-height: 1.2 !important;
            font-family: 'Hind Siliguri', sans-serif !important;
        }

        /* अलग-अलग स्कोर के लिए कलर */
        /* #performanceMsg::before {
            content: '';
            display: block;
            height: 8px;
            width: 60px;
            background: linear-gradient(90deg, #10b981, #34d399);
            margin: 0 auto 15px;
            border-radius: 4px;
        }

        body.dark-mode #performanceMsg {
            color: #34d399 !important;
        }  */