body {
    transition: opacity ease-in 0.2s;
    font-family: 'Inter', 'Noto Sans Bengali', sans-serif;
    background-color: #0c1425;
    background-image: radial-gradient(#374151 1px, transparent 0);
    background-size: 20px 20px;
    color: #d1d5db;
}

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

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

.game-font {
    font-family: 'Fredoka One', cursive;
}

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

.main-container {
    background-color: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid #4b5563;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.option-btn, .exam-select-btn, .btn-control {
    transition: all 0.2s ease-in-out;
}

.option-btn:hover:not(:disabled), .exam-select-btn:hover, .btn-control:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.option-btn.correct {
    background-color: #10b981;
    border-color: #059669;
    color: white;
}

.option-btn.wrong {
    background-color: #ef4444;
    border-color: #dc2626;
    color: white;
}

.exam-select-btn, .subject-practice-btn {
    border: 2px solid #374151;
    background-color: rgba(55, 65, 81, 0.5);
}

.exam-select-btn:hover, .subject-practice-btn:hover {
    border-color: #f59e0b;
    background-color: rgba(75, 85, 99, 0.7);
}

#exam-list, #subject-list {
    perspective: 1000px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: rotateX(-10deg) translateY(20px);
    }
    to {
        opacity: 1;
        transform: rotateX(0) translateY(0);
    }
}

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

@keyframes scoreUp {
    0% {
        transform: scale(1);
        text-shadow: none;
    }
    50% {
        transform: scale(1.25);
        color: #34d399;
        text-shadow: 0 0 15px #34d399;
    }
    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

@keyframes scoreDown {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-5px);
    }
    40%, 80% {
        transform: translateX(5px);
    }
    50% {
        color: #f87171;
        text-shadow: 0 0 15px #f87171;
    }
}

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

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

/* Side Navigation */
#side-nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

#side-nav.open {
    transform: translateX(0);
}

/* Mode Toggle Switch */
.mode-toggle-btn {
    color: #9ca3af;
    background-color: transparent;
}

.mode-toggle-btn.active {
    color: #0c1425;
    background-color: #f59e0b;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}

/* Details container transition */
#details-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

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

/* Progress Accordion Styles */
.progress-topic-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

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

.progress-subject-header .chevron {
    transition: transform 0.3s ease-in-out;
}

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

/* Modal Styles */
.modal-overlay {
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: scale(0.95);
    opacity: 0;
}

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

.question-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.option-image {
    max-height: 80px;
    max-width: 120px;
    border-radius: 0.25rem;
    object-fit: cover;
}

/* Card Display Styles */
.question-card {
    background-color: rgba(31, 41, 55, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid #4b5563;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
}

.card-option-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background-color: #374151;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    cursor: pointer;
}

.card-option-btn:hover:not(:disabled) {
    background-color: #4b5563;
}

.card-option-btn.correct {
    background-color: #10b981;
    border-color: #059669;
}

.card-option-btn.wrong {
    background-color: #ef4444;
    border-color: #dc2626;
}

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

/* 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: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: white;
    color: #1f2937;
}

.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: 0.5rem;
    padding: 1rem;
}

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

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

.question-item img {
    max-width: 100%;
    height: auto;
}

.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 {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

/* Print Styles */
@media print {
    body {
        background-color: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .main-container, #main-header, #side-nav, .ui-container {
        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;
    }
}