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

*{
    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;

    border:2px solid #9ca3af;
    border-radius:4px;

}

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

.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;

    }

}

/*==================================================
        سؤال العاصمة - العربية والإنجليزية
==================================================*/
.capital-question{
    width:100%;
    text-align:center;
    background:#f8fbff;
    border:2px solid #dbeafe;
    border-radius:14px;
    padding:12px 14px;
}
.question-ar{
    direction:rtl;
    font-size:22px;
    font-weight:700;
    color:var(--blue-dark);
    margin-bottom:5px;
}
.question-en{
    direction:ltr;
    font-size:18px;
    font-weight:600;
    color:#555;
}
@media (max-width:700px){
    .capital-question{padding:8px 9px;border-radius:10px;}
    .question-ar{font-size:16px;margin-bottom:2px;}
    .question-en{font-size:14px;}
}
@media (max-width:700px) and (max-height:800px){
    .capital-question{padding:6px 8px;}
    .question-ar{font-size:15px;}
    .question-en{font-size:13px;}
}


/*==================================================
       الإصدار الثاني - اختيار لغة اللعبة
==================================================*/

.bilingual-start{
    direction:rtl;
}

.start-title-en{
    direction:ltr;
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:var(--blue);
    margin:2px 0 8px;
}

.welcome-bilingual{
    color:#555;
    font-size:18px;
    line-height:1.7;
    margin-bottom:20px;
}

.welcome-bilingual p{
    margin:0 0 5px;
}

.welcome-bilingual .english-line{
    direction:ltr;
    text-align:center;
    font-size:16px;
}

.bilingual-start .feature span{
    display:inline-block;
    direction:ltr;
    font-size:14px;
    font-weight:500;
    color:#667085;
}

.language-title{
    margin:4px 0 12px;
    font-size:18px;
    font-weight:700;
    color:var(--blue-dark);
}

.language-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.language-btn{
    min-height:58px;
}

.english-select{
    direction:ltr;
}

.bilingual-designer span{
    direction:ltr;
    display:inline-block;
    margin-top:3px;
    font-size:14px;
}

.question-single{
    width:100%;
    text-align:center;
    font-size:22px;
    font-weight:700;
    color:var(--blue-dark);
}

.single-language-answer{
    display:flex;
    justify-content:center;
    text-align:center;
    font-size:21px;
    font-weight:700;
}

html[dir="ltr"] body{
    direction:ltr;
}

html[dir="ltr"] .stat-card,
html[dir="ltr"] .game-controls{
    direction:ltr;
}

html[dir="ltr"] .designer,
html[dir="ltr"] .result-card,
html[dir="ltr"] .modal-box{
    direction:ltr;
}

.secondary-home-btn{
    width:100%;
    border:2px solid #dbeafe;
    border-radius:18px;
    padding:14px;
    margin-top:10px;
    background:#f8fbff;
    color:var(--blue-dark);
    font-family:inherit;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
}

.secondary-home-btn:hover{
    background:#eaf3ff;
}

@media (max-width:700px){
    .start-title-en{
        font-size:18px;
        margin-bottom:5px;
    }

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

    .welcome-bilingual .english-line{
        font-size:13px;
    }

    .bilingual-start .feature span{
        font-size:11px;
    }

    .language-title{
        font-size:14px;
        margin:2px 0 8px;
    }

    .language-btn{
        min-height:45px;
        font-size:17px;
        padding:9px;
    }

    .question-single{
        font-size:16px;
    }

    .single-language-answer{
        font-size:16px;
    }

    .secondary-home-btn{
        min-height:44px;
        padding:10px;
        font-size:16px;
    }
}

@media (max-width:700px) and (max-height:800px){
    .start-title-en{font-size:16px;}
    .welcome-bilingual{font-size:13px;margin-bottom:7px;}
    .welcome-bilingual .english-line{font-size:12px;}
    .language-title{font-size:13px;margin-bottom:6px;}
    .language-btn{min-height:42px;font-size:16px;padding:7px;}
}


/*==================================================
  V3 - بداية حديثة + اسم اللاعب + أفضل 5 / أفضل 10
==================================================*/

.start-modern{
  max-width:650px;
  padding:18px 22px 16px;
}

.start-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:8px;
}

.start-brand .logo-circle{
  margin:0;
  font-size:54px;
  flex:0 0 auto;
}

.start-modern .game-title{
  font-size:29px;
  margin:0 0 2px;
}

.start-modern .start-title-en{
  font-size:17px;
  margin:0;
}

.start-modern .game-subtitle{
  font-size:20px;
  margin:2px 0 0;
}

.quick-info{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0;
}

.quick-info span{
  background:#f2f7ff;
  border:1px solid #d8e8ff;
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  font-weight:700;
  color:#31527c;
}

.modern-entry{
  margin:8px auto 10px;
  max-width:520px;
}

.modern-entry label{
  display:block;
  text-align:center;
  font-weight:800;
  margin-bottom:6px;
  color:var(--blue-dark);
}

.modern-entry label span{
  direction:ltr;
  display:inline-block;
  font-weight:600;
}

.player-name-input{
  width:100%;
  min-height:46px;
  border:2px solid #d7e7fb;
  border-radius:13px;
  padding:10px 14px;
  font-family:inherit;
  font-size:17px;
  text-align:center;
  outline:none;
  background:#fbfdff;
}

.player-name-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(21,101,192,.10);
}

.name-error{
  color:#c62828;
  min-height:20px;
  font-size:13px;
  margin-top:4px;
}

.start-modern .language-title{
  margin:4px 0 8px;
  font-size:15px;
}

.modern-language-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:11px;
}

.language-choice{
  border:none;
  border-radius:16px;
  min-height:72px;
  padding:9px 12px;
  cursor:pointer;
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:9px;
  text-align:start;
  font-family:inherit;
  transition:.2s;
  box-shadow:0 5px 14px rgba(0,0,0,.09);
}

.language-choice:hover{ transform:translateY(-2px); }

.language-choice .choice-icon{
  grid-row:1/3;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.22);
  font-weight:900;
  font-size:18px;
}

.language-choice strong{font-size:20px;}
.language-choice small{font-size:12px;opacity:.9;}

.ar-choice{
  background:linear-gradient(135deg,#138a4a,#28a95f);
  color:#fff;
  direction:rtl;
}

.en-choice{
  background:linear-gradient(135deg,#1565c0,#2f83e8);
  color:#fff;
  direction:ltr;
}

.compact-board{
  margin:7px 0 5px;
  border:1px solid #dbe8f8;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.board-head{
  min-height:42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  background:#f4f8fe;
}

.board-head > div{
  display:flex;
  flex-direction:column;
  text-align:start;
}

.board-head strong{font-size:15px;color:var(--blue-dark);}
.board-head small{font-size:11px;color:#667085;}

.top10-btn{
  border:1px solid #bfd8fa;
  border-radius:10px;
  background:#fff;
  color:var(--blue);
  padding:7px 10px;
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

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

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

.start-leaderboard-table th{
  color:#52657a;
  background:#fbfdff;
}

.start-leaderboard-table tbody tr:nth-child(1){background:#fff9df;}
.start-leaderboard-table tbody tr:nth-child(2){background:#f7f9fc;}
.start-leaderboard-table tbody tr:nth-child(3){background:#fff5ed;}

.empty-home-score{
  padding:12px !important;
  color:#667085;
}

.player-playing{
  text-align:center;
  margin:2px 0 6px;
  font-size:14px;
  color:#52657a;
}

.stats{
  grid-template-columns:repeat(4,1fr);
}

.leaderboard-page-card{
  width:100%;
  max-width:650px;
  text-align:center;
  padding:24px 18px;
}

.leaderboard-page-card .trophy{
  font-size:48px;
  margin-bottom:3px;
}

.leaderboard-page-card h2{
  color:var(--blue);
  margin-bottom:14px;
}

.leaderboard-wrap{
  width:100%;
  overflow:auto;
  border:1px solid #dbe8f8;
  border-radius:14px;
  margin-bottom:14px;
}

.leaderboard-table{
  width:100%;
  border-collapse:collapse;
  min-width:550px;
  font-size:13px;
}

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

.leaderboard-table th{
  background:#f4f8fe;
  color:#52657a;
}

.secondary-blue-btn{
  max-width:280px;
  margin:auto;
}

.completion-note{
  margin:12px 0;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
}

.completion-note.completed{
  background:#effaf2;
  border:1px solid #bfe4c9;
  color:#256c39;
}

.completion-note.incomplete{
  background:#fff3f3;
  border:1px solid #efc5c5;
  color:#9c2d2d;
}

.result-player{
  margin-bottom:12px;
  font-size:16px;
  color:#52657a;
}

.result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:700px){
  .start-modern{
    padding:9px 11px 10px;
  }

  .start-brand{
    gap:7px;
    margin-bottom:5px;
  }

  .start-brand .logo-circle{
    font-size:38px;
  }

  .start-modern .game-title{
    font-size:20px;
  }

  .start-modern .start-title-en{
    font-size:13px;
  }

  .start-modern .game-subtitle{
    font-size:15px;
  }

  .quick-info{
    gap:4px;
    margin:6px 0;
  }

  .quick-info span{
    padding:4px 7px;
    font-size:10px;
  }

  .modern-entry{
    margin:5px auto 6px;
  }

  .modern-entry label{
    font-size:13px;
    margin-bottom:4px;
  }

  .player-name-input{
    min-height:39px;
    padding:7px 10px;
    font-size:14px;
  }

  .name-error{
    min-height:15px;
    font-size:11px;
    margin-top:2px;
  }

  .start-modern .language-title{
    font-size:12px;
    margin:2px 0 5px;
  }

  .modern-language-buttons{
    gap:7px;
    margin-bottom:7px;
  }

  .language-choice{
    min-height:57px;
    border-radius:12px;
    padding:6px 8px;
    grid-template-columns:35px 1fr;
    column-gap:6px;
  }

  .language-choice .choice-icon{
    width:33px;
    height:33px;
    font-size:13px;
  }

  .language-choice strong{font-size:16px;}
  .language-choice small{font-size:9px;}

  .compact-board{
    margin:5px 0 3px;
  }

  .board-head{
    min-height:34px;
    padding:5px 7px;
  }

  .board-head strong{font-size:12px;}
  .board-head small{font-size:9px;}

  .top10-btn{
    font-size:10px;
    padding:5px 7px;
  }

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

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

  .bilingual-designer{
    margin-top:5px !important;
    font-size:11px !important;
  }

  .bilingual-designer span{
    font-size:10px !important;
  }

  .stats{
    grid-template-columns:repeat(4,1fr);
    gap:4px;
  }

  .result-actions{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px) and (max-height:800px){
  .quick-info span{font-size:9px;}
  .language-choice{min-height:52px;}
  .compact-board .start-leaderboard-table tbody tr:nth-child(n+5){display:none;}
}