:root {
    --glow-color: #ff8c42; --secondary-color: #ffc4a3;
    --background-deep: #0d0a1f; --background-mid: #2c255c;
    --background-top: #1e1a3b; --text-color: #f0f0f0;
    --shield-color: #00e5ff;
}
/* کد CSS عمومی و ساختار صفحه بدون تغییر باقی مانده است */
body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Vazirmatn', sans-serif; background: var(--background-deep); color: var(--text-color); }
#game-container { width: 100%; height: 100%; max-width: 1000px; max-height: 600px; position: relative; overflow: hidden; border-radius: 25px; border: 4px solid var(--glow-color); box-shadow: 0 0 60px var(--glow-color), inset 0 0 40px rgba(0,0,0,0.6); background: linear-gradient(to top, var(--background-deep), var(--background-mid), var(--background-top)); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } }
.shake-animation { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.parallax-bg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-position: 0 0; animation: move-bg linear infinite; }
#bg-stars { background-image: url('data:image/svg+xml,...'); opacity: 0.7; animation-duration: 80s; }
#bg-nebula { background-image: radial-gradient(...); animation-duration: 50s; }
#bg-elements { background-image: url('data:image/svg+xml,...'); opacity: 0.5; animation-duration: 120s; }
@keyframes move-bg { from { background-position-x: 0; } to { background-position-x: -100%; } }
#ground { width: 200%; height: 80px; position: absolute; bottom: 0; left: 0; background-color: #120808; background-image: linear-gradient(...); background-size: 60px 60px; box-shadow: inset 0 20px 40px #000, 0 0 30px var(--glow-color); animation: move-ground linear infinite; }
@keyframes move-ground { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#ui-container { position: absolute; top: 20px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 2.2em; font-weight: 900; text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color); }
.item { position: absolute; right: -150px; animation: move-item linear infinite; }
.powerup { bottom: 150px; width: 45px; height: 45px; z-index: 45; background-color: var(--shield-color); border-radius: 50%; box-shadow: 0 0 25px var(--shield-color), inset 0 0 15px white; animation: powerup-bob 2s infinite ease-in-out; }
@keyframes move-item { to { right: 110%; } }
@keyframes powerup-bob { 50% { transform: translateY(-25px); } }

/* --- ✨ موتور آکوآی زنده (LIVING AQUA ENGINE) - شروع ✨ --- */
#droplet {
    position: absolute;
    width: 90px; height: 120px; left: 80px; bottom: 80px; /* 1.5 برابر بزرگتر */
    z-index: 50;
    transition: transform 0.2s;
    animation: idle-float 3s infinite ease-in-out;
    background-image: url('/more/photo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#droplet.jump {
    animation: epic-jump 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, idle-float 0s forwards;
}

#droplet-body {
    position: absolute; width: 100%; height: 100%;
    /* تغییر رنگ قطره به #4d95e8 با حفظ ظاهر شیشه‌ای */
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.6) 5%, #4d95e8 90%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    backdrop-filter: blur(4px) brightness(1.2) contrast(1.1);
    box-shadow: inset 2px -10px 20px rgba(0, 0, 0, 0.3);
    /* تغییر رنگ حاشیه برای هماهنگی */
    border: 1px solid rgba(77, 149, 232, 0.5);
    display: none; /* مخفی کردن بدنه اصلی قطره */
}
#droplet.jump #droplet-body {
     animation: droplet-squash-stretch 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#droplet-body::after {
    content: ''; position: absolute;
    bottom: -20px; left: 0; width: 100%; height: 20px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 20%, transparent 70%);
    filter: blur(3px); opacity: 0.7;
}

#droplet-face { 
    position: absolute; width: 100%; height: 100%; filter: blur(0.5px); opacity: 0.9; z-index: 2; 
    display: none; /* مخفی کردن صورت قطره */
}
.eye { position: absolute; width: 10px; height: 16px; background: white; border: 2px solid #333; border-radius: 50%; top: 30px; }
.eye-left { left: 15px; } .eye-right { right: 15px; }
.pupil { width: 6px; height: 8px; background: #222; border-radius: 50%; position: absolute; left: 1px; top: 3px; }
.mouth { position: absolute; width: 18px; height: 5px; border: 3px solid #333; border-top-color: transparent; border-radius: 0 0 20px 20px; top: 52px; left: 18px; }

@keyframes idle-float { 50% { transform: translateY(-15px); } }
@keyframes epic-jump {
    0%   { bottom: 80px; }
    50%  { bottom: 340px; }
    100% { bottom: 80px; }
}
@keyframes droplet-squash-stretch {
    0%   { transform: scale(1.15, 0.85); }
    50%  { transform: scale(0.8, 1.2) rotate(15deg); }
    100% { transform: scale(1.0, 1.0) rotate(0deg); }
}
/* --- ✨ موتور آکوآی زنده (پایان) ✨ --- */


/* --- 🔥 موتور فونیکس (PHOENIX ENGINE) - شروع 🔥 --- */
.obstacle { bottom: 75px; width: 80px; height: 120px; z-index: 40; }
.fire-container { position: absolute; width: 100%; height: 100%; }

.fire-core {
    position: absolute;
    width: 40px; height: 40px; left: calc(50% - 20px); bottom: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 5px 5px #fff,
        0 0 10px 10px #FFD700,
        0 0 20px 20px #FFA500,
        0 0 40px 30px #FF4500,
        0 0 80px 40px rgba(255, 69, 0, 0.5);
    animation: pulse-fire 1s infinite alternate;
}
@keyframes pulse-fire {
    from { transform: scale(1); }
    to { transform: scale(1.1, 0.9); }
}

.ember {
    position: absolute;
    width: 4px; height: 4px;
    background: #FFA500;
    border-radius: 50%;
    box-shadow: 0 0 5px #FFA500;
}
/* --- 🔥 موتور فونیکس (پایان) 🔥 --- */

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 300; background: rgba(10, 5, 30, 0.75); backdrop-filter: blur(12px); transition: opacity 0.5s, transform 0.5s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay h1 { font-size: clamp(3rem, 12vw, 7rem); font-weight: 900; text-shadow: 0 0 25px var(--glow-color); margin: 0; }
.overlay p { font-size: clamp(1rem, 4vw, 1.8rem); margin: 15px 0 30px; }
.pulse-text { animation: pulse 2s infinite ease-in-out; }
@keyframes pulse { 50% { opacity: 0.6; } }
#restart-button { 
    font-family: 'Vazirmatn', sans-serif; 
    font-size: 1.6rem; 
    padding: 20px 50px; 
    border: none; 
    border-radius: 100px; 
    background: linear-gradient(45deg, var(--glow-color), var(--secondary-color)); 
    color: var(--background-deep); 
    cursor: pointer; 
    font-weight: 900; 
    box-shadow: 0 10px 30px rgba(255, 126, 95, 0.6); 
    transition: all 0.2s cubic-bezier(0.2, 0.7, 0.3, 1.5); 
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#restart-button:hover, #restart-button:active { 
    transform: translateY(-10px) scale(1.1); 
    box-shadow: 0 15px 35px rgba(255, 126, 95, 0.8); 
}
#droplet.shielded #droplet-body::after { content: ''; position: absolute; top: -12px; left: -12px; width: 84px; height: 104px; border: 4px solid var(--shield-color); border-radius: 50%; box-shadow: 0 0 25px var(--shield-color), inset 0 0 20px var(--shield-color); animation: shield-pulse 1.5s infinite; opacity: 0.9; }
@keyframes shield-pulse { 50% { transform: scale(1.1); opacity: 0.7; } }