/* === PITCH DISPLAY STYLING === */
.modern-design .pitch-display-container {
    width: 100%;
    margin: 2px auto;
    background-color: #3A7D44;
    border: 2px solid #FFF;
    position: relative;
    aspect-ratio: 68 / 105; /* يحافظ على نسبة أبعاد الملعب */
    display: flex;
    flex-direction: column;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 20px;
}

.modern-design .team-info {
    display: flex;
    align-items: center;
    color: var(--modern-text-primary, #FFFFFF);
    padding: 8px 12px;
    background-color: rgba(0,0,0,0.3);
    z-index: 10;
    flex-shrink: 0;
}

.modern-design .team-info.top-team {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
}
.modern-design .team-info.bottom-team {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.modern-design .team-logo {
    width: 28px; /* يمكن جعل هذا نسبيًا إذا لزم الأمر، لكنه قد يكون مقبولًا كحجم ثابت صغير */
    height: 28px;
    margin-right: 10px;
    object-fit: contain;
}
.modern-design .team-name {
    font-weight: 600;
    font-size: 1em; /* يعتمد على حجم الخط الأساسي للحاوية */
    color:#FFFFFF;
}
.modern-design .team-formation-display {
    margin-left: auto;
    font-size: 0.9em;
    color: #FFFFFF;
}

.modern-design .pitch-area {
    position: relative;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    /* تحديد حجم خط أساسي هنا يمكن أن يساعد في التحكم بحجم عناصر اللاعبين إذا استخدمت em */
    /* font-size: 1vmin; /* مثال: 1% من أصغر بُعد للشاشة. اضبط هذه القيمة حسب الحاجة */
}

/* خطوط الملعب الأساسية */
.modern-design .pitch-line, .modern-design .pitch-circle, .modern-design .pitch-box {
    position: absolute;
    border-color: rgba(255,255,255,0.4);
    box-sizing: border-box;
}
.modern-design .center-line {
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    transform: translateY(-0.1vmin); /* تعديل ليتناسب مع سمك الإطار */
}
.modern-design .center-circle {
    top: 50%;
    left: 50%;
    width: 18%; /* نسبة من عرض منطقة اللعب */
    padding-bottom: 18%; /* للحفاظ على شكل دائري */
    border: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.modern-design .penalty-box-home {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44%;
    height: 16.5%;
    border: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    border-top: none;
}
.modern-design .penalty-box-away {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44%;
    height: 16.5%;
    border: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    border-bottom: none;
}
.modern-design .goal-area-home {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 5.5%;
    border: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    border-top: none;
}
.modern-design .goal-area-away {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 5.5%;
    border: 0.2vmin solid rgba(255,255,255,0.4); /* إطار نسبي */
    border-bottom: none;
}


.modern-design .team-on-pitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* يمكنك تحديد حجم خط أساسي هنا إذا كنت ستستخدم em بشكل مكثف للاعبين */
    /* font-size: calc(1vw + 0.5vh); /* مثال لحجم خط متجاوب */
}

.modern-design .player-on-pitch {
    position: absolute; /* top و left يجب أن تكونا نسب مئوية (%) من JavaScript */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* استخدم نسبة مئوية لعرض اللاعب ليتناسب مع حجم الملعب */
    /* أو استخدم vw/vh/vmin ليعتمد على أبعاد الشاشة */
    width: 7%; /* مثال: 7% من عرض .team-on-pitch. عدّل هذه القيمة حسب الحاجة */
    /* تحديد حجم خط أساسي هنا لتستخدمه وحدات em في العناصر الأبناء (الصورة، الرقم، الاسم) */
    font-size: 1.6vmin; /* مثال: استخدم vmin ليعتمد على أصغر بُعد للشاشة. اضبط حسب الحاجة */
    transform: translate(-50%, -50%);
    z-index: 5;
}

.modern-design .player-visual-wrapper {
    position: relative;
    width: 100%; /* ليأخذ عرض .player-on-pitch بالكامل */
    /* استخدام padding-bottom لإنشاء مربع يحافظ على نسبة العرض إلى الارتفاع 1:1 للصورة الدائرية */
    padding-bottom: 100%;
    margin-bottom: 0.3em; /* مسافة نسبية بين الصورة والاسم (0.3 * font-size الخاص بـ .player-on-pitch) */
}

.modern-design .player-photo-on-pitch,
.modern-design .no-photo-placeholder-on-pitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* تملأ الـ wrapper */
    height: 100%; /* تملأ الـ wrapper */
    border-radius: 50%;
    border: 0.12em solid var(--modern-icon-border, #FFFFFF); /* إطار نسبي (0.12 * font-size الخاص بـ .player-on-pitch) */
    object-fit: cover;
    background-color: var(--modern-bg, #EEEEEE);
    display: block;
    box-sizing: border-box; /* لضمان أن الإطار لا يزيد الحجم الكلي */
}

.modern-design .no-photo-placeholder-on-pitch {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8em; /* حجم أيقونة المستخدم نسبةً لحجم خط .player-on-pitch (2.8 * 1.6vmin) */
}
.modern-design .no-photo-placeholder-on-pitch i {
    line-height: 1; /* لتوسيط الأيقونة عموديًا */
}


.modern-design .player-number-badge {
    position: absolute;
    top: -0.4em; /* تعديل ليكون فوق الصورة بشكل نسبي */
    left: -0.4em; /* تعديل ليكون على يسار الصورة بشكل نسبي */
    background-color: var(--modern-text-secondary, #555555);
    color: #FFFFFF;
    font-size: 0.65em; /* حجم خط نسبي لحجم خط .player-on-pitch (0.65 * 1.6vmin) */
    font-weight: bold;
    /* العرض والارتفاع يعتمدان على حجم الخط الداخلي للرقم لضمان الدائرية */
    width: 2.5em; /* (2.5 * font-size الخاص بالرقم نفسه) */
    height: 2.5em; /* (2.5 * font-size الخاص بالرقم نفسه) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 1;
    border: 0.1em solid var(--modern-bg, #FFFFFF); /* إطار نسبي لخط الرقم */
    box-shadow: 0 0 0.2em rgba(0,0,0,0.3);
    box-sizing: border-box;
}

.modern-design .player-rating-badge {
    position: absolute;
    bottom: -0.2em;
    right: -0.5em;
    background-color: #f0ad4e;
    color: #FFFFFF;
    font-size: 0.65em; /* حجم خط نسبي لـ .player-on-pitch */
    font-weight: bold;
    padding: 0.3em 0.6em; /* حشوة نسبية لخط التقييم */
    border-radius: 0.8em; /* حواف دائرية نسبية لخط التقييم */
    z-index: 1;
    border: 0.1em solid #FFFFFF; /* إطار نسبي لخط التقييم */
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
    box-sizing: border-box;
}

.modern-design .player-name-display {
    font-size: 0.75em; /* حجم خط اسم اللاعب نسبةً لـ .player-on-pitch (0.75 * 1.6vmin) */
    color:  #FFFFFF;
    background-color: transparent;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* للتأكد من أن الاسم لا يتجاوز عرض عنصر اللاعب */
    line-height: 1.2;
}

/* تعديل بسيط للاستجابة إذا لزم الأمر */
/* مع استخدام vmin و em، قد لا تحتاج إلى الكثير من التعديلات في media queries لحجم اللاعبين */
/* ولكن يمكنك استخدامها لتعديل قيم vmin الأساسية أو نسب العرض إذا لزم الأمر */
@media (max-width: 480px) { /* شاشات أصغر من هواتف متوسطة */
    .modern-design .player-on-pitch {
        font-size: 1.5vmin; /* تصغير حجم الخط الأساسي للاعب قليلاً */
        width: 7.5%; /* يمكن زيادة النسبة قليلاً إذا بدوا صغارًا جدًا */
    }
    .modern-design .team-name {
        font-size: 0.9em;
    }
    .modern-design .team-formation-display {
        font-size: 0.8em;
    }
}

@media (max-width: 320px) { /* شاشات صغيرة جدًا */
    .modern-design .player-on-pitch {
        font-size: 1.4vmin; /* تصغير إضافي */
        width: 8%;
    }
    .modern-design .team-info {
        padding: 6px 8px;
    }
    .modern-design .team-logo {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    .modern-design .team-name {
        font-size: 0.85em;
    }
}

/* الأنماط الإضافية من الكود الأصلي الذي قدمته في البداية (إذا كانت لا تزال مستخدمة) */
/* === LINEUPS TAB STYLING === */
/* تأكد من أن هذه الأنماط لا تتعارض مع الأنماط الجديدة للملعب */
/* إذا كانت هذه الأنماط خاصة بالعرض الجدولي القديم، فقد لا تكون ضرورية الآن */

.modern-design .lineups-container { /* هذا خاص بالعرض الجدولي القديم */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.modern-design .lineup-section { /* هذا خاص بالعرض الجدولي القديم */
    flex: 1;
    min-width: 280px;
    background-color: #fff; /* قد يتعارض مع خلفية الملعب إذا كان .modern-design يطبق على الحاوية الرئيسية */
}

.modern-design .lineup-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--modern-text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--modern-table-border-color);
    display: flex;
    align-items: center;
}

.modern-design .lineup-section h4 img { /* هذا خاص بشعار الفريق في العرض الجدولي */
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.modern-design .lineup-section h4 span { /* هذا خاص بالتشكيلة في العرض الجدولي */
    font-size: 0.85em;
    font-weight: 500;
    color: var(--modern-text-secondary);
    margin-left: auto;
    background-color: var(--modern-bg);
    padding: 3px 7px;
    border-radius: 4px;
}

.modern-design .lineup-table { /* هذا خاص بالعرض الجدولي القديم */
    width: 100%;
    border-collapse: collapse;
    font-size: 10px; /* هذا حجم خط صغير جدًا، قد ترغب في مراجعته */
}
/* ... باقي أنماط الجدول ... */
/* .modern-design .lineup-table thead th { ... } */
/* .modern-design .lineup-table tbody td { ... } */
/* .modern-design .lineup-table tbody tr:last-child td { ... } */
/* .modern-design .lineup-table tbody tr:hover td { ... } */

/* .modern-design .player-photo { ... } /* هذا خاص بصورة اللاعب في الجدول القديم */
/* .modern-design .no-photo-placeholder { ... } /* هذا خاص بالعرض الجدولي القديم */
/* .modern-design .no-photo-placeholder i { ... } */

/* .modern-design .lineup-table td:nth-child(1) { width: 30px; text-align: center; } */
/* .modern-design .lineup-table td:nth-child(2) { width: 50px; text-align: center; } */

.modern-design .coach-info { /* هذا خاص بمعلومات المدرب في العرض الجدولي القديم */
    margin-top: 14px;
    font-size: 12px;
    color: var(--modern-text-secondary);
    padding-top: 10px;
    border-top: 1px solid var(--modern-table-border-color);
}

.modern-design .coach-info strong {
    color: var(--modern-text-primary);
    font-weight: 600;
}

.coaches-info-pitch {
  display: flex;
  justify-content: space-between;
}

/* @media (max-width: 640px) { ... } /* هذا خاص بالعرض الجدولي القديم */