/* =========================================================================
   BLUE DOT KIDS QUIZ - APP.CSS (Chuẩn 100% Mockup Giao Diện Đẹp Mắt)
   ========================================================================= */

body {
    font-family: 'Quicksand', sans-serif;
    background: radial-gradient(circle at top left, #e0f2fe 0%, #bae6fd 40%, #e0f2fe 70%, #fef08a 100%);
    min-height: 100vh;
    color: #0f172a;
    overflow-x: hidden;
}

/* Glassmorphism Card theo đúng bản vẽ Mockup */
.glass-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 4px solid #ffffff;
    box-shadow: 0 20px 50px rgba(14, 165, 233, 0.18);
}

.screen {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.screen.active {
    display: block;
    opacity: 1;
}

/* Hover hiệu ứng thẻ ảnh giống mockup 2 */
.picture-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.picture-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.picture-card.correct {
    background-color: #f0fdf4 !important;
    border-color: #22c55e !important;
    transform: scale(1.04);
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5);
}

.picture-card.wrong {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    transform: scale(0.96);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
}

/* Thẻ Cấp Độ (Level Cards) đúng màu sắc Mockup 1 */
.lvl-card-1.selected {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

.lvl-card-2.selected {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

.lvl-card-3.selected {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

.lvl-card-4.selected {
    background: linear-gradient(135deg, #eab308, #a16207) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

.lvl-card-5.selected {
    background: linear-gradient(135deg, #ec4899, #be185d) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

.lvl-card-6.selected {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: white !important;
    border-color: #fde047 !important;
    transform: scale(1.06);
}

/* Thẻ Chế Độ (Mode Cards) chuẩn Mockup 1 */
.mode-card-practice.selected {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border-color: #fb923c !important;
    box-shadow: 0 12px 30px rgba(251, 146, 60, 0.3);
}

.mode-card-exam.selected {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
}

/* Nút hình tròn số câu hỏi Ma trận phòng thi (Mockup 3) */
.q-circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.q-circle-btn.current {
    border: 3px solid #f97316;
    background-color: #3b82f6;
    color: white;
    font-weight: 900;
}

.q-circle-btn.done {
    background-color: #3b82f6;
    color: white;
}

.q-circle-btn.empty {
    background-color: #e2e8f0;
    color: #475569;
}