* { box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; }

/* Subtle grain overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== ANIMATIONS ===================== */
.fade-in  { animation: fadeIn 0.4s ease-out; }
.slide-up { animation: slideUp 0.45s ease-out; }
.pop-in   { animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn   { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* ===================== ANSWER BUTTONS ===================== */
.answer-btn { transition: all 0.2s ease; }
.answer-btn:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.answer-btn.locked { cursor: default; }

/* ===================== PROGRESS BAR ===================== */
.progress-fill { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* ===================== COUNTDOWN BAR (exam mode) ===================== */
#countdown-bar {
    transition: width 0.1s linear;
}
#countdown-bar.urgent {
    animation: pulse-urgent 0.5s ease-in-out infinite;
}
@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===================== QUESTION IMAGE ===================== */
.question-image {
    max-height: 240px;
    object-fit: contain;
    border-radius: 12px;
}

/* ===================== THEME CHIPS ===================== */
.theme-chip {
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}
.theme-chip:hover {
    transform: translateY(-1px);
}
.theme-chip.selected {
    background-color: rgba(90, 132, 82, 0.3);
    border-color: rgba(90, 132, 82, 0.7);
    color: #a8c2a4;
}
.theme-chip:not(.selected) {
    background-color: rgba(30, 46, 28, 0.5);
    border-color: rgba(56, 85, 52, 0.4);
    color: #b59a7d;
}

/* ===================== THEME DROPDOWN ===================== */
.theme-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.theme-dropdown.open {
    max-height: 400px;
    opacity: 1;
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #a8c2a4; border-radius: 3px; }