/* ===== متغيرات الألوان: فاتح (افتراضي) وداكن. brand-800 و accent-600 ثابتان في الوضعين ===== */
:root {
    color-scheme: light;
    --page: #BCB8FE;
    --card: rgba(255, 255, 255, 0.96);
    --card-border: #e4defa;
    --scroll-track: #f3f0ff;
    --field-bg: #ffffff;
    --surface: 255 255 255;
    --ink-brand: 35 2 124;
    --ink-accent: 74 10 115;
    --brand-50: 245 240 255; --brand-100: 235 226 255; --brand-200: 214 198 251; --brand-300: 185 163 240;
    --accent-50: 252 244 255; --accent-100: 248 232 255; --accent-200: 241 211 255; --accent-300: 231 176 255;
    --sand-50: 250 248 255; --sand-100: 243 240 255; --sand-200: 228 222 250;
    --gray-50: 249 250 251; --gray-100: 243 244 246; --gray-200: 229 231 235; --gray-300: 209 213 219; --gray-400: 156 163 175;
    --gray-500: 107 114 128; --gray-600: 75 85 99; --gray-700: 55 65 81; --gray-800: 31 41 55; --gray-900: 17 24 39;
    --red-50: 254 242 242; --red-100: 254 226 226; --red-200: 254 202 202; --red-300: 252 165 165;
    --red-700: 185 28 28; --red-800: 153 27 27; --red-900: 127 29 29;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --page: #0f0a24;
    --card: rgba(26, 18, 56, 0.96);
    --card-border: #3a2f6e;
    --scroll-track: #1e1642;
    --field-bg: #221a49;
    --surface: 26 18 56;
    --ink-brand: 205 188 255;
    --ink-accent: 232 188 255;
    --brand-50: 33 24 74; --brand-100: 42 30 94; --brand-200: 59 44 128; --brand-300: 90 71 168;
    --accent-50: 43 20 69; --accent-100: 58 26 92; --accent-200: 84 40 127; --accent-300: 122 60 174;
    --sand-50: 30 22 66; --sand-100: 38 28 82; --sand-200: 58 47 110;
    --gray-50: 30 22 66; --gray-100: 38 28 82; --gray-200: 58 47 110; --gray-300: 75 63 134; --gray-400: 143 135 189;
    --gray-500: 169 162 209; --gray-600: 192 186 224; --gray-700: 211 207 240; --gray-800: 230 227 248; --gray-900: 244 242 253;
    --red-50: 58 20 32; --red-100: 74 26 40; --red-200: 127 42 58; --red-300: 155 58 76;
    --red-700: 252 165 165; --red-800: 254 202 202; --red-900: 254 226 226;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--page);
    background-image: radial-gradient(#C23FFD 0.5px, transparent 0.5px), radial-gradient(#23027C 0.5px, var(--page) 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
.retro-card {
    background: var(--card);
    border: 2px solid var(--card-border);
    box-shadow: 0 10px 25px -5px rgba(35, 2, 124, 0.12), 0 8px 10px -6px rgba(35, 2, 124, 0.12);
}
html[data-theme="dark"] .retro-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); }
/* الحقول: Tailwind لا يلوّنها، فنحدد لونها هنا ليتبع الوضع */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea {
    background-color: var(--field-bg);
    color: rgb(var(--gray-800));
}
input::placeholder, textarea::placeholder { color: rgb(var(--gray-400)); }
.retro-button {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 0 0 rgba(35, 2, 124, 0.22);
}
.retro-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0px 0px rgba(0,0,0,0.15);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: #23027C; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #C23FFD; }

.site-logo { width: 190px; max-width: 42vw; height: auto; max-height: 58px; object-fit: contain; display: block; }
.site-header-inner { min-height: 70px; }
/* شعار التصنيف على بلاطة بيضاء في الوضعين ليظهر أي شعار بوضوح */
.category-logo { width: 58px; height: 58px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--card-border); padding: 4px; flex-shrink: 0; }
.category-choice { min-height: 82px; }
@media (max-width: 480px) {
  .site-header-inner { gap: 8px; padding-top: 10px !important; padding-bottom: 10px !important; }
  .site-logo { width: 142px; max-width: 46vw; max-height: 48px; }
  .category-logo { width: 48px; height: 48px; }
}

/* أزرار اللعبتين في الصفحة الرئيسية */
.home-game-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 150px; padding: 1.5rem 1rem; border-radius: 0.9rem; transition: background-color .15s, transform .15s;
    box-shadow: 0 8px 18px -6px rgba(35,2,124,.45); }
.home-game-btn:hover { transform: translateY(-2px); }
@media (min-width: 640px) { .home-game-btn { min-height: 240px; } }