/* --- [0] الأساسيات: الخطوط، الألوان، الخلفية (Base: Fonts, Colors, Background) --- */

/* ربط خط البكسل المحلي للعربية (المسار يفترض أنه صحيح في مستودعك) */
@font-face {
    font-family: 'PixelAE';
    src: url('../assets/PixelAE-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ربط خط البكسل للإنجليزية/اللاتينية */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    /* ألوان الشعار الأساسية */
    --color-logo-yellow: #f2bc24;
    --color-logo-purple: #62347c;
    --color-logo-red: #7b322f;

    /* ألوان X/O والألوان الثانوية */
    --color-xo-purple: #6733f6;
    --color-xo-purple-light: #a179bb;
    --color-xo-pink: #fbbad8;
    --color-xo-red: #ff675c;

    /* لوحة الألوان الرئيسية للتطبيق */
    --primary-color: var(--color-logo-yellow);       /* اللون الأصفر الرئيسي (للتمييز) */
    --player-x-color: var(--color-xo-red);           /* لون اللاعب X (أحمر) */
    --player-o-color: var(--color-xo-purple);        /* لون اللاعب O (بنفسجي غامق) */
    
    --background-color: #2b213f;                     /* خلفية التطبيق (بنفسجي غامق) */
    --text-color: #ffffff;                           /* لون النص الأبيض */
    
    /* ألوان الحدود ثلاثية الأبعاد (3D Bevel) */
    --border-color-dark: #000000;                    /* الظل/العمق (أسود) */
    --border-color-light: #5a487a;                   /* الإضاءة (أفتح من الخلفية) */
    --border-width: 3px;                             /* عرض الحدود */

    --accent-color: var(--color-xo-purple-light);    /* لون التظليل/التركيز الثانوي */
    --button-bg-hover: var(--color-logo-red);        /* خلفية الأزرار عند التحويم */
    --button-bg-active: var(--color-xo-pink);        /* خلفية الأزرار عند الضغط */

    /* [تعديل] دمج الخطوط لضمان مظهر بكسلي كامل */
    --main-font: "Press Start 2P", 'PixelAE', sans-serif; /* الخط الرئيسي (للاتينية أولاً) */
    --arabic-pixel-font: 'PixelAE', "Press Start 2P", sans-serif; /* الخط الأساسي للعربية (مع fallback) */
}

/* --- Global Reset & Box Sizing: إعدادات البكسل --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* قواعد لضمان مظهر البكسل النظيف */
    box-shadow: none !important;
    border-radius: 0 !important;
    image-rendering: pixelated; 
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    font-family: var(--arabic-pixel-font);
    line-height: 1.6;
    /* [FIX]: تغيير اللون الافتراضي للعناصر التي تستخدم --text-color */
    color: var(--border-color-dark); /* يجب أن نغيره إلى لون داكن (أسود) */
    background-color: var(--background-color);
    overflow-y: auto; 
    overflow-x: hidden;
}

/* --- الخلفية البكسلية الاحترافية (Custom Pixel Background) --- */
body {
    /* [تعديل] استخدام تكرار الخلفية بدلاً من تغطية الشاشة */
    /* المسار يفترض أنه صحيح في مستودعك */
    background-image: url('../assets/pixel_background.png'); 
    background-repeat: repeat;       /* تغيير من no-repeat */
    background-attachment: fixed;    /* لتثبيت الخلفية عند التمرير */
    /* (تم حذف background-size: cover و background-position) */
}