styles.css

body {
    margin: 0;
    /* حذف حاشیه‌های پیش‌فرض مرورگر برای بدنه صفحه */
    display: flex;
    /* استفاده از فلکس‌باکس برای تنظیم و مرتب‌سازی المان‌های فرزند */
    justify-content: center;
    /* مرکز قرار دادن المان‌ها به صورت افقی */
    align-items: center;
    /* مرکز قرار دادن المان‌ها به صورت عمودی */
    height: 100vh;
    /* تنظیم ارتفاع بدنه صفحه به 100 درصد ارتفاع پنجره */
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    /* تنظیم پس‌زمینه به صورت گرادیانت رنگی از چپ به راست */
}

.game-container {
    position: relative;
    /* موقعیت نسبی برای استفاده از موقعیت‌دهی مطلق دکمه درون کانتینر */
}

canvas {
    border: 5px solid #333;
    /* تنظیم حاشیه برای بوم با رنگ مشکی */
    background-color: #ffffff;
    /* تنظیم پس‌زمینه بوم به رنگ سفید */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    /* افزودن سایه به بوم برای ایجاد عمق */
}

button {
    position: absolute;
    /* موقعیت‌دهی مطلق برای قرار دادن دکمه درون کانتینر */
    top: 50%;
    /* قرار دادن دکمه در مرکز عمودی کانتینر */
    left: 50%;
    /* قرار دادن دکمه در مرکز افقی کانتینر */
    transform: translate(-50%, -50%);
    /* انتقال دکمه به مرکز دقیق با استفاده از تبدیل */
    padding: 10px 20px;
    /* تنظیم فضای داخلی دکمه */
    font-size: 20px;
    /* تنظیم اندازه فونت دکمه */
    background-color: #28a745;
    /* تنظیم رنگ پس‌زمینه دکمه به سبز */
    color: #fff;
    /* تنظیم رنگ متن دکمه به سفید */
    border: none;
    /* حذف حاشیه پیش‌فرض دکمه */
    cursor: pointer;
    /* تغییر نشانگر موس به حالت اشاره‌گر */
    border-radius: 10px;
    /* گرد کردن گوشه‌های دکمه */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* افزودن سایه به دکمه برای ایجاد عمق */
}

button:hover {
    background-color: #218838;
    /* تغییر رنگ پس‌زمینه دکمه در هنگام هاور به سبز تیره‌تر */
}

button:focus {
    outline: none;
    /* حذف حاشیه فوکوس دکمه برای ظاهر بهتر */
}