/*==================================================
                إعدادات عامة
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --blue:#1565c0;
    --blue-dark:#0d47a1;

    --green:#2e7d32;
    --red:#c62828;
    --yellow:#f9a825;

    --bg:#edf5ff;

    --card:#ffffff;

    --text:#222;

    --radius:18px;

    --shadow:0 8px 20px rgba(0,0,0,.12);

}

body{

    direction:rtl;

    font-family:
    "Cairo",
    Tahoma,
    sans-serif;

    background:var(--bg);

    color:var(--text);

}


/*==================================================
                الشاشات
==================================================*/

.screen{

    display:none;

    min-height:100vh;

    padding:30px 15px;

}

.screen.active{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}


/*==================================================
            الحاوية الرئيسية
==================================================*/

.start-card,
.question-card,
.result-card{

    width:100%;

    max-width:650px;

    margin:auto;

    background:var(--card);

    border-radius:24px;

    padding:28px;

    box-shadow:var(--shadow);

}

/*==================================================
                شاشة البداية
==================================================*/

.start-card{

    text-align:center;

}

/* رمز الكرة الأرضية */

.start-card .logo{

    font-size:72px;

    margin-bottom:18px;

}

/* عنوان اللعبة */

.game-title{

    font-size:36px;

    font-weight:700;

    color:var(--blue);

    margin-bottom:8px;

}

/* العنوان الفرعي */

.game-subtitle{

    font-size:28px;

    font-weight:700;

    color:var(--blue-dark);

    margin-bottom:25px;

}

/* النص الترحيبي */

.welcome-text{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:30px;

}

/*==================================================
                المميزات
==================================================*/

.features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:30px;

}

.feature{

    background:#f7fbff;

    border:2px solid #d9e9ff;

    border-radius:16px;

    padding:18px;

    font-size:18px;

    font-weight:600;

    line-height:1.8;

    transition:.25s;

}

.feature:hover{

    transform:translateY(-3px);

    box-shadow:0 6px 15px rgba(0,0,0,.10);

}

/*==================================================
                زر البداية
==================================================*/

.main-btn{

    width:100%;

    border:none;

    border-radius:18px;

    padding:18px;

    background:var(--blue);

    color:#fff;

    font-size:24px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.main-btn:hover{

    background:var(--blue-dark);

    transform:translateY(-2px);

}

/*==================================================
                اسم المصمم
==================================================*/

.designer{

    margin-top:22px;

    color:#666;

    font-size:16px;

}

/*==================================================
                شعار البداية
==================================================*/

.logo-circle{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:72px;

    margin-bottom:18px;

}

/* نافذة إنهاء اللعبة */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal.show{

    display:flex;

}

/*==================================================
            بطاقات الإحصائيات
==================================================*/

.stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin:25px 0;

}

.stat-card{

    background:#f8fbff;

    border:2px solid #dbeafe;

    border-radius:16px;

    padding:15px;

    text-align:center;

}

.stat-number{

    font-size:28px;

    font-weight:700;

    color:var(--blue);

}

.stat-label{

    margin-top:6px;

    font-size:15px;

    font-weight:600;

    color:#555;

}

/*==================================================
                شاشة اللعبة
==================================================*/

.top-bar{

    width:100%;

    max-width:650px;

    margin:0 auto 20px;

}

.header-title{

    text-align:center;

    font-size:34px;

    color:var(--blue);

    font-weight:700;

}

.header-subtitle{

    text-align:center;

    font-size:24px;

    font-weight:700;

    color:var(--blue-dark);

    margin:8px 0 25px;

}


/*==================================================
                بطاقات الإحصائيات
==================================================*/

.stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin:10px 0 8px;

}

.stat-card{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    background:#fff;

    border:2px solid #dbeafe;

    border-radius:12px;

    padding:8px 10px;

    min-height:44px;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

}

.stat-number{

    font-size:24px;

    font-weight:700;

    color:var(--blue);

    line-height:1;

}

.stat-text{

    font-size:15px;

    font-weight:600;

    color:#555;

    margin:0;

}

/*==================================================
            حاوية شاشة اللعبة
==================================================*/

.game-wrapper{

    width:100%;

    max-width:650px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:20px;

}

/*==================================================
                بطاقة العلم
==================================================*/

.question-card{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.flag-card{

    background:#fff;

    border:2px solid #dbeafe;

    border-radius:18px;

    padding:20px;

    min-height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

}

#flagImage{

    width:100%;

    max-width:360px;

    height:auto;

    display:block;

    margin:auto;

}

/*==================================================
                أزرار الإجابة
==================================================*/

.answers{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.answer-btn{

    width:100%;

    min-height:58px;

    padding:14px 20px;

    font-size:22px;

    font-weight:700;

    border-radius:14px;

}

.answer-btn:hover{

    background:#dbeafe;

    transform:translateY(-2px);

}

/* ==========================================
   أدوات اللعبة السفلية
========================================== */

.game-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

}


/* زر المساعدة */

.help-btn{

    min-width:150px;

    min-height:55px;

}


/* مستطيل معلومة المساعدة */

.help-message{

    flex:1;

    max-width:300px;

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:8px 15px;

    background:#fff;

    border:2px solid #dbeafe;

    border-radius:12px;

    font-size:16px;

    color:#444;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

}


/* زر إنهاء اللعبة */

.stop-btn{

    min-width:150px;

    min-height:55px;

}

/*==========================================
            توسيط اسم المصمم
==========================================*/

.bottom-bar .designer{

    width:100%;

    text-align:center;

    margin-top:12px;

}

/*==================================================
            نافذة تأكيد إنهاء اللعبة
==================================================*/

.modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.55);

    z-index:9999;

}

.modal-box{

    width:100%;

    max-width:420px;

    background:#ffffff;

    border-radius:22px;

    padding:30px 25px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.modal-box h2{

    margin:0 0 12px;

    font-size:28px;

    color:#1d4ed8;

}

.modal-box p{

    margin:0 0 25px;

    font-size:18px;

    color:#666;

}

.modal-buttons{

    display:flex;

    gap:12px;

    justify-content:center;

}

.modal-buttons button{

    flex:1;

    min-height:52px;

    border:none;

    border-radius:14px;

    font-family:inherit;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

}

.danger-btn{

    background:#dc3545;

    color:#fff;

}

.secondary-btn{

    background:#e9eef5;

    color:#333;

}

.danger-btn:hover{

    background:#b91c2a;

}

.secondary-btn:hover{

    background:#d8e0ea;

}

/*==================================================
                شاشة النتائج
==================================================*/

#resultScreen{

    align-items:center;

    justify-content:center;

}

.result-card{

    width:100%;

    max-width:650px;

    text-align:center;

    padding:30px;

}


/* الكأس */

.result-card .trophy{

    text-align:center;

    font-size:64px;

    margin-bottom:10px;

}


/* عنوان النتيجة */

.result-card h2{

    text-align:center;

    font-size:32px;

    color:var(--blue);

    margin-bottom:10px;

}


/* الرسالة */

.result-message{

    text-align:center;

    font-size:18px;

    color:#666;

    margin-bottom:25px;

}


/* بطاقات النتائج */

.result-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-bottom:25px;

}

.result-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:90px;

    background:#f8fbff;

    border:2px solid #dbeafe;

    border-radius:14px;

    padding:12px;

}

.result-item.success{

    background:#effcf3;

    border-color:#b7e4c7;

}


/* أرقام النتائج */

.result-number{

    font-size:30px;

    font-weight:700;

    color:var(--blue);

}

.result-item.success .result-number{

    color:var(--green);

}


/* أسماء النتائج */

.result-label{

    margin-top:5px;

    font-size:15px;

    color:#555;

}


/* زر إعادة اللعب */

.result-card .main-btn{

    margin-top:5px;

}


/* اسم المصمم */

.result-card .designer{

    width:100%;

    text-align:center;

    margin-top:20px;

}

/*==================================================
        ألوان الإجابات بعد التحقق
==================================================*/

/* الإجابة الصحيحة */
.answer-btn.correct{

    background:#2e7d32 !important;

    color:#ffffff !important;

    border:2px solid #1b5e20 !important;

    box-shadow:0 5px 15px rgba(46,125,50,.30);

}

/* الإجابة الخاطئة */
.answer-btn.wrong{

    background:#c62828 !important;

    color:#ffffff !important;

    border:2px solid #8e0000 !important;

    box-shadow:0 5px 15px rgba(198,40,40,.30);

}

/* منع تغير اللون بسبب hover أثناء ظهور النتيجة */
.answer-btn.correct:hover{

    background:#2e7d32 !important;

    transform:none;

}

.answer-btn.wrong:hover{

    background:#c62828 !important;

    transform:none;

}

/*==================================================
        أسماء الدول داخل خيارات الإجابة
==================================================*/

.answer-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    direction:ltr;

    text-align:left;

}

.answer-ar{

    direction:rtl;

    text-align:right;

    font-size:21px;

    font-weight:700;

    flex:1;

}

.answer-en{

    direction:ltr;

    text-align:left;

    font-size:18px;

    font-weight:500;

    color:#666;

    flex:1;

    padding-left:15px;

}

/*==================================================
        اسم الدولة بالعربي والإنجليزي
==================================================*/

.answer-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    direction:ltr;

    text-align:left;

}

.answer-ar{

    flex:1;

    direction:rtl;

    text-align:right;

    font-size:21px;

    font-weight:700;

}

.answer-en{

    flex:1;

    direction:ltr;

    text-align:left;

    font-size:17px;

    font-weight:500;

    color:#666;

}

/*==================================================
        تحسين توزيع الاسمين داخل الخيار
==================================================*/

.answer-btn{

    padding:14px 22px;

}

.answer-ar{

    flex:0 0 48%;

    text-align:right;

    direction:rtl;

}

.answer-en{

    flex:0 0 48%;

    text-align:left;

    direction:ltr;

    font-size:18px;

    color:#555;

}

/*==================================================
        ترتيب اسم الدولة داخل زر الإجابة
==================================================*/

.answer-btn{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    direction:rtl;

    padding:14px 22px;

}

.answer-ar{

    flex:0 0 45%;

    direction:rtl;

    text-align:right;

    font-size:21px;

    font-weight:700;

}

.answer-en{

    flex:0 0 45%;

    direction:ltr;

    text-align:left;

    font-size:18px;

    font-weight:500;

    color:#555;

}

/*==================================================
        تحسين الارتفاع للجوال - الإصدار الأول
==================================================*/

@media (max-width: 700px){

    html,
    body{

        min-height:100dvh;

        overflow-x:hidden;

    }


    /*==============================================
                    الشاشات
    ==============================================*/

    .screen{

        min-height:100dvh;

        padding:8px 10px;

        align-items:flex-start;

    }


    /*==============================================
                    شاشة البداية
    ==============================================*/

    .start-card{

        padding:14px 14px 16px;

        border-radius:20px;

    }


    .logo-circle{

        font-size:52px;

        margin-bottom:6px;

    }


    .game-title{

        font-size:25px;

        line-height:1.3;

        margin-bottom:2px;

    }


    .game-subtitle{

        font-size:19px;

        line-height:1.3;

        margin-bottom:10px;

    }


    .welcome-text{

        font-size:15px;

        line-height:1.7;

        margin-bottom:12px;

    }


    .features{

        gap:8px;

        margin-bottom:12px;

    }


    .feature{

        min-height:62px;

        padding:8px 6px;

        font-size:14px;

        line-height:1.35;

    }


    .main-btn{

        padding:13px;

        font-size:19px;

        min-height:48px;

    }


    .start-card .designer{

        margin-top:10px;

        font-size:13px;

    }


    /*==============================================
                    شاشة اللعبة
    ==============================================*/

    .game-wrapper{

        padding:4px;

        gap:7px;

    }


    .header-title{

        font-size:24px;

        line-height:1.3;

    }


    .header-subtitle{

        font-size:18px;

        margin:3px 0 8px;

    }


    /*==============================================
                    الإحصائيات
    ==============================================*/

    .stats{

        margin:5px 0 4px;

        gap:6px;

    }


    .stat-card{

        min-height:34px;

        padding:5px 4px;

        border-radius:9px;

    }


    .stat-number{

        font-size:18px;

    }


    .stat-text{

        font-size:11px;

    }


    /*==============================================
                    بطاقة العلم
    ==============================================*/

    .question-card{

        gap:7px;

        padding:8px;

    }


    .flag-card{

        min-height:145px;

        padding:8px;

        border-radius:12px;

    }


    #flagImage{

        max-width:270px;

        width:100%;

        height:auto;

    }


    /*==============================================
                    خيارات الإجابة
    ==============================================*/

    .answers{

        gap:7px;

    }


    .answer-btn{

        min-height:45px;

        padding:9px 14px;

        border-radius:10px;

    }


    .answer-ar{

        font-size:16px;

    }


    .answer-en{

        font-size:14px;

    }


    /*==============================================
                المساعدة + المعلومة + الإنهاء
    ==============================================*/

    .game-controls{

        gap:5px;

    }


    .help-btn,
    .stop-btn{

        min-height:45px;

        padding:6px 5px;

        font-size:13px;

    }


    .help-message{

        min-height:45px;

        padding:5px 7px;

        font-size:12px;

    }


    .bottom-bar .designer{

        margin-top:5px;

        font-size:13px;

    }

}


/*==================================================
        الأجهزة ذات الشاشة القصيرة
==================================================*/

@media (max-width: 700px) and (max-height: 800px){

    .start-card{

        padding-top:10px;

        padding-bottom:12px;

    }


    .logo-circle{

        font-size:46px;

        margin-bottom:3px;

    }


    .game-title{

        font-size:22px;

    }


    .game-subtitle{

        font-size:17px;

        margin-bottom:7px;

    }


    .welcome-text{

        font-size:14px;

        line-height:1.5;

        margin-bottom:8px;

    }


    .features{

        gap:6px;

        margin-bottom:9px;

    }


    .feature{

        min-height:55px;

        font-size:13px;

    }


    .main-btn{

        min-height:44px;

        padding:10px;

        font-size:18px;

    }


    .start-card .designer{

        margin-top:7px;

    }


    .flag-card{

        min-height:125px;

    }


    .answer-btn{

        min-height:42px;

        padding:7px 12px;

    }


    .game-controls{

        gap:4px;

    }


    .help-btn,
    .stop-btn,
    .help-message{

        min-height:42px;

    }

}

/* ===== نظام المسابقة الجديد ===== */
.player-entry{margin:16px 0 14px;text-align:right}.player-entry label{display:block;margin-bottom:7px;font-size:16px;font-weight:700;color:#334155}.player-name-input{width:100%;min-height:48px;padding:10px 14px;border:2px solid #dbeafe;border-radius:14px;outline:none;font-family:inherit;font-size:18px;color:#222;background:#fff;transition:.2s}.player-name-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.10)}.name-error{min-height:20px;margin-top:5px;font-size:13px;font-weight:700;color:var(--red)}
.player-playing{text-align:center;margin:4px 0 7px;font-size:15px;color:#475569}.player-playing strong{color:var(--blue-dark)}
.stats{grid-template-columns:repeat(4,1fr)}.score-stat .stat-number{color:#d97706}
#flagImage{border:2px solid #9ca3af;border-radius:4px}
.game-controls{display:grid;grid-template-columns:150px minmax(180px,1fr) 150px;gap:10px;align-items:stretch}.help-btn,.stop-btn{min-width:0;min-height:55px;border:none;border-radius:12px;font-family:inherit;font-weight:700;cursor:pointer}.help-btn{background:#f9a825;color:#fff}.stop-btn{background:#c62828;color:#fff}.help-btn:disabled{opacity:.55;cursor:not-allowed}.help-message{max-width:none}
.result-player{margin:0 0 18px;padding:10px 14px;background:#f8fbff;border:2px solid #dbeafe;border-radius:12px;font-size:17px;color:#475569}.result-player strong{color:var(--blue-dark)}.completion-note{margin:0 0 18px;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:700}.completion-note.completed{background:#effcf3;border:1px solid #b7e4c7;color:#1b5e20}.completion-note.incomplete{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.leaderboard-section{margin-top:22px}.leaderboard-section h3{margin-bottom:12px;font-size:21px;color:var(--blue-dark)}.leaderboard-wrap{width:100%;overflow-x:auto;border:1px solid #dbeafe;border-radius:14px;background:#fff}.leaderboard-table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}.leaderboard-table th,.leaderboard-table td{padding:9px 8px;text-align:center;border-bottom:1px solid #e5e7eb;white-space:nowrap}.leaderboard-table thead th{background:#eef6ff;color:#0d47a1;font-weight:700}.leaderboard-table tbody tr:nth-child(even){background:#fafcff}.leaderboard-table tbody tr:last-child td{border-bottom:none}.leader-name{font-weight:700;color:#334155}.leader-score{font-weight:800;color:#d97706}.empty-leaderboard{display:none;padding:20px;text-align:center;color:#64748b}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.result-actions .main-btn{margin:0;font-size:18px;padding:14px 10px}.secondary-action-btn{width:100%;min-height:52px;padding:12px 10px;border:2px solid #dbeafe;border-radius:16px;background:#fff;color:var(--blue-dark);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer}
@media (max-width:700px){.player-entry{margin:8px 0 9px}.player-entry label{margin-bottom:4px;font-size:14px}.player-name-input{min-height:42px;padding:7px 11px;font-size:16px;border-radius:11px}.name-error{min-height:15px;margin-top:3px;font-size:11px}.player-playing{margin:2px 0 4px;font-size:12px}.stats{grid-template-columns:repeat(4,1fr);gap:5px}.stat-card{min-height:36px;padding:5px 3px;gap:3px}.stat-number{font-size:17px}.stat-text{font-size:10px}.game-controls{grid-template-columns:88px minmax(110px,1fr) 92px;gap:5px}.help-btn,.stop-btn{min-height:44px;padding:5px 4px;font-size:12px}.help-message{min-height:44px;padding:5px 6px;font-size:11px}.result-player{margin-bottom:12px;padding:8px 10px;font-size:15px}.leaderboard-section{margin-top:15px}.leaderboard-section h3{font-size:18px}.leaderboard-table{font-size:12px}.leaderboard-table th,.leaderboard-table td{padding:7px 6px}.result-actions{grid-template-columns:1fr;gap:8px}.result-actions .main-btn,.secondary-action-btn{min-height:44px;padding:9px 8px;font-size:16px}}

/* اسم اللاعب مباشرة تحت عنوان أعلام الدول */
.start-card .game-subtitle + .player-entry{
    margin-top:10px;
    margin-bottom:12px;
}
.start-card .game-subtitle + .player-entry label{
    text-align:center;
}


/* تثبيت خانة اسم اللاعب مباشرة تحت (أعلام الدول) */
.start-card .game-subtitle{
    margin-bottom:8px;
}

.start-card .game-subtitle + .player-entry{
    margin-top:0;
    margin-bottom:16px;
}

.start-card .game-subtitle + .player-entry label{
    text-align:center;
}


/*==================================================
    تحديث واجهة البداية - نسخة التحدي
==================================================*/

/* رفع الكرة الأرضية والعنوان قليلًا */
.start-card{
    padding-top:14px;
}

.logo-circle{
    margin-top:-8px;
    margin-bottom:5px;
}

.game-title{
    margin-bottom:2px;
}

.game-subtitle{
    margin-bottom:6px;
}


/* تصغير بطاقات المعلومات */
.features{
    gap:8px;
    margin-bottom:12px;
}

.feature{
    min-height:66px;
    padding:8px 6px;
    border-radius:12px;
    font-size:15px;
    line-height:1.35;
}


/* تقليل المسافات في بداية الصفحة */
.welcome-text{
    margin-bottom:12px;
    line-height:1.6;
}

.start-card .game-subtitle + .player-entry{
    margin-bottom:10px;
}


/* سجل التحدي في شاشة البداية */
.start-leaderboard{
    margin:4px 0 12px;
    border:2px solid #d9e9ff;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
}

.start-leaderboard-title{
    padding:8px 10px;
    background:#eef6ff;
    color:var(--blue-dark);
    font-size:16px;
    font-weight:800;
}

.start-leaderboard-table-wrap{
    max-height:188px;
    overflow-y:auto;
}

.start-leaderboard-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.start-leaderboard-table th,
.start-leaderboard-table td{
    padding:5px 8px;
    text-align:center;
    border-bottom:1px solid #edf2f7;
}

.start-leaderboard-table th{
    position:sticky;
    top:0;
    background:#f8fbff;
    color:#475569;
    z-index:1;
}

.start-leaderboard-table tbody tr:nth-child(1){
    background:#fff8dd;
}

.start-leaderboard-table tbody tr:nth-child(2){
    background:#f5f7fa;
}

.start-leaderboard-table tbody tr:nth-child(3){
    background:#fff3e9;
}

.start-empty-leaderboard{
    display:none;
    padding:12px;
    color:#64748b;
    font-size:14px;
}


/* زر البداية أكثر بروزًا بعد سجل التحدي */
.start-card > .main-btn{
    margin-top:0;
}


/*==================================================
                    الجوال
==================================================*/

@media (max-width:700px){

    .start-card{
        padding-top:7px;
    }

    .logo-circle{
        font-size:46px;
        margin-top:-5px;
        margin-bottom:2px;
    }

    .game-title{
        font-size:23px;
        margin-bottom:1px;
    }

    .game-subtitle{
        font-size:18px;
        margin-bottom:4px;
    }

    .welcome-text{
        font-size:14px;
        line-height:1.45;
        margin-bottom:7px;
    }

    .features{
        gap:5px;
        margin-bottom:8px;
    }

    .feature{
        min-height:48px;
        padding:5px 4px;
        font-size:12px;
        line-height:1.25;
        border-radius:10px;
    }

    .start-leaderboard{
        margin:2px 0 8px;
        border-radius:11px;
    }

    .start-leaderboard-title{
        padding:6px 8px;
        font-size:14px;
    }

    .start-leaderboard-table-wrap{
        max-height:145px;
    }

    .start-leaderboard-table{
        font-size:12px;
    }

    .start-leaderboard-table th,
    .start-leaderboard-table td{
        padding:4px 5px;
    }

    .start-empty-leaderboard{
        padding:9px;
        font-size:12px;
    }
}


@media (max-width:700px) and (max-height:800px){

    .logo-circle{
        font-size:42px;
    }

    .game-title{
        font-size:21px;
    }

    .features{
        margin-bottom:6px;
    }

    .feature{
        min-height:43px;
        font-size:11px;
    }

    .start-leaderboard-table-wrap{
        max-height:112px;
    }

    .start-leaderboard-title{
        font-size:13px;
        padding:5px;
    }
}

/* خرائط الدول: نفس بطاقة السؤال المعتمدة في لعبة الأعلام. */
.map-card{position:relative;flex-direction:column;gap:2px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff 0%,#eff7ff 100%)}
.map-question-label{font-size:19px;font-weight:800;color:#0d47a1;text-align:center}
.map-stage{position:relative;width:min(100%,390px);height:245px;margin:auto;display:grid;place-items:center}
#mapImage{width:84%;height:100%;display:block;margin:auto;filter:drop-shadow(0 8px 6px rgba(13,71,161,.18))}
.country-shape{fill:#1976d2;stroke:#0d47a1;stroke-width:2;stroke-linejoin:round}
.world-outline{fill:#b7cde1;stroke:#8da9c2;stroke-width:.25}
.country-pin{fill:#e53935;stroke:#fff;stroke-width:1.5}
.neighbor-label{position:absolute;z-index:2;max-width:46%;padding:5px 7px;border:1px solid #79b4eb;border-radius:10px;background:rgba(255,255,255,.97);color:#0d47a1;font-size:12px;font-weight:800;text-align:center;box-shadow:0 2px 8px #bfdbfe;line-height:1.4}
.neighbor-label[hidden]{display:none!important}
.neighbor-label.east{right:0;top:50%;transform:translateY(-50%)}
.neighbor-label.north{top:0;left:50%;transform:translateX(-50%)}
.neighbor-label.west{left:0;top:50%;transform:translateY(-50%)}
.neighbor-label.south{bottom:0;left:50%;transform:translateX(-50%)}
#startBtn:disabled{opacity:.65;cursor:wait}
@media(max-width:700px){.map-card{min-height:205px;padding:9px}.map-question-label{font-size:16px}.map-stage{height:180px}.neighbor-label{font-size:10px;padding:3px 5px}}
@media(max-width:700px) and (max-height:800px){.map-card{min-height:165px}.map-stage{height:145px}}

/* تُعرض أسماء الشرق والغرب عموديًا بمحاذاة جانب الخريطة. */
.neighbor-label.east,.neighbor-label.west{max-width:none;max-height:86%;writing-mode:vertical-rl;text-orientation:mixed;white-space:normal;transform:translateY(-50%);padding:8px 5px}
.neighbor-label.west{writing-mode:vertical-lr}

/* تعرض مقدمة اللعبة اللغتين دون تغيير اتجاه الأسماء العربية. */
.start-card .game-title small{display:block;margin-top:3px;font-size:.56em;font-weight:600;line-height:1.35;color:#456a9f}
.start-card .game-subtitle span{font-size:.76em;font-weight:600}
.start-card .player-entry label span{font-size:.86em;font-weight:500;color:#64748b}
.start-card .en-line{display:block;margin-top:5px;font-size:.8em;line-height:1.45;color:#52657d}
.start-card .feature small{display:block;font-size:.75em;line-height:1.2;font-weight:500;color:#52657d}
.start-leaderboard-title small,.start-leaderboard-table small{font-size:.78em;font-weight:500;color:#52657d}
.start-card .main-btn span{font-size:.82em}
.start-card .designer span{font-size:.85em}

/* الخريطة تملأ المساحة المتاحة بين أسماء الجوار. */
.map-card{min-height:290px;padding:12px 16px}
.map-stage{width:100%;height:265px}
#mapImage{width:calc(100% - 96px);height:100%}
.neighbor-label{font-size:17px;line-height:1.3;padding:6px 9px;max-width:52%}
.neighbor-label.east,.neighbor-label.west{max-width:none;max-height:92%;padding:9px 6px;writing-mode:vertical-rl;text-orientation:mixed}
.neighbor-label.west{writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
@media(max-width:700px){
    .map-card{min-height:225px;padding:7px 8px}
    .map-stage{height:210px}
    #mapImage{width:calc(100% - 64px)}
    .neighbor-label{font-size:14px;padding:4px 6px}
    .neighbor-label.east,.neighbor-label.west{padding:6px 4px}
    .start-card .game-title small{font-size:.6em}
    .start-card .en-line{font-size:.81em}
    .start-card .feature small{font-size:.75em}
}
@media(max-width:700px) and (max-height:800px){
    .map-card{min-height:190px}
    .map-stage{height:178px}
}

/* صفحة البداية على نمط لعبة العواصم مع اختيار لغة المسابقة. */
.start-card{max-width:650px;padding:20px 22px 18px}
.intro-heading{display:flex;direction:rtl;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.intro-heading .logo-circle{margin:0;font-size:50px;flex:0 0 auto;line-height:1}
.intro-heading .game-title{font-size:29px;line-height:1.15;margin:0}
.intro-heading .game-title small{font-size:17px;color:#1457aa;font-weight:700;margin-top:2px}
.intro-heading .game-subtitle{font-size:22px;margin:4px 0 0}
.intro-heading .game-subtitle span{font-size:1em}
.start-card .features{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:8px 0 12px}
.start-card .feature{min-height:0;padding:5px 11px;border-width:1px;border-radius:40px;
    font-size:14px;color:#144e9d;line-height:1.4;white-space:nowrap;font-weight:700}
.start-card .feature span{font-size:.92em}
.start-card .player-entry{margin:10px 0 16px}
.start-card .player-entry label,.language-title{display:block;text-align:center;
    color:#114e9d;font-size:17px;font-weight:800}
.start-card .player-entry label span,.language-title span{color:#114e9d;font-size:1em;font-weight:700}
.start-card .player-name-input{text-align:center;height:47px}
.language-title{margin:8px 0 6px}
.language-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.language-choice{display:flex;align-items:center;gap:11px;min-height:73px;border:0;border-radius:15px;
    padding:12px;color:white;font-family:inherit;font-size:21px;font-weight:800;
    cursor:pointer;text-align:start;box-shadow:0 3px 8px #cfdbee}
.language-choice small{display:block;margin-top:3px;font-size:12px;font-weight:500}
.language-choice:disabled{opacity:.6;cursor:wait}
.arabic-choice{background:linear-gradient(100deg,#168343,#21aa6b)}
.english-choice{background:linear-gradient(100deg,#1863cd,#337fdf)}
.language-symbol{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;
    border-radius:50%;background:#ffffff32;font-size:19px}
.start-leaderboard{margin-top:10px}
.start-card .designer{margin-top:9px;font-size:13px}

/* خريطة جغرافية: البحر بالأزرق، المناطق المحيطة بالأبيض، ودولة السؤال بالرمادي. */
.map-card{background:white;padding:12px;min-height:0}
.map-stage{width:min(100%,540px);height:auto;aspect-ratio:8/5;display:block;overflow:hidden;
    border:1px solid #b8dbe6;border-radius:12px;background:#9edced}
#mapImage{width:100%;height:100%;filter:none;display:block}
.map-water{fill:#9edced}
.neighbor-shape{fill:#f9fafb;stroke:#333;stroke-width:.85;stroke-linejoin:round;stroke-linecap:round}
.country-shape{fill:#969ca4;stroke:#333;stroke-width:1.1;stroke-linejoin:round}
.country-pin{fill:#8e959e;stroke:#273b51;stroke-width:1.2}
.neighbor-label{max-width:38%;width:max-content;right:auto!important;bottom:auto!important;
    font-size:16px;padding:4px 8px;background:rgba(255,255,255,.95);border-color:#5278a7;
    color:#123d73;line-height:1.25;transform:translate(-50%,-50%)!important}
.neighbor-label.east,.neighbor-label.west{max-height:85%;max-width:none;writing-mode:vertical-rl;
    text-orientation:mixed;padding:7px 4px}
.neighbor-label.west{transform:translate(-50%,-50%) rotate(180deg)!important}
@media(max-width:700px){
    .start-card{padding:12px 13px}
    .intro-heading{gap:6px;margin-bottom:9px}
    .intro-heading .logo-circle{font-size:35px}
    .intro-heading .game-title{font-size:20px}
    .intro-heading .game-title small{font-size:12px}
    .intro-heading .game-subtitle{font-size:16px}
    .start-card .features{gap:5px;margin:7px 0}
    .start-card .feature{font-size:11px;padding:4px 6px}
    .start-card .player-entry label,.language-title{font-size:14px}
    .start-card .player-entry{margin:7px 0 9px}
    .language-choice{min-height:62px;padding:7px;font-size:16px;gap:6px}
    .language-choice small{font-size:10px}
    .language-symbol{width:31px;height:31px;flex-basis:31px;font-size:13px}
    .map-card{min-height:0;padding:6px}
    .map-stage{width:100%;height:auto}
    .neighbor-label{font-size:12px;padding:3px 5px}
    .neighbor-label.east,.neighbor-label.west{padding:5px 3px}
}