@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;
    height: 100%;
    margin: 0 auto;
    transform-origin: top center;
}

/* شاشات الهواتف والأجهزة الصغيرة (أقل من 880 بكسل) للأشرطة من 2 إلى 32 */
@media (max-width: 880px) {
    .section .container {
        transform: scale(calc(100vw / 880)); 
        left: 0;
        margin: 0;
    }
}

/* القواعد الافتراضية للملصقات لتعمل بنظام التموضع المطلق الحر */
.section .graphic {
    position: absolute;
    display: block;
    z-index: 150; /* رفع الطبقة هنا لتكون الـ GIFs دائماً فوق الخلفيات مكررة الـ repeat */
}

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

/* =========================================================================
   التحليل الحرفي المصحح للخلفيات والـ GIFs
   ========================================================================= */

/* --- شريط 1: الفضاء الخارجي (اللوحة المفتوحة العملاقة الجديدة) --- */
.section.id-1 {
    background-image: url(images/blue.png);
    height: 360px;
    top: 0;
    z-index: 10;
}

/* ربط صورة الـ gif بالكلاس وتحرير موقعه ليعتمد على كامل الشاشة */
.section.id-1 .graphic.id-1 {
    background-image: url(images/you.gif);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 84px;
    left: 11vw !important; /* خدعة الـ vw ليظهر بأقصى اليسار في الكمبيوتر وينكمش في الهاتف */
    top: 110px;  
}

/* =========================================================================
   1. أمر موحد لجميع جرافيكس الشريط الأول لاستدعاء لوحة السبرايت دفعة واحدة
   ========================================================================= */
.section.id-1 .graphic {
    background-image: url('images/sprite1.png');
    background-repeat: no-repeat;
}

/* =========================================================================
   2. توزيع العناصر التي أضفتها بالـ vw المرن لمنع الاختفاء في الهاتف وكسب مساحات هائلة
   ========================================================================= */

.section.id-1 .text.id-1 { 
    top: 300px; 
    left: 50%; 
    transform: translateX(-50%); /* جعل النص الرئيسي موسط دائماً في كل الشاشات */
    font-size: 32px; 
    color: #ffff00; 
}

.section.id-1 .graphic.id-10 {
    background-position: 0px 0px;
    width: 127px;
    height: 127px;
    left: 20vw !important; /* يتحرك بنسبة وتناسب مع عرض الشاشة */
    top: 20px;
}

.section.id-1 .graphic.id-12 {
    background-position: -367px -63px;
    width: 20px;
    height: 19px;
    left: 85vw !important; /* أقصى اليمين في الشاشات الكبيرة ويقترب في الهاتف */
    top: 310px !important;
}


.section.id-1 .graphic.id-14 {
    background-position: -195px -127px;
    width: 112px;
    height: 80px;
    left: 45vw !important;
    top: 50px;
}

.section.id-1 .graphic.id-15 {
    background-position: -327px -63px;
    width: 40px;
    height: 41px;
    left: 65vw !important;
    top: 80px;
}

.section.id-1 .graphic.id-17 {
    background-position: -168px -225px;
    width: 84px;
    height: 84px;
    left: 80vw !important;
    top: 170px;
}

.section.id-1 .graphic.id-19 {
    background-position: 0px -127px;
    width: 98px;
    height: 98px;
    left: 16vw !important;
    top: 220px;
}

/* الكوكب الصغير */
.section.id-1 .graphic.id-2 {
    background-position: -327px -104px;
    width: 29px;
    height: 29px;
    left: 80vw !important;
    top: 45px;
}

/* النجوم اللامعة */
.section.id-1 .graphic.id-3 {
    background-position: -252px -225px;
    width: 75px;
    height: 53px;
    left: 40vw !important;
    top: 5px; 
}

.section.id-1 .graphic.id-4 {
    background-position: -98px -127px;
    width: 97px;
    height: 97px;
    left: 3vw !important; /* يخرج بأمان عند حافة اليسار الهائلة */
    top: 200px !important;
}

.section.id-1 .graphic.id-5 {
    background-position: -84px -225px;
    width: 84px;
    height: 84px;
    left: 60vw !important; 
    top: 200px !important;
}

.section.id-1 .graphic.id-8 {
    background-position: -127px 0px;
    width: 200px;
    height: 80px;
    left: 70vw !important; 
    top: 80px !important;
}
/* 💡 عنصر الـ gif المستقل */
.section.id-1 .graphic.id-13 {
    background-image: url('images/greeny.gif') !important;
    width: 80px;
    height: 90px;
    left: 87vw !important; 
    top: 50px; 
}

.section.id-1 .graphic.id-a {
    background-image: url('https://plutoo.neocities.org/images/aielen.gif') !important;
    width: 125px;
    height: 85px;
    left: 70vw !important; 
    top: 240px; 
}

.section.id-1 .graphic.id-b {
    background-image: url(images/stars.gif) 
}

.section.id-1 .graphic.id-b {
    width: 48px;
    height: 48px;
    left: 30%;
    top: 159px;
    background-size: contain
}

.section.id-1 .graphic.id-c {
    background-image: url('images/rocket.gif') !important;
    width: 106px;
    height: 82px;
    left: 35vw !important; 
    top: 100px; 
}

.section.id-1 .graphic.id-d {
    background-image: url('images/moona.gif') !important;
    width: 168px;
    height: 160px;
    left: 35vw !important; 
    top: 190px; 
}

/* =========================================================================
   أكواد بقية الأشرطة المغلقة لحمايتها وصيانة أبعادها كما هي
   ========================================================================= */

/* --- شريط 2: الغيوم والسماء --- */
.section.id-2 {
    height: 360px;
    background-image: url('images/tile.jpg');
    background-repeat: repeat;
}

/* --- شريط 3: تقنيات الكومبيوتر والـ ريترو تك --- */
.section.id-3 {
    height: 360px;
    background-image: url('images/fffsf.png');
    background-repeat: repeat;
}

/* --- شريط 4: السايبيربانك --- */
.section.id-4 {
    height: 360px;
    background-image: url('images/pink.png');
    background-repeat: repeat;
}

/* --- شريط 5: شبكة النيون وألعاب الثمانينات --- */
.section.id-5 {
    height: 360px;
    background-image: url('images/pink2.jpg');
    background-repeat: repeat;
}

/* --- شريط 6: القلعة القوطية ومصاصي الدماء --- */
.section.id-6 {
    height: 360px;
    background-image: url('images/bger.jpg');
    background-repeat: repeat;
}

/* --- شريط 7: الغابة الخيالية والأسطورية --- */
.section.id-7 {
    height: 360px;
    background-image: url('images/pink2.png');
    background-repeat: repeat;
}

/* --- شريط 8: العصر الفرعوني وأسرار مصر --- */
.section.id-8 {
    height: 504px;
    background-image: url('images/hearts.gif');
    background-repeat: repeat;
}

/* --- شريط 9: الصحراء والواحات الحارة --- */
.section.id-9 {
    height: 328px;
    background-image: url('images/daq.png');
    background-repeat: repeat;
}

/* --- شريط 10: العصور الوسطى والفرسان --- */
.section.id-10 {
    height: 360px;
    background-image: url('images/superficail.png');
    background-repeat: repeat;
}

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

/* --- شريط 12: البراكين والحمم --- */
.section.id-12 {
    height: 180px;
    background-image: url('images/movingwater.gif');
    background-repeat: repeat;
}

.section.id-13 { height: 355px; background-image: url('images/piko.png'); background-repeat: repeat; }
.section.id-14 { height: 280px; 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; }
.section.id-21 { height: 540px; background-image: url('images/211.png'); background-repeat: repeat; }
.section.id-22 { height: 648px; background-image: url('images/movingwater.gif'); background-repeat: repeat; }

.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 { height: 612px; background-color: #02240d; } 
.section.id-31 { height: 648px; background-color: #080808; } 

.section.id-32 {
    height: 1044px;
    background-image: url('images/movingwater.gif');
    background-repeat: repeat;
}

/* جرافيكس الأشرطة الجانبية المتبقية */
.section.id-2 .graphic.id-1 { 
    background-image: url('images/sprite2.png');
    background-position: 0px 0px; 
    width: 90px; 
    height: 90px; 
    top: 110px; 
    left: 620px; 
}
.section.id-2 .graphic.id-2 { 
    background-image: url('images/sprite2.png');
    background-position: -90px 0px; 
    width: 120px; 
    height: 120px; 
    top: 380px; 
    left: 110px; 
}
.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; 
}
.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 {
    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; }