/* ===================================
   Modern Quiz App Styles
   Premium Dark Theme with Glassmorphism
   =================================== */

:root {
    /* Color Palette */
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);

    /* Accent Colors */
    --accent-amber: #f59e0b;
    --accent-amber-glow: rgba(245, 158, 11, 0.3);
    --accent-indigo: #6366f1;
    --accent-indigo-glow: rgba(99, 102, 241, 0.3);
    --accent-teal: #14b8a6;
    --accent-teal-glow: rgba(20, 184, 166, 0.3);

    /* Status Colors */
    --success: #22c55e;
    --success-glow: rgba(34, 197, 94, 0.3);
    --danger: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.3);
    --warning: #f59e0b;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px;
}

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

body {
    font-family: 'Poppins', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-secondary);
    min-height: 100vh;
    transition: opacity ease-in 0.2s;
    overflow-x: hidden;
}

/* Animated Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 184, 166, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: gradientPulse 20s ease-in-out infinite alternate;
}

@keyframes gradientPulse {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* Grid Pattern Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

body[unresolved] {
    opacity: 0;
    display: block;
    overflow: hidden;
    position: relative;
}

body.pdf-view-active {
    padding-top: 0 !important;
    background-color: #f0f2f5;
    background-image: none;
}

body.pdf-view-active::before,
body.pdf-view-active::after {
    display: none;
}

/* Typography */
.game-font {
    font-family: 'Fredoka One', cursive;
    letter-spacing: 0.02em;
}

.pro-font {
    font-family: 'Space Mono', 'Roboto Mono', monospace;
}

/* Main Container - Glassmorphism */
.main-container {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 10;
}

/* Header Styles */
#main-header {
    background: rgba(10, 14, 23, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

#main-header-title {
    background: linear-gradient(135deg, var(--accent-amber) 0%, #fcd34d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px var(--accent-amber-glow));
}

/* Button Styles */
.option-btn,
.exam-select-btn,
.btn-control {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.option-btn::before,
.exam-select-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.option-btn:hover::before,
.exam-select-btn:hover::before {
    left: 100%;
}

.option-btn:hover:not(:disabled),
.exam-select-btn:hover,
.btn-control:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.option-btn:active:not(:disabled),
.exam-select-btn:active,
.btn-control:active {
    transform: translateY(-1px) scale(0.98);
}

/* Option Button States */
.option-btn.correct {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 30px var(--success-glow);
    animation: correctPulse 0.6s ease-out;
}

.option-btn.wrong {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 30px var(--danger-glow);
    animation: wrongShake 0.5s ease-out;
}

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

    50% {
        transform: scale(1.02);
    }

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

@keyframes wrongShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Exam Selection Buttons */
.exam-select-btn,
.subject-practice-btn {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exam-select-btn:hover,
.subject-practice-btn:hover {
    border-color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 30px var(--accent-amber-glow);
}

/* Entrance Animations */
#exam-list,
#subject-list {
    perspective: 1000px;
}

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

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }

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

.exam-select-btn,
.subject-practice-btn {
    animation: fadeInScale 0.5s ease-out forwards;
    opacity: 0;
}

/* Staggered Animation Delays */
.exam-select-btn:nth-child(1),
.subject-practice-btn:nth-child(1) {
    animation-delay: 0.05s;
}

.exam-select-btn:nth-child(2),
.subject-practice-btn:nth-child(2) {
    animation-delay: 0.1s;
}

.exam-select-btn:nth-child(3),
.subject-practice-btn:nth-child(3) {
    animation-delay: 0.15s;
}

.exam-select-btn:nth-child(4),
.subject-practice-btn:nth-child(4) {
    animation-delay: 0.2s;
}

.exam-select-btn:nth-child(5),
.subject-practice-btn:nth-child(5) {
    animation-delay: 0.25s;
}

.exam-select-btn:nth-child(6),
.subject-practice-btn:nth-child(6) {
    animation-delay: 0.3s;
}

/* Score Animations */
@keyframes scoreUp {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        color: var(--success);
        filter: drop-shadow(0 0 20px var(--success-glow));
    }

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

@keyframes scoreDown {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }

    50% {
        color: var(--danger);
        filter: drop-shadow(0 0 20px var(--danger-glow));
    }
}

.score-up {
    animation: scoreUp 0.5s ease-in-out;
}

.score-down {
    animation: scoreDown 0.5s ease-in-out;
}

/* Side Navigation */
#side-nav {
    background: rgba(10, 14, 23, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#side-nav.open {
    transform: translateX(0);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
}

.nav-btn {
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px);
}

/* Mode Toggle Switch */
.mode-toggle-btn {
    color: var(--text-muted);
    background-color: transparent;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.mode-toggle-btn.active {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--accent-amber) 0%, #fcd34d 100%);
    box-shadow: 0 4px 20px var(--accent-amber-glow);
}

/* Details Container */
#details-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#details-container.open {
    max-height: 2000px;
}

/* Progress Accordion Styles */
.progress-topic-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-subject-header.open+.progress-topic-list {
    max-height: 500px;
}

.progress-subject-header {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.progress-subject-header:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
}

.progress-subject-header .chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-subject-header.open .chevron {
    transform: rotate(90deg);
}

/* Modal Styles */
.modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
}

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

/* Quiz Question Card Styles */
.question-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.option-image {
    max-height: 80px;
    max-width: 120px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

/* Card Display Styles */
.question-card {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.question-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg);
}

.card-option-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.card-option-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-hover);
    transform: translateX(4px);
}

.card-option-btn.correct {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%);
    border-color: var(--success);
    color: var(--success);
}

.card-option-btn.wrong {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-color: var(--danger);
    color: var(--danger);
}

.card-option-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Timer & Score Display */
#timer {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

#score {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px var(--success-glow));
}

/* Progress Bar */
#progress-bar {
    background: linear-gradient(90deg, var(--accent-indigo) 0%, var(--accent-teal) 100%);
    box-shadow: 0 0 20px var(--accent-indigo-glow);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* PDF Generator Styles */
.page-for-print {
    display: none;
}

.watermark-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.watermark-container::before {
    content: 'bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com bcsbrain.com';
    position: absolute;
    inset: -200%;
    font-size: 4rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    transform: rotate(-30deg);
    word-spacing: 80px;
    line-height: 100px;
    text-align: center;
}

#pdf-display-area .content,
#pdf-document-container .content {
    position: relative;
}

#pdf-display-questions,
#pdf-print-questions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.question-item {
    flex: 1 1 calc(50% - 0.75rem);
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: white;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.banner-item {
    flex: 1 1 calc(50% - 0.75rem);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
}

.banner-item img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.question-item p {
    overflow-wrap: break-word;
}

.question-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.interstitial-watermark {
    flex-basis: 100%;
    height: 0;
    position: relative;
}

.interstitial-watermark::after {
    content: 'bcsbrain.com';
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 6rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
}

/* Loader */
.loader {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--accent-indigo);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Floating Action Button */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-indigo) 0%, var(--accent-teal) 100%);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

.fab:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
}

.fab svg {
    width: 24px;
    height: 24px;
}

/* Tooltip */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Focus States for Accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-indigo);
    outline-offset: 2px;
}

/* Selection Styles */
::selection {
    background: var(--accent-indigo);
    color: white;
}

/* Print Styles */
@media print {
    body {
        background-color: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body::before,
    body::after {
        display: none;
    }

    .main-container,
    #main-header,
    #side-nav,
    .ui-container,
    .fab {
        display: none;
    }

    .page-for-print {
        display: block !important;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 10mm;
        box-shadow: none;
        border-radius: 0;
        position: static;
    }

    .watermark-container {
        position: fixed;
        opacity: 0.12;
        z-index: 100;
    }

    #pdf-print-questions-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .question-item {
        flex: 1 1 calc(50% - 0.5rem) !important;
        break-inside: avoid !important;
        border: 1px solid #ddd !important;
    }

    .banner-item {
        flex: 1 1 calc(50% - 0.5rem) !important;
        break-inside: avoid !important;
        border: 1px solid #ddd !important;
        padding: 1rem !important;
        background-color: white !important;
    }

    .banner-item img {
        box-shadow: none !important;
    }

    .interstitial-watermark::after {
        top: 0.5rem;
        font-size: 5rem;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    body::before {
        background:
            radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
            radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.1) 0%, transparent 60%);
    }

    .fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .fab svg {
        width: 20px;
        height: 20px;
    }
}