/* ————————————————————————————————
   1) GÖKYÜZÜ ARKA PLAN DEGRADE
   ———————————————————————————————— */
html, body {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* Gece gökyüzü degradeli arka plan */
    background: linear-gradient(to bottom, #001d3d 0%, #000814 100%);
}

/* ————————————————————————————————
   2) HAREKETLİ RENKLİ YILDIZ KATMANLARI
   ———————————————————————————————— */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 200%;   /* hareket alanı genişletildi */
    height: 200%;
    z-index: 0;

    /* üç farklı boyda/renkte yıldız katmanı */
    background:
      /* küçük hızlı beyaz yıldızlar */
      radial-gradient(circle, #fff 1px, transparent 0) 0 0 / 20px 20px repeat,
      /* orta boy, hafif sarımsı yıldızlar */
      radial-gradient(circle, #ffe9c4 1.5px, transparent 0) 10px 10px / 40px 40px repeat,
      /* büyük, hafif mavimsi yıldızlar */
      radial-gradient(circle, #d4fbff 2px, transparent 0) 20px 20px / 80px 80px repeat;
    
    animation: moveStars 60s linear infinite;
}

/* ————————————————————————————————
   3) ANİMASYON TANIMI
   ———————————————————————————————— */
@keyframes moveStars {
    from {
        background-position: 0   0,
                             0   0,
                             0   0;
    }
    to {
        /* x ve y pozisyonlarını ayrı ayrı kaydır */
        background-position: -1000px 1000px,
                             -500px  500px,
                             -200px  200px;
    }
}

/* ————————————————————————————————
   4) OYUN İÇERİĞİNİN ÜSTTE KALMASI
   ———————————————————————————————— */
#gameContainer,
canvas {
    position: relative;
    z-index: 1;
}