/* ==========================================================================
   🐻 مغامرات ماشا والدب في الرياضيات - مرام زياد 👧
   Masha and the Bear Theme Stylesheet
   ========================================================================== */

:root {
    /* --- Masha and the Bear Theme Colors --- */
    --masha-pink: #E91E63;
    --masha-pink-dark: #C2185B;
    --masha-pink-light: #FF4081;
    --masha-fuchsia: #D81B60;
    
    --bear-brown: #5D4037;
    --bear-brown-dark: #3E2723;
    --bear-brown-light: #8D6E63;
    --wood-bark: #4E342E;
    
    --forest-green: #2E7D32;
    --forest-green-light: #4CAF50;
    --forest-mint: #E8F5E9;
    
    --honey-gold: #FFB300;
    --honey-amber: #FFA000;
    --honey-light: #FFF8E1;
    --sunflower-yellow: #FFD54F;
    
    --primary: var(--forest-green);
    --primary-light: var(--forest-mint);
    --secondary: var(--honey-gold);
    --accent: var(--masha-pink);
    --background: #F8F5EE;
    --card-bg: #FFFFFF;
    --text-main: #3E2723;
    --text-muted: #6D4C41;
    --text-dim: #795548;
    
    --shadow: 0 10px 25px rgba(62, 39, 35, 0.1);
    --shadow-hover: 0 14px 30px rgba(233, 30, 99, 0.18);
    --border-radius: 20px;
    --radius: 20px;
    --radius-xl: 28px;
    --radius-lg: 18px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Tajawal', 'Cairo', 'Changa', sans-serif;
}

body {
    background-color: #F8F5EE;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(233, 30, 99, 0.05), transparent 30%),
        radial-gradient(circle at 90% 40%, rgba(255, 179, 0, 0.07), transparent 35%),
        linear-gradient(180deg, #FFFDF9 0%, #F5EFE6 100%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    direction: rtl;
    position: relative;
}

/* Floating subtle forest elements */
.floating-forest-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.forest-leaf {
    position: absolute;
    font-size: 2.2rem;
    opacity: 0.18;
    animation: gentleFloat 14s infinite ease-in-out;
}

.leaf-1 { top: 10%; left: 5%; animation-delay: 0s; }
.leaf-2 { top: 32%; right: 4%; animation-delay: 2s; }
.leaf-3 { top: 62%; left: 7%; animation-delay: 4s; }
.leaf-4 { top: 85%; right: 6%; animation-delay: 1s; }
.leaf-5 { top: 48%; left: 48%; animation-delay: 3s; }

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-22px) rotate(12deg); }
}

.app-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Header Styles (Masha & Bear Premium Wood Header)
   ========================================================================== */
.masha-premium-header {
    background: linear-gradient(135deg, #4E342E 0%, #5D4037 45%, #3E2723 100%);
    color: #FFFDF9;
    border-radius: 0 0 35px 35px;
    box-shadow: 0 10px 30px rgba(62, 39, 35, 0.25);
    border-bottom: 5px solid var(--honey-gold);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    z-index: 10;
}

.masha-premium-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.header-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2.5rem;
    position: relative;
    z-index: 2;
    gap: 1.5rem;
}

/* Right Column: Student Profile & Header Action Buttons */
.nav-right-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.nav-user-badge, .play-masha-btn {
    height: 58px;
    min-width: 175px;
    box-sizing: border-box;
    border-radius: 50px;
    border: 2px solid rgba(255, 215, 79, 0.45);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.nav-user-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0 1.2rem 0 0.55rem;
    cursor: pointer;
}

.nav-user-badge:hover {
    transform: translateY(-2px);
    border-color: var(--honey-gold);
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.3);
}

.nav-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFF;
    border: 3px solid var(--honey-gold);
    box-shadow: 0 0 12px rgba(255, 179, 0, 0.5);
    flex-shrink: 0;
}

.nav-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-star-badge {
    position: absolute;
    bottom: -4px;
    left: -4px;
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.nav-user-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    font-family: 'Marhey', 'Tajawal', sans-serif;
    letter-spacing: 0.3px;
}

.play-masha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #FFFFFF;
    padding: 0 1.3rem;
    font-family: 'Marhey', 'Tajawal', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid rgba(255, 215, 79, 0.45);
}

.play-masha-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 215, 79, 0.22);
    border-color: var(--honey-gold);
    color: var(--sunflower-yellow);
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.35);
}

.play-masha-btn .btn-icon {
    font-size: 1.35rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.play-masha-btn .btn-badge {
    font-size: 1.15rem;
}

/* Center: Platform Title Capsule */
.nav-title-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nav-title-capsule {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-emoji-cluster {
    font-size: 1.3rem;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: gentleBob 3s infinite ease-in-out;
}

@keyframes gentleBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.nav-title-capsule h1 {
    font-family: 'Marhey', 'Changa', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 2px 0 var(--masha-pink-dark), 0 0 20px rgba(233, 30, 99, 0.4);
    margin: 0;
    line-height: 1.2;
}

.nav-subject-tag {
    font-size: 0.88rem;
    font-weight: 800;
    color: #3E2723;
    background: linear-gradient(135deg, var(--honey-gold), var(--sunflower-yellow));
    padding: 3px 16px;
    border-radius: 20px;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: 'Changa', sans-serif;
}

/* Left: Portal Button in Upper Corner */
.nav-action-left {
    position: absolute;
    top: 18px;
    left: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
}

.portal-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.portal-home-btn:hover {
    transform: translateY(-2px) scale(1.12);
    background: linear-gradient(135deg, var(--masha-pink), var(--masha-pink-dark));
    border-color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.45);
}

.portal-home-btn .btn-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero Welcome Strip */
.header-hero-strip {
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.65rem 1.5rem;
    position: relative;
    z-index: 2;
}

.hero-strip-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 1rem;
    font-family: 'Tajawal', sans-serif;
}

.hero-bear-greeting {
    color: var(--sunflower-yellow);
    font-weight: 800;
}

.hero-divider {
    color: rgba(255, 255, 255, 0.4);
}

.hero-subtitle {
    color: #F5EBE6;
    font-weight: 600;
}

/* Section Title Wrap */
.section-title-wrap {
    text-align: center;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    padding: 1.2rem 2rem;
    border-radius: 25px;
    border: 2px solid #EADBCE;
    box-shadow: 0 4px 15px rgba(93, 64, 55, 0.06);
}

.section-title-wrap h2 {
    font-family: 'Marhey', 'Changa', sans-serif;
    color: var(--bear-brown-dark);
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.section-title-wrap p {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 600;
}

/* ==========================================================================
   Views and Navigation
   ========================================================================== */
.view {
    animation: fadeIn 0.4s ease-out;
    position: relative;
    width: 100%;
}

.view.hidden {
    display: none !important;
}

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

.sub-view-header {
    background: linear-gradient(135deg, #FFFDF9 0%, #F5EBE6 100%);
    border: 2px solid #E7D7C8;
    border-radius: 25px;
    padding: 1.8rem 2rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 6px 18px rgba(62, 39, 35, 0.08);
    position: relative;
}

.sub-view-header p {
    color: var(--text-muted);
    font-size: 1.15rem;
    margin-top: 0.5rem;
    font-weight: 600;
}

.sub-view-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.sub-view-title-box h1 {
    font-family: 'Marhey', 'Changa', sans-serif;
    font-size: 2rem;
    color: var(--bear-brown-dark);
}

.view-bear-badge {
    font-size: 2.2rem;
}

/* Wooden Back Button */
.wood-back-btn, .back-btn {
    background: linear-gradient(135deg, #5D4037 0%, #4E342E 100%);
    color: #FFFDF9;
    border: 2px solid var(--honey-gold);
    padding: 0.75rem 1.8rem;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(62, 39, 35, 0.25);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Changa', 'Tajawal', sans-serif;
    margin-bottom: 1rem;
}

.wood-back-btn:hover, .back-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: linear-gradient(135deg, var(--masha-pink), var(--masha-pink-dark));
    border-color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(233, 30, 99, 0.35);
}

/* ==========================================================================
   Distinctive Mathematics Chapter Cards (أزرار فصول الرياضيات المتميزة)
   ========================================================================== */
.math-chapters-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.6rem !important;
    padding: 1rem 0 3rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.math-chapter-card {
    background: #FFFFFF;
    border-radius: 26px;
    padding: 1.3rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(62, 39, 35, 0.08);
    border: 2.5px solid var(--chapter-border, #EADBCE);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-sizing: border-box;
    /* Mathematical Graph / Coordinate paper texture */
    background-image: 
        radial-gradient(circle at top right, var(--chapter-bg-tint, rgba(233, 30, 99, 0.08)), transparent 65%),
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: auto, 18px 18px, 18px 18px;
}

.math-chapter-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 18px 36px var(--chapter-bg-tint, rgba(233, 30, 99, 0.25));
    border-color: var(--chapter-color, var(--honey-gold));
}

/* Card Top Bar */
.math-card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9rem;
    z-index: 2;
}

.math-chapter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--chapter-color, #E91E63);
    color: #FFFFFF;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.14);
    font-family: 'Changa', sans-serif;
}

.math-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.math-status-badge {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 15px;
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
    font-family: 'Changa', sans-serif;
}

/* Character & Math Operator Stage */
.math-card-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    position: relative;
    padding: 0 0.4rem;
}

.math-masha-bubble {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFFDF9, #F5EBE6);
    border: 3px solid var(--chapter-border, #EADBCE);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease;
}

.math-chapter-card:hover .math-masha-bubble {
    transform: scale(1.08) rotate(-3deg);
    border-color: var(--chapter-color, var(--honey-gold));
}

.math-masha-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}

/* The Math Operator Stamp Token */
.math-operator-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--chapter-color, #E91E63), var(--chapter-color-dark, #C2185B));
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.35);
    border: 3px solid #FFFFFF;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.math-chapter-card:hover .math-operator-stamp {
    transform: scale(1.12) rotate(6deg);
}

.math-op-icon {
    font-size: 2.3rem;
    line-height: 1;
    font-weight: 900;
    font-family: 'Changa', sans-serif;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

.math-op-label {
    font-size: 0.78rem;
    font-weight: 800;
    margin-top: 3px;
    color: #FFF9E6;
    letter-spacing: 0.3px;
    font-family: 'Changa', sans-serif;
}

/* Card Body & Title */
.math-card-info {
    text-align: right;
    margin-bottom: 1.1rem;
    flex-grow: 1;
}

.math-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--chapter-bg-tint, #FFF8E1);
    color: var(--chapter-color-dark, #795548);
    border: 1.5px solid var(--chapter-border, #FFE082);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 8px;
    font-family: 'Changa', sans-serif;
}

.math-card-title {
    font-family: 'Changa', 'Tajawal', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bear-brown-dark);
    margin-bottom: 8px;
    line-height: 1.35;
}

/* Progress bar inside chapter card */
.math-progress-wrap {
    margin-top: 8px;
}

.math-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-family: 'Changa', sans-serif;
}

.math-progress-bar {
    width: 100%;
    height: 9px;
    background: #EFE8E1;
    border-radius: 8px;
    overflow: hidden;
}

.math-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--chapter-color, #FFB300), var(--chapter-color-dark, #FF8F00));
    border-radius: 8px;
    transition: width 0.4s ease;
}

/* Chapter Action Button */
.math-enter-btn {
    width: 100%;
    padding: 11px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--chapter-color, #5D4037), var(--chapter-color-dark, #3E2723));
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
    font-family: 'Changa', sans-serif;
}

.math-chapter-card:hover .math-enter-btn {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
    filter: brightness(1.08);
}

.math-enter-btn .action-icon {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.math-chapter-card:hover .math-enter-btn .action-icon {
    transform: translateX(-4px);
}

/* ==========================================================================
   Masha Adventure Cards (Lessons Grid)
   ========================================================================== */
.lesson-path-container, .books-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 1.4rem !important;
    padding: 1rem 0 3rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: auto !important;
    background: none !important;
}

.lesson-path-container::before, .books-grid::before {
    display: none !important;
}

.lesson-adventure-card {
    background: #FFFFFF;
    border-radius: 22px;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(93, 64, 55, 0.08);
    border: 2px solid #EFE8E1;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    width: 100%;
}

.lesson-adventure-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 30px rgba(233, 30, 99, 0.18);
}

/* Color Themes */
.card-theme-0 { border-top: 6px solid #FF4081; }
.card-theme-0:hover { border-color: #FF80AB; }
.card-theme-0 .card-stage-bubble { background: linear-gradient(135deg, #FCE4EC, #F8BBD0); border-color: #FF80AB; }
.card-theme-0 .card-action-btn { background: linear-gradient(135deg, #E91E63, #C2185B); }

.card-theme-1 { border-top: 6px solid #FFB300; }
.card-theme-1:hover { border-color: #FFD54F; }
.card-theme-1 .card-stage-bubble { background: linear-gradient(135deg, #FFF8E1, #FFECB3); border-color: #FFD54F; }
.card-theme-1 .card-action-btn { background: linear-gradient(135deg, #FFB300, #FF8F00); color: #3E2723; }

.card-theme-2 { border-top: 6px solid #4CAF50; }
.card-theme-2:hover { border-color: #81C784; }
.card-theme-2 .card-stage-bubble { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border-color: #81C784; }
.card-theme-2 .card-action-btn { background: linear-gradient(135deg, #4CAF50, #2E7D32); }

.card-theme-3 { border-top: 6px solid #00BCD4; }
.card-theme-3:hover { border-color: #4DD0E1; }
.card-theme-3 .card-stage-bubble { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); border-color: #4DD0E1; }
.card-theme-3 .card-action-btn { background: linear-gradient(135deg, #00BCD4, #00838F); }

.card-theme-4 { border-top: 6px solid #AB47BC; }
.card-theme-4:hover { border-color: #CE93D8; }
.card-theme-4 .card-stage-bubble { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); border-color: #CE93D8; }
.card-theme-4 .card-action-btn { background: linear-gradient(135deg, #AB47BC, #6A1B9A); }

/* Card Header Pill */
.card-header-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0 4px;
}

.lesson-status-pill {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: 'Changa', sans-serif;
}

.lesson-status-pill.new {
    background: #FFF8E1;
    color: #795548;
    border: 1px solid #FFE082;
}

.lesson-status-pill.completed {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

.card-speaker-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E0D5C9;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.card-speaker-btn:hover {
    transform: scale(1.18);
    background: #FFF9E6;
    border-color: var(--honey-gold);
}

/* Character Bubble Stage */
.card-stage-bubble {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0 0.7rem 0;
    position: relative;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.lesson-adventure-card:hover .card-stage-bubble {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.card-masha-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    transition: transform 0.35s ease;
}

.lesson-adventure-card:hover .card-masha-img {
    transform: scale(1.1) rotate(4deg);
}

/* Card Info Section */
.card-info-section {
    width: 100%;
    margin-bottom: 0.9rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-family: 'Changa', 'Tajawal', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-type-chip {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    background: #F8F4EE;
    padding: 3px 12px;
    border-radius: 12px;
    border: 1px solid #EADBCE;
}

/* Card Action Button */
.card-action-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: 14px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Changa', sans-serif;
}

.lesson-adventure-card:hover .card-action-btn {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.card-action-btn .action-icon {
    font-size: 1rem;
    transition: transform 0.2s;
}

.lesson-adventure-card:hover .card-action-btn .action-icon {
    transform: translateX(-3px);
}

/* ==========================================================================
   Lesson View (Header, Tabs & Content)
   ========================================================================== */
.lesson-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #4E342E 0%, #5D4037 100%);
    color: #FFFDF9;
    padding: 1.2rem 2rem;
    border-radius: 25px;
    margin-bottom: 2rem;
    border: 2px solid var(--honey-gold);
    box-shadow: 0 8px 20px rgba(62, 39, 35, 0.2);
    flex-wrap: wrap;
    gap: 1rem;
}

.lesson-header-bar .wood-back-btn {
    margin-bottom: 0;
}

.lesson-title-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lesson-bear-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.lesson-title-box h1 {
    font-family: 'Marhey', 'Changa', sans-serif;
    font-size: 1.8rem;
    color: #FFFFFF;
    margin: 0;
}

.lesson-sub-chapter {
    font-size: 0.95rem;
    color: var(--sunflower-yellow);
    font-weight: 700;
}

/* Lesson Tabs Switcher */
.lesson-tabs {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.6rem;
    border-radius: 40px;
    border: 2px solid #E7D7C8;
    box-shadow: 0 6px 18px rgba(62, 39, 35, 0.08);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 30px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Changa', 'Tajawal', sans-serif;
}

.tab-btn:hover {
    color: var(--bear-brown-dark);
    background: rgba(233, 30, 99, 0.06);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--masha-pink), var(--masha-pink-dark));
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.35);
    transform: translateY(-2px);
}

/* Content Area & Cards */
.content-wrapper {
    position: relative;
    min-height: 500px;
}

.pane {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.pane.active {
    display: block;
}

.card {
    background: var(--card-bg);
    border-radius: 25px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 2px solid #EFE7DE;
    color: var(--text-main);
    margin-bottom: 2rem;
}

.explanation-section h2, .exercise-section h2, .games-section h2 {
    color: var(--bear-brown-dark);
    font-family: 'Marhey', 'Changa', sans-serif;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.8rem;
    border-bottom: 2px dashed #EEDBCE;
    padding-bottom: 0.8rem;
}

.explanation-section p {
    font-size: 1.3rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
    color: var(--text-main);
}

.ai-message {
    background: #FFF9EE;
    color: var(--bear-brown-dark);
    border-radius: 20px;
    border: 2px solid var(--honey-gold);
    padding: 1.2rem;
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.15);
}

.concept {
    background: #F2F8F4;
    padding: 1.5rem;
    border-radius: 18px;
    border-right: 6px solid var(--forest-green);
    color: var(--bear-brown-dark);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.5rem 0;
}

/* 3D Math Cubes */
.cube {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFB300, #FF8F00);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 3px 3px 0px #B45309;
    position: relative;
    transition: transform 0.25s;
}

.cube:hover {
    transform: translateY(-4px);
    box-shadow: 5px 5px 0px #B45309;
}

.cube-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
}

/* Exercise Items */
.exercise-item {
    background: #FFFDF9;
    padding: 1.8rem;
    border-radius: 20px;
    margin-bottom: 1.4rem;
    border: 2px solid #EFE5DB;
    border-right: 6px solid var(--honey-gold);
    box-shadow: 0 4px 14px rgba(62, 39, 35, 0.05);
    transition: all 0.25s;
}

.exercise-item:hover {
    transform: translateX(-4px);
    border-color: var(--sunflower-yellow);
    box-shadow: 0 8px 20px rgba(62, 39, 35, 0.08);
}

.input-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

input[type="number"], input[type="text"] {
    width: 90px;
    padding: 0.55rem;
    border: 2px solid #E2D7CC;
    background: #FFFFFF;
    color: var(--bear-brown-dark);
    border-radius: 12px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    outline: none;
    transition: all 0.25s;
}

input[type="number"]:focus, input[type="text"]:focus {
    border-color: var(--masha-pink);
    box-shadow: 0 0 10px rgba(233, 30, 99, 0.25);
    background: #FFF9FA;
}

.check-btn {
    background: linear-gradient(135deg, var(--forest-green), #1B5E20);
    color: white;
    border: none;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.05rem;
    transition: all 0.2s;
    box-shadow: 0 3px 8px rgba(46, 125, 50, 0.25);
}

.check-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(46, 125, 50, 0.35);
}

.check-btn:active {
    transform: scale(0.96);
}

/* Place Value Table */
.place-value-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: #FFFFFF;
    border: 2px solid #EAD8C7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(62, 39, 35, 0.06);
}

.place-value-table th {
    background: linear-gradient(135deg, #5D4037, #4E342E);
    color: #FFFDF9;
    padding: 1rem;
    font-size: 1.15rem;
    font-family: 'Changa', sans-serif;
}

.place-value-table td {
    border: 1px solid #EFE5DB;
    padding: 1rem;
    text-align: center;
    vertical-align: top;
    color: var(--text-main);
    font-weight: 700;
}

.visual-repr {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    min-height: 80px;
}

.mini-cube { width: 16px; height: 16px; background: #6366f1; border-radius: 3px; }
.mini-rod { width: 8px; height: 42px; background: #E91E63; border-radius: 3px; }
.mini-square { width: 32px; height: 32px; background: #10b981; border-radius: 3px; border: 1px solid #059669; }
.mini-thousand { width: 42px; height: 42px; background: #FFB300; border-radius: 5px; box-shadow: 2px 2px 0 #D97706; }

/* Lesson Selector */
.lesson-selector {
    margin-bottom: 1.5rem;
    background: #FFFDF9;
    padding: 0.6rem 1.6rem;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #EADBCE;
    box-shadow: 0 4px 12px rgba(62, 39, 35, 0.06);
}

.lesson-selector select {
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid #D5C5B5;
    background: #FFFFFF;
    color: var(--bear-brown-dark);
    font-weight: 800;
    cursor: pointer;
    outline: none;
    font-size: 1rem;
}

/* ==========================================================================
   Achievements View (Badges)
   ========================================================================== */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.8rem;
    padding: 1.5rem 0;
}

.badge-card {
    background: #FFFFFF;
    border: 2px solid #EADBCE;
    padding: 2rem;
    border-radius: 25px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.65;
    filter: grayscale(0.8);
}

.badge-card.unlocked {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.03);
    border: 3px solid var(--honey-gold);
    box-shadow: 0 10px 25px rgba(255, 179, 0, 0.25);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%);
}

.badge-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.badge-card h3 {
    margin-bottom: 0.5rem;
    color: var(--bear-brown-dark);
    font-family: 'Marhey', 'Changa', sans-serif;
}

.badge-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ==========================================================================
   AI Bear Assistant (صديقنا الدب الذكي)
   ========================================================================== */
.ai-bot-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--honey-gold), #FF8F00);
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    font-size: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 179, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
}

.ai-bot-btn:hover {
    transform: scale(1.12) rotate(8deg);
    box-shadow: 0 15px 35px rgba(255, 179, 0, 0.7);
}

.ai-bot-modal {
    position: fixed;
    bottom: 120px;
    right: 30px;
    width: 360px;
    max-width: calc(100vw - 50px);
    height: 520px;
    background: #FFFFFF;
    border-radius: 25px;
    box-shadow: 0 18px 45px rgba(62, 39, 35, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom right;
    border: 3px solid var(--honey-gold);
}

.ai-bot-modal.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.1);
}

.ai-bot-header {
    background: linear-gradient(135deg, #4E342E, #5D4037);
    color: #FFFDF9;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--honey-gold);
}

.bot-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bot-header-icon {
    font-size: 1.6rem;
}

.ai-bot-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    font-family: 'Marhey', 'Tajawal', sans-serif;
}

.close-bot-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.close-bot-btn:hover {
    transform: scale(1.15);
    background: rgba(233, 30, 99, 0.8);
}

.ai-bot-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #FDFBF7;
}

.bot-message, .user-message {
    max-width: 85%;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 1.05rem;
    line-height: 1.5;
    animation: fadeIn 0.3s ease-out;
}

.bot-message {
    background: #FFFFFF;
    color: var(--bear-brown-dark);
    align-self: flex-start;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(62, 39, 35, 0.06);
    border: 1px solid #EADBCE;
}

.user-message {
    background: linear-gradient(135deg, var(--masha-pink), var(--masha-pink-dark));
    color: #FFFFFF;
    align-self: flex-end;
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.25);
}

.ai-bot-input-area {
    padding: 14px;
    background: #FFFFFF;
    border-top: 1px solid #EADBCE;
    display: flex;
    gap: 10px;
}

.ai-bot-input-area input {
    flex-grow: 1;
    border: 2px solid #EADBCE;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
    background: #FFFDF9;
    color: var(--bear-brown-dark);
}

.ai-bot-input-area input:focus {
    border-color: var(--honey-gold);
}

.send-bot-btn {
    background: linear-gradient(135deg, var(--honey-gold), #FF8F00);
    color: #3E2723;
    border: none;
    padding: 0 20px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    font-family: 'Changa', sans-serif;
}

.send-bot-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 179, 0, 0.35);
}

/* ==========================================================================
   Games Section Styles
   ========================================================================== */
.games-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.game-card {
    background: #FFFFFF;
    border: 3px solid #EADBCE;
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 14px rgba(62, 39, 35, 0.06);
}

.game-card:hover {
    transform: translateY(-6px);
    border-color: var(--honey-gold);
    box-shadow: 0 12px 24px rgba(255, 179, 0, 0.2);
}

.game-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
}

.game-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bear-brown-dark);
    font-family: 'Marhey', 'Changa', sans-serif;
}

.game-area {
    background: #FFFDF9;
    border: 2px solid #EADBCE;
    border-radius: 20px;
    padding: 24px;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #EFE5DB;
}

.game-question {
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    color: var(--bear-brown-dark);
    margin: 20px 0;
    font-family: 'Changa', sans-serif;
}

/* Footer */
.app-footer, .site-footer {
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 2px dashed #EADBCE;
}

.footer-link, .site-footer a {
    color: var(--bear-brown);
    text-decoration: none;
    transition: color 0.25s;
}

.footer-link:hover, .site-footer a:hover {
    color: var(--masha-pink);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 992px) {
    .header-nav-bar {
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem 1.5rem;
    }
    
    .nav-right-group {
        order: 2;
        width: 100%;
        justify-content: center;
    }
    
    .nav-title-center {
        order: 1;
    }
    
    .nav-action-left {
        top: 14px;
        left: 16px;
    }
}

@media (max-width: 600px) {
    .nav-right-group {
        flex-direction: column;
        width: 100%;
    }
    
    .nav-user-badge, .play-masha-btn {
        width: 100%;
        min-width: unset;
    }
    
    .nav-title-capsule h1 {
        font-size: 1.6rem;
    }
    
    .lesson-path-container, .books-grid {
        grid-template-columns: 1fr !important;
    }
    
    .lesson-tabs {
        width: 100%;
    }
    
    .tab-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
    
    .ai-bot-btn {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        font-size: 2.2rem;
    }
    
    .ai-bot-modal {
        bottom: 90px;
        right: 15px;
        width: calc(100vw - 30px);
        height: 60vh;
    }
}

.magic-note {
    position: absolute;
    font-size: 2.2rem;
    pointer-events: none;
    z-index: 99999;
    text-shadow: 0 0 12px rgba(255, 179, 0, 0.9), 0 0 20px rgba(233, 30, 99, 0.7);
    animation: floatNote 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes floatNote {
    0% { transform: translateY(0) scale(0.4) rotate(0deg); opacity: 0; }
    20% { opacity: 1; transform: translateY(-30px) scale(1.2) rotate(15deg); }
    70% { opacity: 1; transform: translateY(-90px) scale(1.3) rotate(-15deg); }
    100% { transform: translateY(-160px) scale(0.6) rotate(30deg); opacity: 0; }
}

/* Fullscreen Masha Roses & Bears Scatter Particles */
.masha-scatter-item {
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    user-select: none;
    will-change: transform, opacity;
    animation-name: fallAndScatter;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.scatter-rose {
    filter: drop-shadow(0 6px 14px rgba(233, 30, 99, 0.4));
}

.scatter-bear {
    filter: drop-shadow(0 8px 18px rgba(93, 64, 55, 0.45));
}

.scatter-flower {
    filter: drop-shadow(0 6px 14px rgba(255, 64, 129, 0.35));
}

.scatter-honey {
    filter: drop-shadow(0 6px 14px rgba(255, 179, 0, 0.45));
}

@keyframes fallAndScatter {
    0% {
        transform: translateY(0) translateX(0) scale(0.3) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: 1;
        transform: translateY(10vh) translateX(calc(var(--drift-x) * 0.15)) scale(1.15) rotate(calc(var(--spin-deg) * 0.15));
    }
    50% {
        opacity: 1;
        transform: translateY(50vh) translateX(calc(var(--drift-x) * 0.6)) scale(1.05) rotate(calc(var(--spin-deg) * 0.6));
    }
    85% {
        opacity: 0.9;
        transform: translateY(85vh) translateX(calc(var(--drift-x) * 0.9)) scale(0.95) rotate(calc(var(--spin-deg) * 0.9));
    }
    100% {
        transform: translateY(108vh) translateX(var(--drift-x)) scale(0.7) rotate(var(--spin-deg));
        opacity: 0;
    }
}

/* Avatar & Profile Badge Celebration State */
.badge-celebrating {
    animation: badgeCelebration 0.8s ease-in-out infinite alternate !important;
    border-color: #FF4081 !important;
    box-shadow: 0 0 25px rgba(233, 30, 99, 0.6), 0 0 45px rgba(255, 179, 0, 0.5) !important;
}

@keyframes badgeCelebration {
    0% {
        transform: scale(1) translateY(0);
    }
    100% {
        transform: scale(1.06) translateY(-4px);
    }
}

.avatar-celebrating {
    animation: avatarPulseSpin 1.2s ease-in-out infinite alternate !important;
    border-color: #FF4081 !important;
    box-shadow: 0 0 20px #FF4081, 0 0 35px #FFB300 !important;
}

.avatar-celebrating .avatar-star-badge {
    animation: starSpin 0.6s linear infinite !important;
}

@keyframes avatarPulseSpin {
    0% {
        transform: rotate(-6deg) scale(1.05);
    }
    50% {
        transform: rotate(6deg) scale(1.18);
    }
    100% {
        transform: rotate(-6deg) scale(1.05);
    }
}

@keyframes starSpin {
    from {
        transform: rotate(0deg) scale(1.3);
    }
    to {
        transform: rotate(360deg) scale(1.3);
    }
}