/* ===================== نظام الألوان الجديد ===================== */
:root {
    /* تعريف المتغيرات اللونية لتسهيل التعديلات المستقبلية */
    --primary-color: #2c3e50;        /* اللون الأساسي الداكن */
    --secondary-color: #3498db;      /* اللون الثانوي (أزرق) */
    --accent-color: #e74c3c;         /* لون التمييز (أحمر) */
    --light-color: #ecf0f1;          /* اللون الفاتح للنصوص */
    --dark-color: #2c3e50;           /* اللون الداكن للخلفيات */
    --bg-gradient-start: #1a2a3a;    /* بداية التدرج للخلفية */
    --bg-gradient-end: #2c3e50;      /* نهاية التدرج للخلفية */
    --card-bg: #34495e;              /* لون خلفية البطاقات */
    --header-bg: rgba(44, 62, 80, 0.9); /* خلفية الهيدر مع شفافية */
    --fixed-header-bg: rgba(52, 73, 94, 0.95); /* خلفية الهيدر الثابت */
    --text-primary: #ecf0f1;         /* اللون الأساسي للنصوص */
    --text-secondary: #bdc3c7;       /* اللون الثانوي للنصوص */
    --text-accent: #3498db;          /* لون النصوص المميزة */
    --border-color: #3498db;         /* لون الحدود */
    --shadow-color: rgba(0, 0, 0, 0.3); /* لون الظلال */
    --btn-primary: #3498db;          /* لون الأزرار الأساسي */
    --btn-hover: #2980b9;            /* لون الأزرار عند التمرير */
    --btn-text: white;               /* لون نص الأزرار */
    --input-bg: #34495e;             /* خلفية حقول الإدخال */
    --input-border: #4a6572;         /* حدود حقول الإدخال */
    --input-text: white;             /* نص حقول الإدخال */
}

/* ===================== التصميم الأساسي ===================== */
* {
    box-sizing: border-box;  /* حساب الحشو والحدود ضمن الأبعاد */
    margin: 0;              /* إزالة الهوامش الافتراضية */
    padding: 0;             /* إزالة الحشو الافتراضي */
}

body {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: var(--text-primary);      /* لون النص الأساسي */
    line-height: 1.6;                /* ارتفاع السطر */
    min-height: 100vh;               /* أدنى ارتفاع للشاشة */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;               /* منع التمرير الأفقي */
}

/* ===================== التخطيط الرئيسي المعدل ===================== */
.main-container {
    display: grid;  /* استخدام نظام الشبكة للتخطيط */
    grid-template-areas: 
        "header header"      /* منطقة الهيدر تأخذ صفين */
        "sidebar calculators" /* الشريط الجانبي والحاسبات */
        "sidebar xp-section"; /* الشريط الجانبي وقسم الـXP */
    grid-template-columns: 300px 1fr; /* عمودين: ثابت ومتغير */
    grid-template-rows: auto 1fr auto; /* صفوف تلقائية */
    gap: 20px;               /* المسافة بين العناصر */
    padding: 20px;           /* الحشو الداخلي */
    max-width: 1600px;       /* أقصى عرض للصفحة */
    margin: 0 auto;          /* توسيط المحتوى */
}

/* ===================== مناطق الشبكة ===================== */
.header-area {
    grid-area: header;       /* ربط بالمنطقة المحددة في grid-template-areas */
    display: flex;
    justify-content: space-between; /* توزيع العناصر */
    align-items: center;     /* توسيط عمودي */
    flex-wrap: wrap;         /* السماح بالتفاف العناصر */
    gap: 20px;               /* المسافة بين العناصر */
}

.sidebar-area {
    grid-area: sidebar;      /* منطقة الشريط الجانبي */
    display: flex;
    flex-direction: column;  /* ترتيب العناصر عمودياً */
    gap: 20px;               /* المسافة بين العناصر */
}

.calculators-area {
    grid-area: calculators;  /* منطقة الحاسبات */
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين متساويين */
    grid-template-rows: auto auto;   /* صفين تلقائيين */
    gap: 15px;              /* المسافة بين الحاسبات */
}

.xp-area {
    grid-area: xp-section;   /* منطقة حاسبة الـ XP */
}

/* ===================== المكونات الفردية ===================== */
.language-select {
    padding: 8px 12px;
    background-color: var(--btn-primary);
    color: var(--btn-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px var(--shadow-color);
    font-size: 14px;
    transition: background-color 0.3s ease; /* تأثير انتقالي */
}

.language-select:hover {
    background-color: var(--btn-hover); /* تغيير اللون عند التمرير */
}

.header-rectangle {
    background-color: var(--header-bg);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    padding: 15px 30px;
    box-shadow: 0 2px 6px var(--shadow-color);
}

.page-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}

/* ===================== الشريط الجانبي - تم تحسينه ===================== */
.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.side-name-button {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
    background-color: var(--header-bg);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    padding: 15px;
    box-shadow: 0 2px 6px var(--shadow-color);
    min-height: 60px;        /* ارتفاع ثابت للزر */
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-image-buttons {
    display: flex;
    gap: 10px;
}

.side-image-button {
    flex: 1;                 /* توزيع المساحة بالتساوي */
    height: 80px;
    background-color: var(--header-bg);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    box-shadow: 0 2px 6px var(--shadow-color);
    background-size: contain; /* تغيير من cover إلى contain للحفاظ على نسبة الصورة */
    background-position: center;
    background-repeat: no-repeat; /* منع تكرار الصورة */
}

.side-rectangle {
    height: 400px;
    background-color: var(--header-bg);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    overflow: hidden;         /* إخفاء المحتوى الزائد */
    box-shadow: 0 2px 6px var(--shadow-color);
    position: relative;       /* لتحديد موضع الصورة بدقة */
}

.side-image-layer {
    width: 100%;
    height: 100%;
    background-size: contain; /* تغيير من cover إلى contain */
    background-position: center;
    background-repeat: no-repeat; /* منع تكرار الصورة */
    opacity: 0;              /* إخفاء الصورة في البداية */
    transition: opacity 0.5s ease; /* تأثير انتقالي للشفافية */
    position: absolute;      /* وضع مطلق داخل الحاوية */
    top: 0;
    left: 0;
}

/* ===================== الحاسبات المصغرة - تم إعادة تنظيمها ===================== */
.calculator-container, .shards-calculator, .distribution-calculator, .xp-calculator {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 10px;
    height: auto;            /* ارتفاع تلقائي */
    min-height: 320px;       /* ارتفاع أدنى موحد */
}

/* ===================== إعادة ترتيب الحاسبات حسب الطلب ===================== */

/* الصف الأول: Generals XP Calculator و XP Calculator جنباً إلى جنب */
.calculator-container {
    grid-column: 1 / 2;      /* العمود الأول */
    grid-row: 1 / 2;         /* الصف الأول */
}

.xp-calculator {
    grid-column: 2 / 3;      /* العمود الثاني */
    grid-row: 1 / 2;         /* الصف الأول */
}

/* الصف الثاني: Required Shards Calculator و XP Required & Distribution Calculator جنباً إلى جنب */
.shards-calculator {
    grid-column: 1 / 2;      /* العمود الأول */
    grid-row: 2 / 3;         /* الصف الثاني */
}

.distribution-calculator {
    grid-column: 2 / 3;      /* العمود الثاني */
    grid-row: 2 / 3;         /* الصف الثاني */
}

/* ===================== تصميم الحاسبات الداخلي ===================== */
.calculator {
    display: grid;
    grid-template-columns: 1fr; /* عمود واحد للحاسبات المصغرة */
    gap: 15px;
    margin-bottom: 15px;
}

.input-section, .result-section {
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background-color: rgba(52, 73, 94, 0.7);
}

.form-group {
    margin-bottom: 12px;
}

.calculator label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-primary);
}

.calculator select, .calculator input {
    width: 100%;
    padding: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    font-size: 14px;
    color: var(--input-text);
}

.calculator button {
    width: 100%;
    padding: 10px;
    background-color: var(--btn-primary);
    color: var(--btn-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.calculator button:hover {
    background-color: var(--btn-hover);
}

/* ===================== تحسينات لحاسبة قطع الجنرال ===================== */
.shards-calculator .result-section {
    position: relative;
    min-height: 180px;
    max-height: 200px;       /* تحديد أقصى ارتفاع */
    overflow-y: auto;        /* إضافة شريط تمرير رأسي */
}

#shardsDetails {
    max-height: none;        /* إزالة الحد الأقصى للارتفاع لحل مشكلة شريطي التمرير */
    overflow-y: visible;     /* إزالة التمرير الداخلي */
    padding-right: 5px;      /* مساحة لشريط التمرير */
}

/* تخصيص شريط التمرير */
#shardsDetails::-webkit-scrollbar {
    width: 6px;              /* عرض شريط التمرير */
}

#shardsDetails::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ===================== تحسينات لحاسبة التوزيع ===================== */
.xp-type-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 180px;       /* تحديد ارتفاع القائمة */
    overflow-y: auto;        /* إضافة تمرير إذا زاد المحتوى */
    padding: 10px;
    background: rgba(52, 73, 94, 0.5);
    border-radius: 5px;
}

.xp-type-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease;
}

.xp-type-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.xp-type-item label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    flex: 1;
}

.max-quantity {
    width: 80px;
    padding: 4px 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 3px;
    color: var(--input-text);
    text-align: center;
}

.max-quantity:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* ===================== الجداول ===================== */
.results-table {
    width: 100%;
    border-collapse: collapse; /* دمج الحدود */
    margin-top: 15px;
    background-color: var(--primary-color);
}

.results-table th,
.results-table td {
    border: 1px solid var(--input-border);
    padding: 10px;
    text-align: center;
    color: var(--text-primary);
}

.results-table th {
    background-color: var(--dark-color);
}

.results-table tr:nth-child(even) {
    background-color: rgba(52, 73, 94, 0.5);
}

.highlight {
    color: var(--accent-color);
    font-weight: bold;
}

.highlight-green {
    color: #27ae60;
    font-weight: bold;
}

/* ===================== سايدبار الجنرالات المحسن ===================== */
.generals-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
      max-height: 80vh; 
    background: linear-gradient(135deg, var(--card-bg) 0%, #2c3e50 100%);
    border: 2px solid var(--border-color);
    border-right: none;
    border-radius: 15px 0 0 15px;
    padding: 15px 8px;
    box-shadow: 
        -5px 0 25px rgba(0, 0, 0, 0.4),
        inset 2px 0 10px rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.generals-sidebar:hover {
    width: 160px;
    box-shadow: 
        -8px 0 35px rgba(0, 0, 0, 0.6),
        inset 2px 0 15px rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.02);
}

.generals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
    max-height: 95vh;           /* حد أقصى للارتفاع */
    overflow-y: auto;           /* إضافة التمرير */
    overflow-x: hidden;         /* إخفاء التمرير الأفقي */
    padding-right: 5px;         /* مساحة لشريط التمرير */
}

.general-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.8;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.general-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.general-item:hover::before {
    left: 100%;
}

.general-item:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: translateX(-5px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.general-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.general-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* تغطية كاملة مع الحفاظ على النسبة */
    transition: transform 0.3s ease;
}

.general-item:hover .general-icon img {
    transform: scale(1.1);
}

.general-name {
    white-space: nowrap;
    font-weight: bold;
    color: var(--text-primary);
    opacity: 0;
    transition: all 0.3s ease 0.1s;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.generals-sidebar:hover .general-name {
    opacity: 1;
    transform: translateX(0);
}

/* ألوان الحدود للجنرالات */
.general-item.red .general-icon { border-color: #e74c3c; }
.general-item.orange .general-icon { border-color: #e67e22; }
.general-item.yellow .general-icon { border-color: #f1c40f; }
.general-item.green .general-icon { border-color: #2ecc71; }
.general-item.teal .general-icon { border-color: #1abc9c; }
.general-item.blue .general-icon { border-color: #3498db; }
.general-item.purple .general-icon { border-color: #9b59b6; }
.general-item.pink .general-icon { border-color: #e84393; }

/* ===================== قسم الـ XP المحسن ===================== */
.xp-section {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.xp-section h3 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 20px;
}

.xp-table-horizontal {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.xp-table-horizontal th,
.xp-table-horizontal td {
    border: 1px solid var(--input-border);
    padding: 10px;
    text-align: center;
    color: var(--text-primary);
}

.xp-table-horizontal th {
    background-color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
}

.xp-table-horizontal td {
    border-bottom: 1px solid var(--input-border);
}

.xp-table-horizontal input {
    width: 60px;
    padding: 5px;
    text-align: center;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: 3px;
}

.xp-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.total-xp {
    border: 2px solid var(--border-color);
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    background-color: var(--primary-color);
    font-weight: bold;
    color: var(--text-primary);
    box-shadow: 0 2px 6px var(--shadow-color);
    min-width: 150px;
}

.transfer-checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--primary-color);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.transfer-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    transition: all 0.3s ease;
}

.transfer-checkbox:checked {
    background: var(--btn-primary);
    border-color: var(--btn-hover);
}

.transfer-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--btn-text);
    font-weight: bold;
    font-size: 12px;
}

/* ===================== عناصر التوزيع ===================== */
.distribution-list {
    margin: 10px 0;
}

.distribution-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--input-border);
}

.distribution-summary {
    margin-top: 15px;
    padding: 10px;
    background: rgba(52, 73, 94, 0.5);
    border-radius: 5px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.limit-warning {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
}

/* ===================== MEDIA QUERIES ===================== */

/* شاشات متوسطة (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .main-container {
        grid-template-columns: 280px 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .generals-sidebar {
        width: 30px;
    }
    
    .generals-sidebar:hover {
        width: 170px;
    }
}

/* شاشات صغيرة (768px - 991px) */
@media (max-width: 991px) {
    .main-container {
        grid-template-areas: 
            "header"
            "sidebar"
            "calculators"
            "xp-section";
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .calculators-area {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    
    /* إعادة ترتيب الحاسبات للشاشات الصغيرة */
    .calculator-container { grid-column: 1 / 2; grid-row: 1 / 2; }
    .xp-calculator { grid-column: 1 / 2; grid-row: 2 / 3; }
    .shards-calculator { grid-column: 1 / 2; grid-row: 3 / 4; }
    .distribution-calculator { grid-column: 1 / 2; grid-row: 4 / 5; }
    
    .sidebar-area {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .side-rectangle {
        flex: 1;
        min-width: 250px;
        height: 300px;
    }
    
    .sidebar-content {
        flex: 1;
        min-width: 200px;
    }
    
    .generals-sidebar {
        position: relative;
        width: 100%;
        border-radius: 10px;
        transform: none;
        top: auto;
        margin-top: 20px;
        border-right: 2px solid var(--border-color);
    }
    
    .generals-sidebar:hover {
        width: 100%;
        transform: none;
    }
    
    .generals-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .general-item {
        flex-direction: column;
        text-align: center;
        width: 100px;
    }
    
    .general-name {
        opacity: 1;
        font-size: 12px;
    }
}

/* شاشات الأجهزة اللوحية (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .main-container {
        gap: 12px;
        padding: 12px;
    }
    
    .header-area {
        flex-direction: column;
        text-align: center;
    }
    
    .sidebar-area {
        flex-direction: column;
    }
    
    .side-image-buttons {
        flex-direction: column;
    }
    
    .calculator-container, 
    .shards-calculator,
    .distribution-calculator,
    .xp-calculator {
        padding: 12px;
        min-height: 280px;
    }
    
    .input-section, 
    .result-section {
        padding: 12px;
    }
    
    .calculator button {
        font-size: 14px;
        padding: 8px;
    }
    
    .results-table th,
    .results-table td {
        padding: 8px 4px;
        font-size: 14px;
    }
    
    .xp-section {
        padding: 15px;
    }
    
    .xp-table-horizontal {
        font-size: 14px;
    }
    
    .xp-table-horizontal th,
    .xp-table-horizontal td {
        padding: 8px 4px;
    }
    
    .xp-table-horizontal input {
        width: 50px;
        padding: 3px;
    }
    
    .xp-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .total-xp,
    .transfer-checkbox-container {
        width: 100%;
        text-align: center;
    }
    
    .general-item {
        width: 80px;
    }
    
    .general-name {
        font-size: 11px;
    }
    
    .general-icon {
        width: 35px;
        height: 35px;
    }
}

/* شاشات الهواتف (أقل من 576px) */
@media (max-width: 575px) {
    .main-container {
        gap: 10px;
        padding: 10px;
    }
    
    .header-area {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .header-rectangle {
        padding: 10px 20px;
    }
    
    .page-title {
        font-size: 20px;
    }
    
    .sidebar-area {
        flex-direction: column;
    }
    
    .side-image-buttons {
        flex-direction: column;
    }
    
    .side-image-button {
        height: 60px;
    }
    
    .side-rectangle {
        height: 250px;
    }
    
    .calculator-container, 
    .shards-calculator,
    .distribution-calculator,
    .xp-calculator {
        padding: 10px;
        min-height: 260px;
    }
    
    .calculator {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .input-section, 
    .result-section {
        padding: 10px;
        min-height: 120px;
    }
    
    .calculator button {
        font-size: 14px;
        padding: 8px;
    }
    
    .results-table th,
    .results-table td {
        padding: 8px 4px;
        font-size: 14px;
    }
    
    .xp-section {
        padding: 12px;
    }
    
    .xp-table-horizontal {
        font-size: 12px;
    }
    
    .xp-table-horizontal th,
    .xp-table-horizontal td {
        padding: 6px 2px;
    }
    
    .xp-table-horizontal input {
        width: 45px;
        padding: 3px;
    }
    
    .xp-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .total-xp,
    .transfer-checkbox-container {
        width: 100%;
        text-align: center;
    }
    
    .general-item {
        width: 70px;
    }
    
    .general-name {
        font-size: 10px;
    }
    
    .general-icon {
        width: 30px;
        height: 30px;
    }
    
    .xp-type-item {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    
    .max-quantity {
        width: 100%;
    }
}

/* شاشات صغيرة جداً (أقل من 400px) */
@media (max-width: 400px) {
    .calculator-container h3,
    .shards-calculator h3,
    .distribution-calculator h3,
    .xp-calculator h3 {
        font-size: 18px;
    }
    
    .xp-section h3 {
        font-size: 18px;
    }
    
    .general-item {
        width: 60px;
    }
    
    .general-name {
        font-size: 9px;
    }
}

/* تحسينات للطباعة */
@media print {
    .language-select {
        display: none;
    }
    
    .generals-sidebar {
        display: none;
    }
}
/* تخصيص شريط التمرير للجنرالات */
.generals-list::-webkit-scrollbar {
    width: 6px;
}

.generals-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.generals-list::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 3px;
}

.generals-list::-webkit-scrollbar-thumb:hover {
    background: #2980b9;
}

.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(231, 76, 60, 0.95);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    z-index: 10000;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: slideBounce 0.8s ease, pulse 2s infinite 1s;
    border-right: 3px solid rgba(192, 57, 43, 0.8);
    max-width: 320px;
    font-size: 13px;
}

.notification .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
    float: left;
    opacity: 0.8;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification .close-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
}

.notification-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.text-ar, .text-en {
    display: block;
    line-height: 1.3;
}

.text-en {
    font-size: 12px;
    opacity: 0.9;
    font-style: italic;
}

.countdown {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.countdown-ar, .countdown-en {
    color: #ffdd59;
}

/* تأثير النبض باللون الأحمر */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        background: rgba(231, 76, 60, 0.95);
    }
    50% {
        box-shadow: 0 2px 12px rgba(231, 76, 60, 0.6);
        background: rgba(231, 76, 60, 0.98);
    }
}

/* تأثير الانزلاق والارتداد */
@keyframes slideBounce {
    0% {
        transform: translateX(-50%) translateY(-80px);
        opacity: 0;
    }
    70% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* اهتزاز خفيف */
@keyframes shake {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-50%) rotate(-1deg); }
    75% { transform: translateX(-50%) rotate(1deg); }
}

.notification.shake {
    animation: slideBounce 0.8s ease, pulse 2s infinite 1s, shake 0.5s ease 5s;
}

@keyframes slideUpOut {
    to {
        transform: translateX(-50%) translateY(-80px);
        opacity: 0;
    }
}