/**
 * My Custom MCQ Quiz - Stylesheet
 * Version: 12.1.10 (Adds Poll Title and Poll Summary styles)
 */

:root {
    /* --- DYNAMIC VARIABLES (Defaults - Overridden by PHP Admin Settings) --- */
    --mcq-q-size: 20px;
    --mcq-opt-size: 16px;
    --mcq-q-size-mob: 18px; /* Mobile fallback */
    --mcq-opt-size-mob: 15px; /* Mobile fallback */
    
    /* Option Box Customization */
    --mcq-opt-pad: 15px; 
    --mcq-opt-radius: 8px;
    --mcq-opt-border-width: 2px;
    
    /* Exam Palette */
    --mcq-palette-size: 40px;

    /* Poll Specific (from current plugin) */
    --poll-font: 'Roboto', sans-serif;
    --poll-fs: 20px;

    /* --- LIGHT MODE PALETTE (From User's preferred file) --- */
    --mcq-bg: #ffffff;
    --mcq-card-bg: #ffffff;
    --mcq-text: #222222;
    --mcq-text-muted: #666666;
    --mcq-border: #dddddd;
    --mcq-accent: #0073aa;
    --mcq-accent-hover: #005a87;
    --mcq-shadow: 0 5px 20px rgba(0,0,0,0.08);
    
    /* Review Colors */
    --mcq-correct-bg: #d4edda;
    --mcq-correct-border: #c3e6cb;
    --mcq-correct-text: #155724;
    --mcq-wrong-bg: #f8d7da;
    --mcq-wrong-border: #f5c6cb;
    --mcq-wrong-text: #721c24;
    --mcq-exp-bg: #e8f4f8;
    --mcq-exp-border: #0073aa;
    
    /* Inputs & Options */
    --mcq-input-bg: #ffffff;
    --mcq-input-border: #cccccc;
    --mcq-opt-bg: #ffffff;
    --mcq-opt-border: #dcdcdc;
    --mcq-opt-hover: #f0f8ff;
    
    /* Exam Mode Sidebar */
    --mcq-sidebar-bg: #f8f9fa;
    --mcq-sidebar-border: #e0e0e0;
    
    /* Palette Buttons */
    --pal-def-grad: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    --pal-def-bor: #cccccc;
    --pal-def-txt: #333333;
    --pal-ans-grad: linear-gradient(to bottom, #6fdc6f 0%, #5cb85c 100%);
    --pal-not-grad: linear-gradient(to bottom, #e57373 0%, #d9534f 100%);
    --pal-rev-grad: linear-gradient(to bottom, #a569bd 0%, #8e44ad 100%);
}

/* --- DARK MODE OVERRIDES --- */
.mcq-dark-mode-active, .mcq-poll-wrapper.dark-mode {
    --mcq-bg: #1a1a1a;
    --mcq-card-bg: #252525;
    --mcq-text: #f0f0f0;
    --mcq-text-muted: #aaaaaa;
    --mcq-border: #444444;
    --mcq-accent: #4fa3d1;
    --mcq-accent-hover: #6eb3db;
    --mcq-shadow: 0 5px 20px rgba(0,0,0,0.6);
    --mcq-correct-bg: #1e4620;
    --mcq-correct-border: #2e7d32;
    --mcq-correct-text: #e8f5e9;
    --mcq-wrong-bg: #5c1e21;
    --mcq-wrong-border: #c62828;
    --mcq-wrong-text: #ffebee;
    --mcq-exp-bg: #263238;
    --mcq-exp-border: #4fa3d1;
    --mcq-input-bg: #2d2d2d;
    --mcq-input-border: #555555;
    --mcq-opt-bg: #2d2d2d;
    --mcq-opt-border: #444444;
    --mcq-opt-hover: #383838;
    --mcq-sidebar-bg: #252525;
    --mcq-sidebar-border: #444444;
    --pal-def-grad: linear-gradient(to bottom, #444444 0%, #333333 100%);
    --pal-def-bor: #555555;
    --pal-def-txt: #ffffff;
    --pal-ans-grad: linear-gradient(to bottom, #388e3c 0%, #2e7d32 100%);
    --pal-not-grad: linear-gradient(to bottom, #d32f2f 0%, #c62828 100%);
    --pal-rev-grad: linear-gradient(to bottom, #7b1fa2 0%, #6a1b9a 100%);
}

/* =========================================
   0. NEW QUIZ START SCREEN & GUEST FORM
   ========================================= */
#mcq-start-screen, #mcq-guest-details-end {
    text-align: center;
    padding: 40px 20px;
}
#mcq-start-screen h2, #mcq-guest-details-end h3 {
    margin-top: 0;
    font-size: 2em;
}
.mcq-start-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0 30px;
    font-size: 1.1em;
    color: var(--mcq-text-muted);
}
.mcq-start-info span {
    background: var(--mcq-opt-hover);
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid var(--mcq-border);
}
.mcq-dark-mode-active .mcq-start-info span {
    background: var(--mcq-opt-bg);
}
#mcq-guest-details-end p {
    margin-bottom: 15px;
}
#mcq-guest-details-end label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
#mcq-guest-details-end input[type="text"],
#mcq-guest-details-end input[type="email"],
#mcq-guest-details-end input[type="tel"] {
    width: 100%;
    max-width: 350px;
    padding: 10px;
    border: 1px solid var(--mcq-input-border);
    border-radius: 4px;
    background: var(--mcq-input-bg);
    color: var(--mcq-text);
}


/* =========================================
   1. QUIZ STYLING
   ========================================= */
.mcq-quiz-container { 
    width: 100%; margin: 20px 0; border: 1px solid var(--mcq-border); 
    border-radius: 8px; background-color: var(--mcq-bg); color: var(--mcq-text);
    box-shadow: var(--mcq-shadow); font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden; transition: background 0.3s ease, color 0.3s ease;
}
.mcq-quiz-wrapper { padding: 25px; }

/* Header */
.mcq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--mcq-border); flex-wrap: wrap; gap: 15px; }
.mcq-header h2 { margin: 0; font-size: 1.6em; }
.mcq-header-controls { display: flex; align-items: center; gap: 15px; }
.mcq-theme-switch { position: relative; display: inline-block; width: 46px; height: 22px; }
.mcq-theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--mcq-accent); }
input:checked + .slider:before { transform: translateX(24px); }
.mcq-timer { font-size: 1.1em; font-weight: bold; color: #d9534f; background: rgba(217, 83, 79, 0.1); padding: 5px 12px; border-radius: 4px; }

/* Questions & Options */
.mcq-question-text, .mcq-review-qtext { font-size: var(--mcq-q-size); margin-bottom: 20px; line-height: 1.6; font-weight: 600; }
.mcq-options, .mcq-review-options, .mcq-full-review-options { list-style: none; padding: 0; margin: 0; }
.mcq-options li, .mcq-review-options li, .mcq-full-review-options li { margin-bottom: 12px; }
.mcq-options label, .mcq-review-option-box, .mcq-full-review-options li {
    display: block; position: relative; cursor: pointer; padding: var(--mcq-opt-pad);
    border-width: var(--mcq-opt-border-width); border-radius: var(--mcq-opt-radius);
    font-size: var(--mcq-opt-size); border-style: solid; border-color: var(--mcq-opt-border);
    background-color: var(--mcq-opt-bg); color: var(--mcq-text); transition: all 0.2s;
}
.mcq-options label:hover { border-color: var(--mcq-accent); background-color: var(--mcq-opt-hover); }
.mcq-options input[type="radio"] { display: none; }
.mcq-options input[type="radio"] + span { display: block; padding-left: 35px; }
.mcq-options input[type="radio"] + span::before { content: ''; position: absolute; left: var(--mcq-opt-pad); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; background-color: var(--mcq-input-bg); }
.mcq-options input[type="radio"]:checked + span::before { border-color: var(--mcq-accent); }
.mcq-options input[type="radio"]:checked + span::after { content: ''; position: absolute; left: calc(var(--mcq-opt-pad) + 5px); top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background-color: var(--mcq-accent); }

/* Review System */
.review-correct-answer { background-color: var(--mcq-correct-bg) !important; border-color: var(--mcq-correct-border) !important; color: var(--mcq-correct-text) !important; font-weight: bold; }
.review-user-incorrect { background-color: var(--mcq-wrong-bg) !important; border-color: var(--mcq-wrong-border) !important; color: var(--mcq-wrong-text) !important; }
.review-dimmed { opacity: 0.7; }
.mcq-review-explanation { margin-top: 20px; padding: 20px; background-color: var(--mcq-exp-bg); border-left: 5px solid var(--mcq-exp-border); border-radius: 0 4px 4px 0; }
.mcq-full-review-item { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--mcq-border); }
.mcq-review-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }

/* Buttons */
.mcq-btn-std { display: inline-block; padding: 12px 24px; font-size: 1em; font-weight: bold; cursor: pointer; border: none; border-radius: 6px; margin-top: 5px; margin-right: 5px; color: #ffffff; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#mcq-start-quiz-btn, #mcq-next-btn, #mcq-review-next-btn, #mcq-btn-step-review, #mcq-btn-full-review { background-color: var(--mcq-accent); }
#mcq-submit-btn, .mcq-performance-load-button, #mcq-final-submit-btn { background: #28a745; }
#mcq-prev-btn, #mcq-retake-btn, #mcq-review-prev-btn, #mcq-review-back-btn, #mcq-full-review-back-btn { background-color: #6c757d; }
#mcq-mark-review-btn { background-color: #8e44ad; }
#mcq-submit-now-btn { background-color: #dc3545; }
#mcq-clear-btn { background: transparent; border: 1px solid var(--mcq-border); color: var(--mcq-text); }

/* =========================================
   2. EXAM SIMULATION LAYOUT
   ========================================= */
.mcq-template-exam_simulation { padding: 0 !important; border-radius: 0; }
.mcq-template-exam_simulation .mcq-quiz-wrapper { padding: 0; }
.mcq-template-exam_simulation .mcq-header { background-color: #005a87; padding: 15px 25px; margin: 0; border-bottom: 1px solid #004060; }
.mcq-template-exam_simulation .mcq-header h2 { color: #fff; font-size: 1.3em; }
.mcq-template-exam_simulation .mcq-timer { color: #fff; background: #000; border: 1px solid #444; }
#mcq-exam-body { display: flex; flex-wrap: wrap; min-height: 600px; }
#mcq-questions-column { flex: 1; padding: 30px; min-width: 60%; display: flex; flex-direction: column; background-color: var(--mcq-bg); }
#mcq-questions-area { flex-grow: 1; }
#mcq-palette-column { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; background-color: var(--mcq-sidebar-bg); border-left: 1px solid var(--mcq-border); }
.mcq-palette-header { background-color: var(--mcq-input-border); color: var(--mcq-text); padding: 12px; font-weight: bold; text-align: center; border-bottom: 1px solid var(--mcq-border); }
.mcq-dark-mode-active .mcq-palette-header { background-color: #333; }
.mcq-palette-grid { padding: 15px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mcq-palette-size), 1fr)); gap: 10px; overflow-y: auto; max-height: 500px; align-content: start; }
.mcq-palette-btn { height: var(--mcq-palette-size); display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 6px; cursor: pointer; background: var(--pal-def-grad); border: 1px solid var(--pal-def-bor); color: var(--pal-def-txt); box-shadow: 0 3px 0 rgba(0,0,0,0.2); transition: transform 0.1s; }
.mcq-palette-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 2px 4px rgba(0,0,0,0.2); }
.status-answered { background: var(--pal-ans-grad); border-color: #4cae4c; color: #fff; box-shadow: 0 3px 0 #3d8b3d; }
.status-not-answered { background: var(--pal-not-grad); border-color: #d43f3a; color: #fff; box-shadow: 0 3px 0 #c9302c; }
.status-review { background: var(--pal-rev-grad); border-color: #8e44ad; color: #fff; box-shadow: 0 3px 0 #6c3483; }
.mcq-palette-btn.active-q { border-color: var(--mcq-text); box-shadow: 0 0 0 2px var(--mcq-text) inset; }
.mcq-live-counts { margin-top: auto; padding: 15px; background-color: var(--mcq-bg); border-top: 1px solid var(--mcq-border); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.85em; }
.count-item { display: flex; align-items: center; justify-content: space-between; padding: 6px; border: 1px solid var(--mcq-border); border-radius: 4px; background-color: var(--mcq-opt-bg); }
.dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; border: 1px solid #999; }
.legend-green { background: #5cb85c; } .legend-red { background: #d9534f; } .legend-purple { background: #8e44ad; } .legend-white { background: #fff; }

/* =========================================
   3. POLL STYLING (NEW UI)
   ========================================= */
.mcq-poll-wrapper { font-family: var(--poll-font); position: relative; overflow: hidden; background: var(--mcq-card-bg); color: var(--mcq-text); border: 1px solid var(--mcq-border); border-radius: 10px; margin: 20px 0 30px; transition: 0.3s; box-shadow: var(--mcq-shadow); }
.mcq-poll-reg-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 1000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(8px); }
.mcq-poll-wrapper.dark-mode .mcq-poll-reg-modal { background: rgba(0,0,0,0.9); }
.mcq-reg-box { background: var(--mcq-card-bg); padding: 30px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); text-align: center; max-width: 320px; width: 90%; border: 1px solid var(--mcq-border); }
.mcq-poll-container { padding: 25px; min-height: 350px; position: relative; }
.mcq-card-inner { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; width: 100%; }
.mcq-count { position: absolute; top: -5px; left: -5px; background: var(--mcq-accent); color: #fff; padding: 2px 8px; font-size: 12px; border-radius: 4px; z-index: 2; }

h3.mcq-poll-title-placeholder {
    font-family: var(--poll-font);
    color: var(--mcq-text);
    font-size: 1.5em;
    text-align: center;
    padding: 15px;
    margin: 20px 0 0;
    border: 1px solid var(--mcq-border);
    border-bottom: none;
    background: var(--mcq-opt-hover);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.mcq-poll-wrapper.dark-mode h3.mcq-poll-title-placeholder,
.mcq-dark-mode-active h3.mcq-poll-title-placeholder {
    background: var(--mcq-opt-bg);
}
.mcq-poll-wrapper { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }


.mcq-poll-container .mcq-q-text { font-size: calc(var(--poll-fs) * 1.1); font-weight: bold; padding: 30px 20px 20px; border: 1px solid var(--mcq-border); border-radius: 8px; background: var(--mcq-opt-hover); margin-bottom: 25px; width: 100%; max-width: 600px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; }
.mcq-dark-mode-active .mcq-poll-container .mcq-q-text, .mcq-poll-wrapper.dark-mode .mcq-poll-container .mcq-q-text { background: var(--mcq-opt-bg); }

.mcq-opts { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 500px; }
.mcq-opts li { padding: 14px 18px; margin-bottom: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--mcq-opt-border); background-color: var(--mcq-opt-bg); box-shadow: 0 3px 5px rgba(0,0,0,0.07); }
.mcq-opts li:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-color: var(--mcq-accent); }
.mcq-opts li.correct { background: var(--mcq-correct-bg) !important; color: var(--mcq-correct-text) !important; border-color: var(--mcq-correct-border) !important; transform: none !important; }
.mcq-opts li.wrong { background: var(--mcq-wrong-bg) !important; color: var(--mcq-wrong-text) !important; border-color: var(--mcq-wrong-border) !important; transform: none !important; }

.layout-dark-neon { background: #000 !important; color: #0ff !important; border: 2px solid #0ff; }
.mcq-poll-wrapper.layout-dark-neon .mcq-q-text, .mcq-poll-wrapper.layout-dark-neon .mcq-opts li { color: #0ff; border-color: #0ff; background: #111; }
.mcq-poll-wrapper.layout-dark-neon .mcq-opts li:hover { background: #222; }

.mcq-poll-lb-toggle { text-align: center; padding: 15px; background: var(--mcq-bg); border-top: 1px solid var(--mcq-border); cursor: pointer; }
.mcq-poll-summary { margin-top: 20px; padding: 20px; background: var(--mcq-opt-hover); border-radius: 8px; text-align: center; }
.mcq-dark-mode-active .mcq-poll-summary, .mcq-poll-wrapper.dark-mode .mcq-poll-summary { background: var(--mcq-opt-bg); }
.mcq-poll-final-score { font-size: 2.5em; font-weight: bold; color: var(--mcq-accent); }
.mcq-poll-score-details { margin-top: 10px; color: var(--mcq-text-muted); }
.mcq-poll-score-details span { display: block; margin-bottom: 5px; }


/* =========================================
   4. SCOREBOARD & STREAK PROGRESS BAR
   ========================================= */
.mcq-scoreboard-wrapper { padding: 25px; border: 1px solid var(--mcq-border); border-radius: 8px; background-color: var(--mcq-card-bg); }
.mcq-total-points-display { text-align: center; margin-bottom: 25px; }
.mcq-total-points-display .label { font-size: 1.1em; color: var(--mcq-text-muted); }
.mcq-total-points-display .points { display: block; font-size: 3em; font-weight: bold; color: var(--mcq-accent); line-height: 1.1; }
.mcq-streak-container { display: flex; flex-wrap: wrap; gap: 25px; }
.mcq-streak-tracker { background: var(--mcq-opt-hover); padding: 15px; border-radius: 6px; flex: 1; min-width: 280px; }
.mcq-dark-mode-active .mcq-streak-tracker { background: var(--mcq-opt-bg); }
.mcq-streak-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.mcq-streak-title { font-weight: bold; font-size: 1.1em; }
.mcq-streak-counter { font-size: 0.9em; color: var(--mcq-text-muted); }
.mcq-streak-reward { text-align: center; margin-top: 15px; font-size: 0.9em; color: var(--mcq-accent); text-shadow: 0 0 10px var(--mcq-accent); }

.mcq-streak-progress-bar.weekly { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; gap: 10px; }
.mcq-streak-progress-bar.weekly li { width: 35px; height: 35px; border-radius: 50%; background-color: var(--mcq-card-bg); border: 2px solid var(--mcq-border); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--mcq-text-muted); position: relative; transition: all 0.3s ease; }
.mcq-streak-progress-bar.weekly li span { transition: opacity 0.3s ease; }
.mcq-checkmark { width: 20px; height: 20px; fill: white; position: absolute; opacity: 0; transform: scale(0.5); transition: all 0.3s ease-out; }
.mcq-streak-progress-bar.weekly li.complete { background-color: var(--mcq-accent); border-color: var(--mcq-accent); color: white; animation: fill-in 0.4s ease-out forwards; animation-delay: var(--delay); }
.mcq-streak-progress-bar.weekly li.complete span { opacity: 0; }
.mcq-streak-progress-bar.weekly li.complete .mcq-checkmark { opacity: 1; transform: scale(1); }

@keyframes fill-in { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }

progress.mcq-streak-progress-bar.monthly { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--mcq-border); }
progress.mcq-streak-progress-bar.monthly::-webkit-progress-bar { background-color: var(--mcq-card-bg); }
progress.mcq-streak-progress-bar.monthly::-webkit-progress-value { background-color: var(--mcq-accent); border-radius: 6px; }
progress.mcq-streak-progress-bar.monthly::-moz-progress-bar { background-color: var(--mcq-accent); border-radius: 6px; }

#mcq-guest-score-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
#mcq-guest-score-form input { flex-grow: 1; padding: 10px; border: 1px solid var(--mcq-input-border); border-radius: 4px; background-color: var(--mcq-input-bg); color: var(--mcq-text); }

.mcq-scoreboard-actions { text-align: center; margin-top: 25px; }


/* =========================================
   5. TOP SCORERS MODAL
   ========================================= */
.mcq-leaderboard-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.mcq-leaderboard-modal-backdrop.mcq-is-visible { opacity: 1; pointer-events: auto; }
.mcq-leaderboard-modal-content { background: var(--mcq-card-bg); color: var(--mcq-text); padding: 25px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: var(--mcq-shadow); transform: scale(0.95); transition: transform 0.3s ease; }
.mcq-is-visible .mcq-leaderboard-modal-content { transform: scale(1); }
.mcq-leaderboard-modal-content h3 { text-align: center; margin-top: 0; border-bottom: 1px solid var(--mcq-border); padding-bottom: 15px; }
.mcq-leaderboard-modal-list { list-style: none; padding: 0; margin: 0; }
.mcq-leaderboard-modal-list li { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid var(--mcq-border); opacity: 0; transform: translateX(-20px); animation: slideIn 0.5s ease-out forwards; animation-delay: var(--delay); }
.mcq-leaderboard-modal-list li:last-child { border-bottom: none; }
.mcq-leaderboard-rank { font-weight: bold; font-size: 1.2em; color: var(--mcq-text-muted); width: 40px; text-align: center; }
.mcq-leaderboard-name { flex-grow: 1; font-weight: 500; }
.mcq-leaderboard-score { font-weight: bold; font-size: 1.1em; color: var(--mcq-accent); }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }


/* =========================================
   6. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    #mcq-exam-body { flex-direction: column-reverse; }
    #mcq-palette-column { width: 100%; height: auto; border-left: none; border-top: 1px solid var(--mcq-border); }
    #mcq-questions-column { border-right: none; }
    .mcq-palette-grid { max-height: 180px; }
    #mcq-navigation { flex-direction: column; gap: 10px; }
}
@media (max-width: 768px) {
    .mcq-question-text { font-size: var(--mcq-q-size-mob); }
    .mcq-options label { padding: var(--mcq-opt-pad-mob); }
    .mcq-options span { font-size: var(--mcq-opt-size-mob); }
    .mcq-header { flex-direction: column; align-items: flex-start; }
    .mcq-streak-progress-bar.weekly li { width: 30px; height: 30px; }
    #mcq-guest-score-form input, #mcq-guest-score-form button { width: 100%; flex-grow: 0; }
}

/* =========================================
   7. REWARD ANIMATION
   ========================================= */
.mcq-reward-particle { position: fixed; top: 100%; pointer-events: none; animation: mcq-animate-reward 5s linear forwards; z-index: 99999; }
@keyframes mcq-animate-reward { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; } }

/* =========================================
   8. QUIZ CONTAINER BACKGROUND STYLES
   ========================================= */
[class*="mcq-bg-"] { position: relative; z-index: 1; }
[class*="mcq-bg-"]::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; border-radius: inherit; }
.mcq-bg-paper::before { background-image: url('https://www.transparenttextures.com/patterns/paper.png'); opacity: 0.5; }
.mcq-bg-grid::before { background-color: #ffffff; background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(to right, #eee 1px, transparent 1px); background-size: 20px 20px; opacity: 1; }
.mcq-dark-mode-active .mcq-bg-grid::before { background-color: transparent; background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px); }
.mcq-bg-blueprint::before { background-color: #26466D; background-image: linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px), linear-gradient(to right, rgba(255,255,255,0.15) 1px, #26466D 1px); background-size: 20px 20px; }
.mcq-bg-hexagon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.15' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.99-7.5L26 15v18.5l-13 7.5L0 33.5V15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.8; }
.mcq-bg-gradient::before { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.mcq-dark-mode-active .mcq-bg-gradient::before { background: linear-gradient(135deg, #2d3a4b 0%, #151c24 100%); }
.mcq-bg-dark-abstract::before { background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png'); background-color: #222; opacity: 1; }