/* --- 1. إعدادات الصفحة --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: radial-gradient(circle at center, #1a0b2e 0%, #000000 100%);
    color: white;
    font-family: 'Cairo', sans-serif;
    height: 100vh; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
}

/* الخلفية */
.falling-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.fall-item { position: absolute; top: -10%; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(110vh) rotate(360deg); } }

/* زرار الخروج */
.close-btn {
    position: fixed; top: 20px; left: 20px; width: 45px; height: 45px;
    background: rgba(255,255,255,0.1); border-radius: 50%; display: flex;
    justify-content: center; align-items: center; color: white; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2); z-index: 2000;
}
.close-btn:hover { background: #ff00cc; border-color: #ff00cc; transform: rotate(180deg); }

/* --- 2. المراحل والكروت --- */
.stage {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: 0.8s; padding: 20px;
}
.stage.active { opacity: 1; pointer-events: all; }

/* الكارت البنفسجي (البرواز الأساسي لكل المراحل بما فيها القفل) */
/* تنسيق البرواز البنفسجي الجديد */
.purple-card {
    background: rgba(40, 20, 60, 0.7); /* خلفية شفافة أكتر */
    border: 1px solid rgba(214, 0, 255, 0.5); /* حدود أرفع وأنعم */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(214, 0, 255, 0.3); /* ضل ناعم ومتوهج */
    border-radius: 20px; /* زوايا دائرية */
    padding: 30px; /* مساحة داخلية */
    text-align: center;
    max-width: 450px;
    width: 90%;
    backdrop-filter: blur(15px); /* تأثير ضبابي قوي للخلفية */
    position: relative;
    overflow: hidden; /* عشان أي حاجة تخرج براه تختفي */
}
/* --- 3. تعديل الرسالة (زي الصورة) --- */
.message-scroll-box {
    background: rgba(0, 0, 0, 0.3); /* خلفية غامقة للنص */
    border-radius: 10px;
    padding: 15px;
    text-align: right;
    height: 180px; /* ارتفاع ثابت */
    overflow-y: auto; /* سكرول */
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl; /* عشان السكرول يجي شمال */
}

/* شكل السكرول بار */
.message-scroll-box::-webkit-scrollbar { width: 6px; }
.message-scroll-box::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 10px; }
.message-scroll-box::-webkit-scrollbar-thumb { background: #d600ff; border-radius: 10px; }

.message-text {
    color: #fff; font-size: 0.95rem; line-height: 1.8; font-weight: bold;
}

/* --- 4. الصورة والنار الواحدة --- */
.image-container {
    position: relative; width: 100%; margin-top: 10px;
    cursor: pointer; border-radius: 15px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.char-img { width: 100%; display: block; }

/* مكان النار (ظبط الـ left و bottom براحتك هنا) */
.single-flame-container {
    position: absolute;
    bottom: 53%;  /* ارفع ونزل من هنا */
    left: 80%;    /* يمين وشمال من هنا */
    transform: translate(-50%, 0);
    z-index: 10;
}

.flame {
    width: 20px; height: 30px;
    background: radial-gradient(ellipse at bottom, #ffd700, #ff6b00, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(1px);
    animation: flicker 0.1s infinite alternate;
    box-shadow: 0 0 20px #ff6b00;
}
.flame.out { display: none; }

@keyframes flicker {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.1) skewX(2deg); opacity: 0.9; }
}

/* --- 5. فرقعة القرطاس (لفوق) --- */
.popper-particle {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    z-index: 1000;
    pointer-events: none;
}

/* --- 6. باقي العناصر --- */
#lock-screen { z-index: 100; opacity: 1; pointer-events: all; }

.birthday-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 215, 0, 0.05); border: 1px solid #ffd700;
    padding: 8px 25px; border-radius: 50px; margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
.gift-icon { color: #ffd700; animation: pulse 1.5s infinite; }

input {
    width: 100%; padding: 15px; border-radius: 50px; border: 2px solid #bd00ff;
    background: rgba(20, 0, 30, 0.8); color: white; text-align: center;
    font-family: 'Cairo'; font-size: 1rem; outline: none; margin-bottom: 20px;
}

.unlock-btn, .action-btn {
    width: 100%; padding: 12px; border-radius: 50px;
    background: linear-gradient(90deg, #bd00ff, #ff00cc);
    color: white; font-weight: bold; border: none; cursor: pointer;
    box-shadow: 0 5px 20px rgba(189, 0, 255, 0.4); transition: 0.3s;
}
.action-btn { width: auto; padding: 12px 40px; margin-top: 15px; }
.action-btn:hover, .unlock-btn:hover { transform: scale(1.05); }

.error-msg {
    color: #ff3333; margin-top: 15px; font-weight: bold;
    display: none; animation: shake 0.3s;
}

/* الفيديو */
/* --- تعديل الفيديو ليكون بالعرض وتلقائي --- */
.phone-frame {
    width: 90%;              /* العرض مرن (ياخد 90% من عرض الشاشة) */
    max-width: 800px;        /* أقصى عرض عشان ميكبرش أوي في الشاشات الكبيرة */
    aspect-ratio: 16 / 9;    /* يثبت الشكل مستطيل بالعرض زي السينما */
    height: auto;            /* الطول يتظبط لوحده */

    background: #000;
    border: 4px solid #333;
    border-radius: 20px;     /* تدويرة أقل شوية تناسب الشاشات العريضة */
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 50px rgba(189, 0, 255, 0.4);

    /* سنترة الفيديو */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-content {
    width: 100%;
    height: 100%;
    object-fit: contain; /* يظهر الفيديو بالكامل جوه البرواز من غير قص */
}

/* الكتابة (زي ما هي) */
.typing-box { min-height: 150px; text-align: center; direction: rtl; padding: 20px; }
#typewriter-msg { font-size: 1.4rem; line-height: 1.8; color: #ffd700; font-weight: bold; }
.typing-cursor::after { content: '|'; color: #ff00cc; animation: blink 1s infinite; }

/* الألبوم (زي ما هو) */
.album-container {
    width: 90%; max-width: 450px; height: 85vh;
    background: rgba(20, 10, 30, 0.95); border: 2px solid #bd00ff;
    border-radius: 30px; display: flex; flex-direction: column; overflow: hidden;
}
.scroll-area { flex: 1; overflow-y: auto; padding: 20px; scrollbar-width: none; }
.memory-card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(189, 0, 255, 0.3);
    border-radius: 15px; padding: 15px; margin-bottom: 25px;
    opacity: 0; transform: translateY(30px); transition: 0.6s ease-out;
}
.memory-card.show { opacity: 1; transform: translateY(0); }
.img-box { height: 280px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }

/* المرسل */
.sender-card { border-color: #ffd700; box-shadow: 0 0 40px rgba(255, 215, 0, 0.3); padding: 0; overflow: hidden; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }