/* =========================================
   1. لوحة الألوان والتنسيق العام
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;800&display=swap');

:root {
    --sany-yellow: #FFD700;
    --palette-cream: #FDF5E6; 
    --palette-blue: #AED6F1;
    
    --road-soil-dark: #5D534A;
    --road-soil-light: #8D837A;
    
    --night-top: #1a1a16;
    --night-bot: #4a4a3a;
}

body {
    margin: 0;
    background-color: #111;
    font-family: 'Tajawal', sans-serif;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#game-container {
    position: relative;
    width: 100vw; 
    height: 100vh; height: 100dvh;
    background: linear-gradient(to bottom, var(--palette-blue), var(--palette-cream));
    overflow: hidden;
    transition: background 1s ease;
}

body.dark-mode #game-container {
    background: linear-gradient(to bottom, var(--night-top), var(--night-bot));
}
body.dark-mode #sun-visual {
    background: #fffae3;
    box-shadow: 0 0 30px rgba(255, 250, 227, 0.6);
}

/* =========================================
   2. العناصر الثابتة
   ========================================= */
#mode-btn {
    position: absolute; top: 20px; left: 20px;
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; z-index: 2000;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#sun-visual {
    position: absolute; top: 40px; right: 10%;
    width: 90px; height: 90px;
    background: var(--sany-yellow);
    border-radius: 50%;
    box-shadow: 0 0 60px var(--sany-yellow);
    z-index: 1; transition: all 1s ease;
}

#stars-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 60%;
    z-index: 0;
}
.star {
    position: absolute; background: #fff; border-radius: 50%;
    box-shadow: 0 0 5px #fff;
    animation: twinkle 2s infinite alternate;
}

/* الطريق */
#road {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 130px;
    background: var(--road-soil-dark);
    border-top: 4px dashed rgba(255,255,255,0.2);
    z-index: 5; overflow: hidden;
    box-shadow: inset 0 15px 30px rgba(0,0,0,0.3);
}
.road-detail {
    position: absolute; bottom: 0; width: 100%; height: 100%;
    background-image: radial-gradient(var(--road-soil-light) 20%, transparent 22%);
    background-size: 80px 80px;
    opacity: 0.4;
}

/* =========================================
   3. اللاعب
   ========================================= */
#player {
    position: absolute;
    bottom: 120px;
    left: 15%;
    width: 150px; height: 150px;
    z-index: 20;
    will-change: transform, bottom;
}

svg { width: 100%; height: 100%; overflow: visible; }
g, path { transform-box: fill-box; }

/* الحالات */
#View_Front, #View_Back, #Mascot_Car_Master, #View_Side { display: none; }
.state-idle #View_Front { display: block !important; }
.state-idle #Petals_Ring { transform-origin: center; animation: spinPetals 10s linear infinite; }
.state-idle #View_Front { transform-origin: bottom; animation: breathe 3s ease-in-out infinite; }

.state-running #View_Side { display: block !important; }
.state-running #Leg_Near { transform-origin: top center; animation: runLegs 0.2s linear infinite alternate; }
.state-running #Leg_Far { transform-origin: top center; animation: runLegs 0.2s linear infinite alternate-reverse; }
.state-running #Arm_Near { transform-origin: 10% 10%; animation: swingArm 0.2s linear infinite alternate; }
.state-running #Body_Side { animation: runBounce 0.2s linear infinite alternate; }

.state-car #Mascot_Car_Master { display: block !important; }
.state-car #Wheel_Front, .state-car #Wheel_Back { transform-origin: center; animation: spin 0.05s linear infinite; }
.state-car #Car_Chassis { animation: carRumble 0.1s linear infinite alternate; }

/* =========================================
   4. العناصر
   ========================================= */
.game-object {
    position: absolute; display: flex; align-items: center; justify-content: center;
    font-size: 55px; z-index: 15; will-change: left;
}
.item-good {
    filter: drop-shadow(0 0 20px var(--sany-yellow)) drop-shadow(0 0 5px #fff);
    animation: float 1s infinite alternate, pulseGlow 1.5s infinite alternate;
}
.item-bad { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)); }

.pos-ground { bottom: 135px; } 
.pos-air { bottom: 260px; }

.particle { position: absolute; width: 10px; height: 10px; background: var(--sany-yellow); border-radius: 50%; pointer-events: none; animation: pop 0.6s ease-out forwards; z-index: 50; }
.dust-particle {
    position: absolute; width: 12px; height: 12px; background: var(--road-soil-light);
    border-radius: 50%; pointer-events: none; opacity: 0.6; z-index: 18;
    animation: dustMove 0.8s ease-out forwards;
}

/* =========================================
   5. الواجهة والمقدمة
   ========================================= */
#ui-layer { position: absolute; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
#score-box {
    position: absolute; top: 20px; left: 90px;
    background: #fff; padding: 8px 30px; border-radius: 50px;
    border: 4px solid var(--sany-yellow);
    font-size: 28px; font-weight: 800; color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex; gap: 10px; align-items: center;
}

.screen-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 20, 20, 0.95);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 500; pointer-events: auto; text-align: center; color: white;
}
.title-main { 
    font-size: 55px; color: var(--sany-yellow); margin: 0; 
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5); animation: pulseText 2s infinite;
}

/* النص الاستفزازي */
.sub-text { font-size: 22px; margin: 20px 0; color: #ddd; font-weight: bold; line-height: 1.6; }

/* الموشن التعليمي الاحترافي */
.tutorial-anim {
    position: relative; width: 220px; height: 180px; margin: 20px 0;
    /* حدود خفيفة لتوضيح منطقة اللمس */
    border-left: 2px dashed rgba(255,255,255,0.1); 
    border-right: 2px dashed rgba(255,255,255,0.1);
}

.hand-icon { 
    font-size: 70px; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    /* حركة سحب واضحة */
    animation: swipeGesture 2s infinite ease-in-out;
}

.tap-hint { 
    position: absolute; font-size: 16px; font-weight: bold; color: var(--sany-yellow); 
    width: 100%; text-align: center; opacity: 0;
    animation: fadeText 2s infinite;
}
.hint-up { top: 0; }
.hint-down { bottom: 0; }

.btn-play {
    background: linear-gradient(to right, var(--sany-yellow), #FBC02D);
    border: none; padding: 20px 80px;
    font-size: 30px; font-weight: 900; border-radius: 60px;
    color: #000; cursor: pointer; margin-top: 20px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); animation: pulseBtn 1s infinite;
}
.shake { animation: shakeAnim 0.5s; }

/* Keyframes */
@keyframes runLegs { from { transform: rotate(-40deg); } to { transform: rotate(45deg); } }
@keyframes swingArm { from { transform: rotate(35deg); } to { transform: rotate(-35deg); } }
@keyframes runBounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes pulseGlow { from { transform: scale(1); filter: drop-shadow(0 0 20px var(--sany-yellow)); } to { transform: scale(1.1); filter: drop-shadow(0 0 30px var(--sany-yellow)); } }
@keyframes pulseBtn { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes pulseText { 0% { text-shadow: 0 0 30px rgba(255,215,0,0.5); } 50% { text-shadow: 0 0 50px rgba(255,215,0,0.8); } 100% { text-shadow: 0 0 30px rgba(255,215,0,0.5); } }
@keyframes pop { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5) translate(var(--x), var(--y)); } }
@keyframes dustMove { 0% { opacity: 0.8; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-30px, -20px) scale(2); } }
@keyframes shakeAnim { 0% { transform: translate(1px, 1px) rotate(0deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
@keyframes twinkle { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); } }

/* حركة اليد الجديدة (احترافية: سحب فوق، ثم سحب تحت) */
@keyframes swipeGesture {
    0% { top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    15% { top: 20%; opacity: 0; transform: translate(-50%, -50%) scale(0.9); } /* سحب للأعلى */
    30% { top: 50%; opacity: 0; transform: translate(-50%, -50%); } /* ريست */
    50% { top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    65% { top: 80%; opacity: 0; transform: translate(-50%, -50%) scale(0.9); } /* سحب للأسفل */
    80% { top: 50%; opacity: 0; transform: translate(-50%, -50%); } /* ريست */
    100% { top: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ظهور النص مع حركة اليد */
@keyframes fadeText {
    0%, 100% { opacity: 0.2; }
    15%, 65% { opacity: 1; } 
}
/* إضافة أنيميشن رفرفة الطائر */
.bird-fly {
    display: inline-block;
    filter: brightness(0); /* ليكون ظلاً أسود كما في الكود السابق */
    animation: flap 0.3s infinite alternate ease-in-out;
    z-index: 25;
}

@keyframes flap {
    from { transform: scaleY(0.8) scaleX(1.1); }
    to { transform: scaleY(1.1) scaleX(0.9); }
}

/* تعديل بسيط لضمان سلاسة حركة العناصر */
.game-object {
    transition: bottom 0.1s linear; /* لجعل الصعود والنزول ناعماً */
}
/* أضف هذا التعديل أو استبدله في ملف CSS */

/* تحسين شكل ذرات الغبار لتكون أكثر وضوحاً */
.dust-particle {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* جعل حركة الانكماش (Crouch) فورية وناعمة */
#player {
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* تأثير ارتجاج الأرض عند الهبوط القوي */
.land-shake {
    animation: landShake 0.2s ease-out;
}

@keyframes landShake {
    0% { transform: translateY(0); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}