/*==========================================================
 * PROGRAM GAMES
 * Mishkaty
 * ألعاب البرامج التعليمية
 *==========================================================*/


/*==========================================================
  PAGE
==========================================================*/

#oab-program-games-page{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;

    overflow:hidden;

    box-sizing:border-box;
}


#oab-program-games-page[style*="display:none"]{
    display:none !important;
}


#oab-program-games-page[style*="display:block"]{
    display:block !important;
}


/*==========================================================
  WRAPPER
==========================================================*/

.oab-program-games-wrap{
    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    display:flex;
    flex-direction:column;

    gap:6px;

    overflow:hidden;

    box-sizing:border-box;
}


/*==========================================================
  HEADER
==========================================================*/

.oab-program-games-header{
    flex:0 0 auto;

    width:100%;

    display:grid;

    grid-template-columns:
        120px
        minmax(0,1fr)
        120px;

    align-items:center;

    gap:16px;

    box-sizing:border-box;
}


.oab-program-games-header > div{
    grid-column:2;

    width:min(100%, 920px);
    min-width:0;

    margin:0 auto;

    padding:12px 20px;

    background:#087a43;
    color:#ffffff;

    border:none;
    outline:none;

    text-align:center;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.30),
        inset 0 -6px 0 rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.24);

    border-radius:14px;

    box-sizing:border-box;
}


#oab-program-games-title{
    margin:0;

    color:#ffffff;

    font-size:34px;
    line-height:1.25;
    font-weight:800;

    text-align:center;
}


#oab-program-games-subtitle{
    margin:6px 0 0;

    color:#ffffff;

    font-size:18px;
    line-height:1.6;
    font-weight:600;

    text-align:center;
}


.oab-program-games-back,
.oab-program-game-close{
    flex:0 0 auto;

    min-height:44px;

    padding:8px 16px;

    border:1px solid #16845b;
    border-radius:0;

    background:#ffffff;
    color:#126b4a;

    font-size:16px;
    font-weight:800;

    cursor:pointer;
}


.oab-program-games-back{
    position:fixed;

    right:18px;
    bottom:18px;

    z-index:100;

    min-width:92px;
    min-height:44px;

    padding:8px 16px;

    background:#087a43;
    color:#ffffff;

    border:none;
    outline:none;

    border-radius:12px;

    font-size:16px;
    font-weight:800;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.30),
        inset 0 -6px 0 rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.24);

    cursor:pointer;
}


/*==========================================================
  GAMES LIST
==========================================================*/

.oab-program-games-list{
    flex:1 1 auto;

    width:min(100%, 920px);

    min-width:0;
    min-height:0;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 210px)
        );

    justify-content:center;
    align-content:start;

    gap:18px;

    padding:16px 0 0;

    transform:none;

    overflow:hidden;

    box-sizing:border-box;
}


.oab-program-game-card{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;

    align-items:stretch;
    justify-content:flex-start;

    gap:0;

    padding:0;

    border:none;
    outline:none;
    box-shadow:none;
    border-radius:0;

    background:transparent;
    color:#ffffff;

    cursor:pointer;

    overflow:hidden;

    box-sizing:border-box;
}


.oab-program-game-icon{
    width:100%;
    aspect-ratio:1 / 1;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:42px;
    line-height:1;

    background:#ffffff;
    color:#173f31;
}

.oab-program-game-image{
    width:100%;
    aspect-ratio:1 / 1;

    display:block;

    object-fit:cover;

    border:none;
    outline:none;
    box-shadow:none;

    margin:0;
    padding:0;
}


.oab-program-game-title{
    flex:0 0 auto;

    width:100%;
    min-width:0;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:6px 8px;

    background:#087a43;
    color:#ffffff;

    font-size:17px;
    line-height:1.3;
    font-weight:800;

    text-align:center;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.30),
        inset 0 -6px 0 rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.24);

    border-radius:0 0 12px 12px;

    box-sizing:border-box;
}


.oab-program-games-empty{
    grid-column:1 / -1;

    padding:18px;

    text-align:center;

    font-size:18px;
    font-weight:700;
}


/*==========================================================
  GAME PLAYER
==========================================================*/

.oab-program-game-player{
    flex:1 1 auto;

    width:100%;

    min-width:0;
    min-height:0;

    overflow:hidden;

    box-sizing:border-box;
}


.oab-program-game-player[style*="display:block"]{
    display:flex !important;
    flex-direction:column;
}


.oab-program-game-player-toolbar{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    min-height:44px;

    margin-bottom:8px;
}


/*==========================================================
  GAME CONTAINER
  يخص البرنامج فقط ولا يغيّر البث المباشر
==========================================================*/

#oab-program-game-container{
    flex:0 0 auto;

    width:100% !important;

    max-width:
        min(
            100%,
            calc((100dvh - 185px) * 16 / 9)
        );

    aspect-ratio:16 / 9 !important;

    margin:0 auto;

    position:relative !important;

    overflow:hidden !important;

    background:transparent;

    border:none;
    outline:none;
    box-shadow:none;

    box-sizing:border-box;
}


/*==========================================================
  LARGE SCREENS
==========================================================*/

@media (min-width:1600px){

    #oab-program-game-container{
        max-width:
            min(
                100%,
                calc((100dvh - 190px) * 16 / 9)
            );
    }

}


/*==========================================================
  DESKTOP / LAPTOP GAMES LIST
  إظهار عنوان اللعبة بدون Scroll
==========================================================*/

@media (min-width:1025px){

    #oab-program-games-page:not(.is-game-playing)
    .oab-program-games-list{
        grid-template-columns:
            repeat(
                4,
                minmax(0, 210px)
            );

        gap:14px;

        padding-top:12px;

        overflow:hidden;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-card{
        overflow:visible;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-icon,
    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-image{
        aspect-ratio:auto;
        height:170px;
        min-height:170px;
        max-height:170px;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-image{
        object-fit:cover;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-title{
        display:flex !important;

        min-height:46px;

        padding:7px 8px;

        font-size:17px;
        line-height:1.3;

        visibility:visible !important;
        opacity:1 !important;

        overflow:visible;
    }

}


/*==========================================================
  TABLET
==========================================================*/

@media (max-width:1024px){

    .oab-program-games-wrap{
        gap:10px;
    }


    #oab-program-games-title{
        font-size:29px;
    }


    #oab-program-games-subtitle{
        font-size:16px;
    }


    #oab-program-game-container{
        max-width:
            min(
                100%,
                calc((100dvh - 170px) * 16 / 9)
            );
    }

}


/*==========================================================
  MOBILE LIST
==========================================================*/

@media (max-width:768px){

    .oab-program-games-list{
        transform:none;
    }


    .oab-program-games-header{
        display:block;

        width:100%;

        padding:0 8px;

        box-sizing:border-box;
    }


    .oab-program-games-header > div{
        width:min(100%, 430px);
        max-width:none;

        margin:0 auto;

        padding:10px 14px;

        border-radius:12px;
    }



    .oab-program-games-header{
        gap:10px;
    }


    #oab-program-games-title{
        font-size:25px;
    }


    #oab-program-games-subtitle{
        margin-top:4px;

        font-size:14px;
    }


    .oab-program-games-back,
    .oab-program-game-close{
        min-height:40px;

        padding:7px 12px;

        font-size:14px;
    }


    .oab-program-games-back{
        right:12px;
        bottom:12px;

        min-width:82px;
    }


    .oab-program-games-list{
        width:min(100%, 430px);

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

        justify-content:center;

        gap:10px;

        padding:8px 8px 0;
    }


    .oab-program-game-card{
        min-height:0;
    }


    .oab-program-game-icon{
        aspect-ratio:1 / 1;

        font-size:34px;
    }


    .oab-program-game-title{
        min-height:40px;

        padding:6px 7px;

        font-size:15px;
    }

}


/*==========================================================
  SMALL MOBILE LIST
==========================================================*/

@media (max-width:480px){

    .oab-program-games-list{
        width:100%;

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

        gap:8px;

        padding-left:8px;
        padding-right:8px;
    }


    .oab-program-game-title{
        min-height:38px;

        font-size:14px;
    }


    #oab-program-games-title{
        font-size:22px;
    }

}


/*==========================================================
  GAME MODE
==========================================================*/

#oab-program-games-page.is-game-playing
.oab-program-games-header{
    display:none !important;
}


#oab-program-games-page.is-game-playing
.oab-program-games-wrap{
    gap:0;
}


#oab-program-games-page.is-game-playing
.oab-program-game-player{
    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    display:flex !important;
    flex-direction:column;

    overflow:hidden;
}


#oab-program-games-page.is-game-playing
.oab-program-game-player-toolbar{
    position:fixed;

    right:18px;
    bottom:18px;

    z-index:100;

    min-height:0;

    margin:0;
}


#oab-program-games-page.is-game-playing
.oab-program-game-close{
    min-width:92px;
    min-height:44px;

    padding:8px 16px;

    background:#087a43;
    color:#ffffff;

    border:none;
    outline:none;

    border-radius:12px;

    font-size:16px;
    font-weight:800;

    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.30),
        inset 0 -6px 0 rgba(0,0,0,.22),
        0 6px 10px rgba(0,0,0,.24);

    cursor:pointer;
}


#oab-program-games-page.is-game-playing
#oab-program-game-container{
    width:
        min(
            100%,
            calc(100dvh * 16 / 9)
        ) !important;

    max-width:
        min(
            100%,
            calc(100dvh * 16 / 9)
        ) !important;

    height:
        min(
            100%,
            100dvh
        ) !important;

    max-height:100%;

    aspect-ratio:16 / 9 !important;

    margin:auto;

    position:relative !important;

    overflow:hidden !important;
}


/*==========================================================
  GAME MODE - TABLET
==========================================================*/

@media (max-width:1024px){

    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar{
        right:18px;
        bottom:18px;
    }

}


/*==========================================================
  GAME MODE - MOBILE PORTRAIT
  الحاوية تأخذ عرض الهاتف الحقيقي بالكامل.
  تصميم عناصر اللعبة نفسها يبقى في tap-choice.css
==========================================================*/

@media (max-width:768px) and (orientation:portrait){

    /*
     * إزالة أي قيود من صفحة البرنامج نفسها.
     */
    #oab-program-games-page.is-game-playing{
        position:fixed !important;

        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;

        background:transparent !important;

        z-index:9999;
    }


    #oab-program-games-page.is-game-playing
    .oab-program-games-wrap{
        width:100% !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;

        gap:0 !important;

        overflow:hidden !important;
    }


    #oab-program-games-page.is-game-playing
    .oab-program-game-player{
        position:relative !important;

        width:100% !important;
        height:100% !important;

        min-width:0 !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        overflow:hidden !important;
    }


    /*
     * زر الألعاب ثابت أسفل اليمين في الهاتف
     * بنفس الهوية المعتمدة في اللابتوب.
     */
    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar{
        position:fixed !important;

        top:auto !important;
        left:auto !important;
        right:12px !important;
        bottom:12px !important;

        z-index:100 !important;

        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;
    }


    #oab-program-games-page.is-game-playing
    .oab-program-game-close{
        min-width:82px !important;
        min-height:40px !important;

        padding:7px 12px !important;

        background:#087a43 !important;
        color:#ffffff !important;

        border:none !important;
        outline:none !important;
        border-radius:12px !important;

        font-size:14px !important;
        font-weight:800 !important;

        box-shadow:
            inset 0 4px 0 rgba(255,255,255,.30),
            inset 0 -6px 0 rgba(0,0,0,.22),
            0 6px 10px rgba(0,0,0,.24) !important;
    }


    /*
     * أهم تعديل:
     * الحاوية لا تعود 9:16 محصورة داخل الأب.
     * تأخذ عرض الهاتف الحقيقي بالكامل وارتفاع الشاشة.
     *
     * game-engine.js ينشئ Stage عمودي 1080 × 1920
     * ويعتمد العرض في التحجيم على الهاتف.
     */
    #oab-program-games-page.is-game-playing
    #oab-program-game-container{
        position:absolute !important;

        inset:0 !important;

        width:100vw !important;
        max-width:none !important;

        height:100dvh !important;
        max-height:none !important;

        min-width:100vw !important;
        min-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        aspect-ratio:auto !important;

        overflow:hidden !important;

        background:transparent !important;

        box-sizing:border-box !important;
    }


    /*
     * محرك اللعبة نفسه يملأ الحاوية الجديدة.
     */
    #oab-program-games-page.is-game-playing
    #oab-program-game-container
    .mishkaty-game-root{
        width:100% !important;
        height:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

}


/*==========================================================
  VERY SMALL MOBILE PORTRAIT
==========================================================*/

@media (max-width:430px) and (orientation:portrait){

    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar{
        top:auto !important;
        right:12px !important;
        bottom:12px !important;
    }

}


/*==========================================================
  REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    .oab-program-game-card,
    .oab-program-games-back,
    .oab-program-game-close{
        transition:none !important;
    }

}

/*==========================================================
  LEVELS / GAMES LIST SCROLL
  السيكرول داخل صفحة المستويات فقط
==========================================================*/

#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list{
    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding-bottom:24px;

    scrollbar-width:auto;
    scrollbar-color:#16845b rgba(255,255,255,.45);
}


#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list::-webkit-scrollbar{
    width:10px;
}


#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list::-webkit-scrollbar-track{
    background:rgba(255,255,255,.45);
}


#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list::-webkit-scrollbar-thumb{
    background:#16845b;
    border:2px solid rgba(255,255,255,.75);
}


/* داخل تشغيل اللعبة يبقى بدون أي Scroll */
#oab-program-games-page.is-game-playing,
#oab-program-games-page.is-game-playing
.oab-program-games-wrap,
#oab-program-games-page.is-game-playing
.oab-program-game-player,
#oab-program-games-page.is-game-playing
#oab-program-game-container{
    overflow:hidden !important;
}

/*==========================================================
  PAGE SCROLL FOR LEVELS / GAMES LIST ONLY
  سيكرول خارجي للصفحة كاملة
==========================================================*/

#oab-program-games-page:not(.is-game-playing){
    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:auto;
    scrollbar-color:#16845b rgba(255,255,255,.45);
}


#oab-program-games-page:not(.is-game-playing)::-webkit-scrollbar{
    width:10px;
}


#oab-program-games-page:not(.is-game-playing)::-webkit-scrollbar-track{
    background:rgba(255,255,255,.45);
}


#oab-program-games-page:not(.is-game-playing)::-webkit-scrollbar-thumb{
    background:#16845b;
    border:2px solid rgba(255,255,255,.75);
}


/* القائمة نفسها لا يكون لها سيكرول داخلي */
#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list{
    overflow:visible !important;
    min-height:max-content;
}


/* أثناء تشغيل اللعبة لا يوجد سيكرول */
#oab-program-games-page.is-game-playing{
    overflow:hidden !important;
}

/*==========================================================
  EXTERNAL PAGE SCROLL - FINAL FIX
  السيكرول الخارجي لصفحة المستويات / قائمة الألعاب فقط
==========================================================*/

#oab-program-games-page:not(.is-game-playing){
    height:100% !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    box-sizing:border-box !important;
}


/*
 * كان الغلاف نفسه بارتفاع 100% و overflow:hidden،
 * لذلك كان يقص البطاقات قبل أن يصل التجاوز إلى الصفحة.
 */
#oab-program-games-page:not(.is-game-playing)
.oab-program-games-wrap{
    height:auto !important;
    min-height:100% !important;

    overflow:visible !important;

    flex:none !important;
}


/*
 * القائمة تأخذ ارتفاع محتواها الحقيقي،
 * ولا تنشئ سيكرول داخليًا.
 */
#oab-program-games-page:not(.is-game-playing)
.oab-program-games-list{
    flex:0 0 auto !important;

    height:auto !important;
    min-height:0 !important;

    overflow:visible !important;

    padding-bottom:70px !important;
}


/*
 * البطاقات كاملة بما فيها العنوان.
 */
#oab-program-games-page:not(.is-game-playing)
.oab-program-game-card{
    overflow:visible !important;
}


/* تشغيل اللعبة يبقى بلا Scroll نهائيًا */
#oab-program-games-page.is-game-playing,
#oab-program-games-page.is-game-playing
.oab-program-games-wrap,
#oab-program-games-page.is-game-playing
.oab-program-game-player,
#oab-program-games-page.is-game-playing
#oab-program-game-container{
    overflow:hidden !important;
}

/*==========================================================
  DESKTOP GAME IMAGES - FULL IMAGE
  بعد اعتماد السيكرول الخارجي لا نحتاج قص الصور
==========================================================*/

@media (min-width:1025px){

    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-icon,
    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-image{
        width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        aspect-ratio:1 / 1 !important;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-image{
        object-fit:cover !important;
        object-position:center center !important;

        display:block !important;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-game-title{
        display:flex !important;

        min-height:46px !important;

        visibility:visible !important;
        opacity:1 !important;
    }

}

/*==========================================================
  MOBILE PAGE SCROLL WITHOUT VISIBLE SCROLLBAR
  التلفون فقط
==========================================================*/

@media (max-width:768px){

    #oab-program-games-page:not(.is-game-playing){
        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none !important;
        -ms-overflow-style:none !important;

        touch-action:pan-y;
    }


    #oab-program-games-page:not(.is-game-playing)::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-games-wrap{
        height:auto !important;
        min-height:100% !important;

        overflow:visible !important;
    }


    #oab-program-games-page:not(.is-game-playing)
    .oab-program-games-list{
        height:auto !important;

        overflow:visible !important;

        padding-bottom:80px !important;
    }

}


/* تشغيل اللعبة على الهاتف يبقى بلا تمرير */
@media (max-width:768px){

    #oab-program-games-page.is-game-playing{
        overflow:hidden !important;

        touch-action:none;
    }

}