:root {
    --bg-light-yellow: #fdfcf0; /* الخلفية الصفراء السكرية */
    --light-blue: #a2d2ff;      /* الأزرق الفاتح المطلوب */
    --deep-blue: #2775b6;       /* أزرق أغمق قليلاً للنصوص لسهولة القراءة */
}

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

body {
    background-color: var(--bg-light-yellow);
    background-image: radial-gradient(var(--light-blue) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    height: 100vh;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

.main-card {
    background: rgba(255, 255, 255, 0.95);
    border: 5px solid white;
    border-radius: 40px; padding: 2.5rem 1.5rem;
    width: 90%; max-width: 370px; text-align: center;
    box-shadow: 0 15px 35px rgba(162, 210, 255, 0.3);
    z-index: 10; position: relative;
}

/* نصوص الصفحة الأولى بالأزرق */
.blue-title { color: var(--deep-blue); font-size: 1.8rem; font-weight: 900; margin-bottom: 10px; }
.blue-subtitle { color: var(--deep-blue); font-size: 1rem; font-weight: 600; opacity: 0.9; margin-bottom: 2rem; }

.hero-icon { font-size: 5.5rem; margin-bottom: 1rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.joy-btn {
    background: var(--light-blue); color: white; border: none;
    width: 100%; padding: 1.2rem; border-radius: 20px;
    font-weight: 800; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 6px 0 #89b8e6; transition: 0.2s;
    display: flex; justify-content: center; align-items: center; gap: 10px;
}
.joy-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #89b8e6; }

/* شبكة الأرقام الباستيل */
.grid-title { font-size: 1.3rem; margin-bottom: 1.5rem; color: var(--deep-blue); font-weight: 800; }
.boxes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.box-item {
    aspect-ratio: 1/1; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 900; color: white;
    cursor: pointer; transition: 0.3s; border: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.box-item:active { transform: scale(0.9); opacity: 0.8; }

/* الشاشة الثالثة الأسطورية */
.celebration-icon-large { font-size: 6.5rem; margin-bottom: 0.5rem; display: block; }
.message-box {
    background: #f0f7ff; padding: 1.5rem; border-radius: 25px;
    border: 3px dashed var(--light-blue); margin: 1.5rem 0;
}
#greetingText { color: var(--deep-blue); font-size: 1.25rem; font-weight: 700; line-height: 1.7; }

.back-btn {
    background: transparent; color: var(--deep-blue); border: 2px solid var(--light-blue);
    width: 100%; padding: 0.8rem; border-radius: 15px; font-weight: 700; cursor: pointer;
}

/* تأثيرات مطر النجوم */
#starShower { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 1; }
.falling-star { position: absolute; font-size: 22px; animation: fall 1.2s linear forwards; }
@keyframes fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}

.hidden { display: none; }
.content-fade { animation: popIn 0.4s ease-out; }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

footer { position: absolute; bottom: 1.5rem; font-size: 0.8rem; color: var(--deep-blue); font-weight: bold; opacity: 0.6; }


/* --- تعديلات خاصة بالشاشات الكبيرة (لابتوب وكمبيوتر) --- */
@media (min-width: 768px) {
    .main-card {
        max-width: 500px; /* جعل البطاقة أعرض في اللابتوب */
        padding: 4rem 3rem; /* زيادة المسافات الداخلية للفخامة */
        border-width: 8px; /* تسميك الإطار الأبيض */
    }

    .hero-icon {
        font-size: 7rem; /* تكبير أيقونة الهدية */
    }

    .blue-title {
        font-size: 2.5rem; /* تكبير العنوان */
    }

    .blue-subtitle {
        font-size: 1.2rem; /* تكبير النص الفرعي */
    }

    .boxes-grid {
        gap: 20px; /* زيادة المسافات بين المربعات */
    }

    .box-item {
        font-size: 1.8rem; /* تكبير أرقام الصناديق */
        border-radius: 25px;
    }

    .celebration-icon-large {
        font-size: 8rem; /* تكبير أيقونة المعايدة النهائية */
    }

    #greetingText {
        font-size: 1.5rem; /* جعل نص المعايدة أوضح وأكبر */
    }
}