@charset "UTF-8";

/* إعدادات تصفير المسافات الافتراضية للمتصفح لضمان تماسك الموقع */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #000000;
}

/* القواعد الهيكلية المشتركة للأشرطة الـ 32 لمنع تداخل الطبقات عمودياً */
.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* الحاوية الآمنة بعرض ثابت وموسط تلقائياً لحماية تموضع الصور عند تكبير وتصغير المتصفح */
.section .container {
    position: relative;
    width: 880px;
    margin: 0 auto;
    height: 100%;
}

/* القواعد الافتراضية للملصقات لتعمل بنظام التموضع المطلق الحر */
.section .graphic {
    position: absolute;
    display: block;
}

/* التنسيق الموحد لجميع العبارات والنصوص الكلاسيكية ريترو بخط المطور */
.section .text {
    position: absolute;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-transform: uppercase;
}

/* =========================================================================
   التحليل الحرفي للخلفيات، التكرار والأبعاد المأخوذة من ملفك الأصلي للمطور
   ========================================================================= */

/* --- شريط 1: الفضاء الخارجي ---
   الارتفاع: 660 بكسل
   الخلفية المضافة بيدك: `images/blue.png`
   نوع التكرار: [مكررة أفقياً وعمودياً repeat] لملء المساحة. */
.section.id-1 {
    background-image: url(images/blue.png)
}

.section.id-1 {
    height: 360px;
    top: 0;
    z-index: 100
}

.section.id-1.ld .graphic.id-1 {
    background-image: url(../img/content/1/1.png)
}

.section.id-1 .graphic.id-1 {
    width: 84px;
    height: 84px;
    left: 8%;
    top: 90px
}

/* --- شريط 2: الغيوم والسماء ---
   الارتفاع: 648 بكسل
   الخلفية المضافة بيدك: `images/tile.jpg`
   نوع التكرار: [مكررة repeat]. */
.section.id-2 {
    height: 648px;
    background-image: url('images/tile.jpg');
    background-repeat: repeat;
}

/* --- شريط 3: تقنيات الكومبيوتر والـ ريترو تك ---
   الارتفاع: 720 بكسل
   الخلفية المضافة بيدك: `images/fffsf.png`
   نوع التكرار: [مكررة repeat]. */
.section.id-3 {
    height: 720px;
    background-image: url('images/fffsf.png');
    background-repeat: repeat;
}

/* --- شريط 4: السايبيربانك ---
   الارتفاع: 432 بكسل
   الخلفية المضافة بيدك: `images/pink.png`
   نوع التكرار: [مكررة repeat]. */
.section.id-4 {
    height: 432px;
    background-image: url('images/pink.png');
    background-repeat: repeat;
}

/* --- شريط 5: شبكة النيون وألعاب الثمانينات ---
   الارتفاع: 684 بكسل
   الخلفية المضافة بيدك: `images/pink2.jpg`
   نوع التكرار: [مكررة repeat]. */
.section.id-5 {
    height: 684px;
    background-image: url('images/pink2.jpg');
    background-repeat: repeat;
}

/* --- شريط 6: القلعة القوطية ومصاصي الدماء ---
   الارتفاع: 624 بكسل
   الخلفية المضافة بيدك: `images/bger.jpg`
   نوع التكرار: [مكررة repeat]. */
.section.id-6 {
    height: 624px;
    background-image: url('images/bger.jpg');
    background-repeat: repeat;
}

/* --- شريط 7: الغابة الخيالية والأسطورية ---
   الارتفاع: 648 slot
   الخلفية المضافة بيدك: `images/pink2.png`
   نوع التكرار: [مكررة repeat]. */
.section.id-7 {
    height: 648px;
    background-image: url('images/pink2.png');
    background-repeat: repeat;
}

/* --- شريط 8: العصر الفرعوني وأسرار مصر ---
   الارتفاع: 504 بكسل
   الخلفية المضافة بيدك: `images/hearts.gif` (خلفية قلوب متحركة مكررة)
   نوع التكرار: [مكررة repeat]. */
.section.id-8 {
    height: 504px;
    background-image: url('images/hearts.gif');
    background-repeat: repeat;
}

/* --- شريط 9: الصحراء والواحات الحارة ---
   الارتفاع: 328 بكسل
   الخلفية المضافة بيدك: `images/daq.png`
   نوع التكرار: [مكررة repeat]. */
.section.id-9 {
    height: 328px;
    background-image: url('images/daq.png');
    background-repeat: repeat;
}

/* --- شريط 10: العصور الوسطى والفرسان ---
   الارتفاع: 600 بكسل
   الخلفية المضافة بيدك: `images/superficail.png`
   نوع التكرار: [مكررة repeat]. */
.section.id-10 {
    height: 600px;
    background-image: url('images/superficail.png');
    background-repeat: repeat;
}

/* --- شريط 11: المخلوقات الفضائية الكلاسيكية ---
   الارتفاع: 700 بكسل
   الخلفية المضافة بيدك: `images/dwater.png`
   نوع التكرار: [مكررة repeat] مع تفعيل خط Comic Sans الفريد لهذا القسم. */
.section.id-11 {
    height: 700px;
    background-image: url('images/dwater.png');
    background-repeat: repeat;
    font-family: 'Comic Sans MS', sans-serif;
}

/* --- شريط 12: البراكين والحمم ---
   الارتفاع: 756 بكسل
   الخلفية المضافة بيدك: `images/movingwater.gif` (خلفية مياه متحركة)
   نوع التكرار: [مكررة repeat]. */
.section.id-12 {
    height: 756px;
    background-image: url('images/movingwater.gif');
    background-repeat: repeat;
}

/* --- بقية الأشرطة من 13 إلى 20 المستخرجة حرفياً بالترتيب مع خلفياتك الحالية المضافة بيدك --- */
.section.id-13 { 
    height: 504px; 
    background-image: url('images/piko.png');
    background-repeat: repeat;
}
.section.id-14 { 
    height: 504px; 
    background-image: url('images/skyu.png');
    background-repeat: repeat;
}
.section.id-15 { 
    height: 504px; 
    background-image: url('images/skyir.png');
    background-repeat: repeat;
}
.section.id-16 { 
    height: 648px; 
    background-image: url('images/ring.png');
    background-repeat: repeat;
}
.section.id-17 { 
    height: 648px; 
    background-image: url('images/177.png');
    background-repeat: repeat;
}
.section.id-18 { 
    height: 648px; 
    background-image: url('images/188.png');
    background-repeat: repeat;
}
.section.id-19 { 
    height: 540px; 
    background-image: url('images/199.png');
    background-repeat: repeat;
}
.section.id-20 { 
    height: 540px; 
    background-image: url('images/200.png');
    background-repeat: repeat;
}

/* --- شريط 21: قلب الأرض وعالم أجارثا الداخلي والمخفي الأثري ---
   الارتفاع الفعلي للمطور: 540 بكسل
   الخلفية الحالية المضافة بيدك: `images/211.png`
   نوع التكرار: [مكررة repeat] لملء عالم أجارثا بالكامل بالنمط المختار. */
.section.id-21 { 
    height: 540px; 
    background-image: url('images/211.png');
    background-repeat: repeat;
}

/* --- شريط 22: بيئة الديناصورات القديمة --- */
.section.id-22 { 
    height: 648px; 
    background-image: url('images/movingwater.gif');
    background-repeat: repeat;
}

/* البيئات من 23 إلى 31 مجهزة بأبعادها الصافية لتضع خلفياتك بداخلها حبة حبة لتعلم الهندسة الهيكلية */
.section.id-23 { height: 648px; background-color: #f0f8ff; } 
.section.id-24 { height: 648px; background-color: #1c1c1c; } 
.section.id-25 { height: 648px; background-color: #2b1601; } 
.section.id-26 { height: 648px; background-color: #000000; } 
.section.id-27 { height: 648px; background-color: #ffe6ff; } 
.section.id-28 { height: 648px; background-color: #f0ffff; } 
.section.id-29 { height: 648px; background-color: #141414; } 
.section.id-30.ld { height: 612px; background-color: #02240d; } 
.section.id-31 { height: 648px; background-color: #080808; } 

/* --- شريط 32: الفراغ الأسود ونهاية الرحلة الكبرى للموقع ---
   الارتفاع الأصلي الثابت: 1044 بكسل (طويل جداً عمودياً لإعطاء إيحاء بصري بالفراغ والدخول لغرفة الكنز)
   الخلفية الحالية المضافة بيدك: `images/movingwater.gif` مكررة. */
.section.id-32 {
    height: 1044px;
    background-image: url('images/movingwater.gif');
    background-repeat: repeat;
}

/* =========================================================================
   سر تموضع وأحجام الـ GIFs والـ Sprites الأصلية الدقيقة داخل الحاوية بالبكسل
   ========================================================================= */

/* [إحداثيات جرافيكس الشريط الأول - الفضاء]:
   هنا تجد كيف يضع المطور الـ GIFs في مكانها الأصلي عبر جلب ملف سبرايت مجمع `../img/sprites/sprite1.png` 
   وقص جزء محدد منه عبر الأبعاد بالبكسل (background-position)، لكي يظهر ملصق ريترو دقيق دون عشوائية قياسات */
.section.id-1 .text.id-1 { top: 300px; left: 240px; font-size: 32px; color: #ffff00; }

.section.id-1.ld .graphic.id-6 {
    background-image: url(images/6.png)
}

.section.id-1 .graphic.id-6 {
    width: 320px;
    height: 200px;
    left: 30%;
    top: 159px;
    background-size: contain
}
.section.id-1.ld .graphic.id-10 {
    background-image: url(images/sprite1.png);
    background-position: 0 0;
    width: 127px;
    height: 127px
}

.section.id-1.ld .graphic.id-12 {
    background-image: url(images/sprite1.png);
    background-position: -367px -63px;
    width: 20px;
    height: 19px
}

.section.id-1.ld .graphic.id-13 {
    background-image: url(images/sprite1.png);
    background-position: -327px 0;
    width: 63px;
    height: 63px
}

.section.id-1.ld .graphic.id-14 {
    background-image: url(images/sprite1.png);
    background-position: -195px -127px;
    width: 112px;
    height: 80px
}

.section.id-1.ld .graphic.id-15 {
    background-image: url(images/sprite1.png);
    background-position: -327px -63px;
    width: 40px;
    height: 41px
}

.section.id-1.ld .graphic.id-17 {
    background-image: url(images/sprite1.png);
    background-position: -168px -225px;
    width: 84px;
    height: 84px
}

.section.id-1.ld .graphic.id-19 {
    background-image: url(images/sprite1.png);
    background-position: 0 -127px;
    width: 98px;
    height: 98px
}

.section.id-1.ld .graphic.id-2 {
    background-image: url(images/sprite1.png);
    background-position: -327px -104px;
    width: 29px;
    height: 29px
}

.section.id-1.ld .graphic.id-3 {
    background-image: url(images/sprite1.png);
    background-position: -252px -225px;
    width: 75px;
    height: 53px
}

.section.id-1.ld .graphic.id-4 {
    background-image: url(images/sprite1.png);
    background-position: -98px -127px;
    width: 97px;
    height: 97px
}

.section.id-1.ld .graphic.id-5 {
    background-image: url(images/sprite1.png);
    background-position: -84px -225px;
    width: 84px;
    height: 84px
}

.section.id-1.ld .graphic.id-8 {
    background-image: url(images/sprite1.png);
    background-position: -127px 0;
    width: 200px;
    height: 80px
}


.section.id-1 .graphic.id-2 { 
    top: 45px; left: 512px; width: 128px; height: 128px; 
    background-image: url('../img/sprites/sprite1.png'); background-position: -64px 0px; 
} /* الكوكب الصغير الأصلي للمطور */

.section.id-1 .graphic.id-3 { 
    top: 420px; left: 380px; width: 48px; height: 48px; 
    background-image: url('../img/sprites/sprite1.png'); background-position: -192px 0px; 
} /* النجوم اللامعة الأصلية للمطور */

/* [إحداثيات جرافيكس الشريط الثاني - الغيوم والسماء] */
.section.id-2 .graphic.id-1 { 
    top: 110px; left: 620px; width: 90px; height: 90px; 
    background-image: url('../img/sprites/sprite2.png'); background-position: 0px 0px; 
}
.section.id-2 .graphic.id-2 { 
    top: 380px; left: 110px; width: 120px; height: 120px; 
    background-image: url('../img/sprites/sprite2.png'); background-position: -90px 0px; 
}

/* [إحداثيات جرافيكس الشريط الثالث - الكمبيوتر والتقنية] */
.section.id-3 .text.id-1 { top: 220px; left: 290px; color: #00ff00; font-size: 24px; }
.section.id-3 .graphic.id-1 { 
    top: 400px; left: 410px; width: 80px; height: 80px; 
    background-image: url('../img/sprites/sprite3.png'); background-position: 0px 0px; 
}

/* [إحداثيات جرافيكس الشريط الحادي عشر - الفضائيين الكلاسيكيين] */
.section.id-11 .text.id-1 { top: 150px; left: 260px; color: #00ff00; font-size: 26px; }
.section.id-11 .graphic.id-1 { 
    top: 320px; left: 380px; width: 110px; height: 110px; 
    background-image: url('../img/sprites/sprite11.png'); background-position: 0px 0px; 
}

/* [إحداثيات غرفة الكنز والنهاية السرية في الشريط 32] */
.section.id-32 .treasure-room {
    position: absolute;
    top: 400px;
    left: 190px;
    width: 500px;
    text-align: center;
}
.section.id-32 .treasure-room .text {
    position: relative;
    font-size: 36px;
    color: #ffffff;
}

/* =========================================================================
   تذييل الصفحة الأخير والمقبرة الرقمية لوقوع النظام (Page End) - الارتفاع: 432 بكسل 
   ========================================================================= */
.page-end {
    position: relative;
    width: 100%;
    height: 432px;
    background-color: #000000;
    text-align: center;
    padding-top: 180px;
}
.page-end .text {
    position: static; /* ترك النص يتدفق طبيعياً لكي يترتب عمودياً تحت بعضه بمسافات مارجن */
    color: #ff0000;
    width: 100%;
    margin-bottom: 24px;
}
.page-end .text.id-2 { font-size: 40px; font-weight: bold; }
.page-end .text.id-3 { font-size: 22px; color: #333333; }