/* استایل کلی کانتینر مهره‌های زده شده [cite: 4] */
.captured-pieces-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    min-height: 30px;
}

/* استایل پایه هر مهره زده شده */
.captured-piece {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

    .captured-piece img {
        width: 17px;
        height: 17px;
    }

/* مهره‌های سیاه با بک‌گراند روشن/سفید */
.b-captured {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #ddd;
}

/* مهره‌های سفید با بک‌گراند تیره/سیاه */
.w-captured {
    background-color: rgba(40, 40, 40, 0.9) !important;
    border: 1px solid #222;
}

#board-container.theme-green cg-board {
    background-image: conic-gradient(#739552 90deg, #ebecd0 90deg 180deg, #739552 180deg 270deg, #ebecd0 270deg) !important;
    background-size: 25% 25% !important;
}

/* ۲. تم قهوه‌ای (کلاسیک) */
#board-container.theme-brown cg-board {
    background-image: conic-gradient(#b58863 90deg, #f0d9b5 90deg 180deg, #b58863 180deg 270deg, #f0d9b5 270deg) !important;
    background-size: 25% 25% !important;
}
/* رنگ‌آمیزی خانه‌های درگیر در Premove */
/* رنگ‌آمیزی خانه‌های Premove (پیش‌حرکت) */
#board-container square.current-premove {
    background-color: rgba(120, 10, 50, 0.6) !important;
    box-shadow: inset 0 0 10px rgba(100, 50, 50, 0.8) !important;
}
/* اطمینان از اینکه پس‌زمینه مزاحمی وجود نداشته باشد */
#board-container .cg-wrap {
    background-color: transparent !important;
}
/* صفحه شطرنج را ریسپانسیو و مربعی نگه می‌دارد */
#board-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    position: relative !important; /* این خط از فرار سایه مهره به گوشه مانیتور جلوگیری می‌کند */
    display: block;
}

square.move-dest {
    background: radial-gradient(rgba(0, 0, 0, 0.25) 22%, transparent 0) !important;
    cursor: pointer;
}

    /* ۲. حلقه دایره‌ای دور مهره‌های حریف (نشان‌دهنده قابلیت زدن مهره) */
    square.move-dest.oc {
        background: radial-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.25) 80%) !important;
        cursor: pointer;
    }

cg-board {
    border-radius: 5px;
}
/* ۳. (اختیاری) هایلایت کردن خانه‌ای که کاربر در حال حاضر روی آن کلیک کرده است */
square.selected {
    background-color: rgba(20, 85, 30, 0.4) !important;
}

.cg-wrap square.last-move {
    /* می‌توانید رنگ را به هر چیزی تغییر دهید.
                       اینجا از یک زرد ملایم و نیمه‌شفاف استفاده کردیم */
    background-color: rgba(155, 199, 0, 0.41) !important;
}
/* ۱. جابجایی اعداد (سمت چپ صفحه) به سمت چپ */
.cg-wrap coords.files coord {
    /* به جای هل دادن زوری، از سمت راست به آن‌ها فاصله می‌دهیم تا به چپ متمایل شوند */
    padding-right: 10px !important;
    /* یا اگر می‌خواهید کاملاً به لبه سمت چپِ هر خانه بچسبند، این دو خط را از کامنت درآورید: */
    text-align: left !important;
    padding-left: 4px !important;
}

.cg-wrap coords.files {
    bottom: -15px !important;
}

.cg-wrap coords.ranks {
    left: -12px !important;
    top: -18px !important;
}
    /* ۲. تنظیم اعداد (سمت چپ صفحه) */
    .cg-wrap coords.ranks coord {
        /* فاصله دادن از بالا و چپ برای قرارگیری زیباتر */
        padding-top: 4px !important;
        padding-left: 4px !important;
    }


.cg-wrap square.check {
    background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.8) 0%, rgba(255, 0, 0, 0) 70%) !important;
    box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.5) !important;
}

#board-container {
    direction: ltr !important;
    width: 100%;
    max-width: 400px;
    height: 400px; /* دادن ارتفاع ثابت یا حداقل ارتفاع ضروری است */
    margin: 0 auto;
}
/* در صورت نیاز برای گوشی‌ها: */
@media (max-width: 450px) {
    #board-container {
        height: 90vw; /* تا در موبایل هم مربع بماند */
    }
}

/* اورراید کردن کلاس hidden فقط برای صفحه بازی */
#game-screen.hidden {
    display: block !important; /* جلوگیری از 0 شدن ابعاد */
    position: absolute !important;
    top: -9999px !important; /* فرستادن صفحه به 10 هزار پیکسل بالاتر از مانیتور! */
    left: -9999px !important;
    visibility: hidden !important;
}

/* برای اطمینان از اینکه کانتینر تخته همیشه پوزیشن درستی دارد */
#board-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

#board-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    position: relative !important;
    direction: ltr !important; /* این خط تداخل مختصات را از بین می‌برد */
    margin: 0 auto;
}

/* برای اینکه اگر متن یا عددی کنار تخته هست به هم نریزد */
.cg-wrap {
    direction: ltr !important;
}
/* این مقادیر را بر اساس طراحی مینی‌اپ خود تنظیم کنید */
#opponent-profile, #my-profile {
    min-height: 60px; /* جلوگیری از تغییر ارتفاع هنگام لود شدن عکس پروفایل */
}

.captured-pieces {
    min-height: 35px; /* جلوگیری از تغییر ارتفاع هنگام اضافه شدن مهره‌های خورده شده */
}