/*==========================================================
 * MISKHATY GAMES
 * Game Type: Tap Choice
 * Version 1.2.1
 * Reference Stage: 1920 × 1080
 *
 * DESIGN VARIABLES READY
 * هذا الملف أصبح جاهزًا لاستقبال تصميم كل لعبة
 * من مصنع ألعاب مشكاتي بدون تعديل CSS يدويًا.
 *==========================================================*/


/*==========================================================
  MAIN SCREEN + DESIGN DEFAULTS
==========================================================*/

.mishkaty-tap-choice-screen{

    /*
    ======================================================
    DESIGN VARIABLES
    القيم الافتراضية — يستطيع Game Builder تغييرها لاحقًا
    ======================================================
    */

    --mishkaty-game-background:
        radial-gradient(
            circle at 8% 15%,
            rgba(244,188,62,.16) 0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(77,163,217,.14) 0 8px,
            transparent 9px
        ),
        radial-gradient(
            circle at 10% 88%,
            rgba(154,116,194,.12) 0 7px,
            transparent 8px
        ),
        radial-gradient(
            circle at 90% 86%,
            rgba(22,132,91,.14) 0 8px,
            transparent 9px
        ),
        linear-gradient(
            135deg,
            #f6fff9 0%,
            #fffdf3 52%,
            #f4fbff 100%
        );

    --mishkaty-title-color:#244c3b;
    --mishkaty-question-color:#BA2100;

    --mishkaty-progress-bg:#ffffff;
    --mishkaty-progress-border:#16845b;
    --mishkaty-progress-color:#126b4a;

    --mishkaty-choice-bg:#ffffff;
    --mishkaty-choice-border:#c4ddcf;
    --mishkaty-choice-hover-bg:#f5fff8;
    --mishkaty-choice-hover-border:#16845b;
    --mishkaty-choice-text-color:#244c3b;

    --mishkaty-correct-bg:#e9f9ef;
    --mishkaty-correct-border:#35a866;

    --mishkaty-wrong-bg:#fff0f0;
    --mishkaty-wrong-border:#e15a5a;

    --mishkaty-title-size:54px;
    --mishkaty-question-size:45px;
    --mishkaty-choice-text-size:82px;

    --mishkaty-question-image-width:420px;
    --mishkaty-question-image-height:170px;

    --mishkaty-choice-image-width:90%;
    --mishkaty-choice-image-height:300px;

    --mishkaty-choice-gap:35px;
    --mishkaty-choice-border-width:5px;

    --mishkaty-finish-background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f5fff8 55%,
            #fff9e6 100%
        );

    --mishkaty-finish-icon-size:180px;


    display:grid;

    grid-template-rows:
        150px
        300px
        minmax(0,1fr);

    width:100%;
    height:100%;

    padding:35px 70px 45px;

    background:
        var(
            --mishkaty-game-background
        );
}


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

.mishkaty-tap-header{
    display:grid;

    grid-template-columns:
        1fr
        150px;

    align-items:center;

    gap:25px;
}


.mishkaty-tap-header
.mishkaty-game-title{
    text-align:right;

    color:
        var(
            --mishkaty-title-color
        );

    font-size:
        var(
            --mishkaty-title-size
        );
}


.mishkaty-tap-progress{
    display:flex;

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

    width:150px;
    height:76px;

    background:
        var(
            --mishkaty-progress-bg
        );

    border:
        4px solid
        var(
            --mishkaty-progress-border
        );

    color:
        var(
            --mishkaty-progress-color
        );

    font-size:32px;
    font-weight:800;
}


/*==========================================================
  QUESTION
==========================================================*/

.mishkaty-tap-question-area{
    display:flex;

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

    flex-direction:column;

    gap:20px;

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

    text-align:center;
}


.mishkaty-tap-question-area
.mishkaty-game-instruction{
    color:
        var(
            --mishkaty-question-color
        );

    font-size:
        var(
            --mishkaty-question-size
        );
}


.mishkaty-tap-question-image{
    display:block;

    width:auto;
    height:auto;

    max-width:
        var(
            --mishkaty-question-image-width
        );

    max-height:
        var(
            --mishkaty-question-image-height
        );

    object-fit:contain;

    user-select:none;
    -webkit-user-select:none;

    pointer-events:none;
}


/*==========================================================
  CHOICES
==========================================================*/

.mishkaty-tap-choices{
    display:grid;

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

    align-items:stretch;

    gap:
        var(
            --mishkaty-choice-gap
        );

    width:100%;
    height:100%;

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

    padding:20px 0;
}


/*==========================================================
  CHOICE BUTTON
==========================================================*/

.mishkaty-tap-choice{
    display:flex;

    flex-direction:column;

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

    gap:20px;

    width:100%;
    height:100%;

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

    padding:30px;

    background:
        var(
            --mishkaty-choice-bg
        );

    border:
        var(
            --mishkaty-choice-border-width
        )
        solid
        var(
            --mishkaty-choice-border
        );

    border-radius:0;

    box-shadow:
        0 12px 0 rgba(35,91,66,.08);

    color:
        var(
            --mishkaty-choice-text-color
        );

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

    cursor:pointer;

    touch-action:manipulation;

    user-select:none;
    -webkit-user-select:none;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease;
}


.mishkaty-tap-choice:hover{
    border-color:
        var(
            --mishkaty-choice-hover-border
        );

    background:
        var(
            --mishkaty-choice-hover-bg
        );

    transform:
        translateY(-5px);
}


.mishkaty-tap-choice:active{
    transform:
        translateY(2px);
}


/*==========================================================
  CHOICE IMAGE
==========================================================*/

.mishkaty-tap-choice-image{
    display:block;

    width:auto;
    height:auto;

    max-width:
        var(
            --mishkaty-choice-image-width
        );

    max-height:
        var(
            --mishkaty-choice-image-height
        );

    object-fit:contain;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;
}


/*==========================================================
  CHOICE TEXT
==========================================================*/

.mishkaty-tap-choice-text{
    display:block;

    color:
        var(
            --mishkaty-choice-text-color
        );

    font-size:
        var(
            --mishkaty-choice-text-size
        );

    line-height:1.25;
    font-weight:800;

    text-align:center;

    pointer-events:none;
}


/*==========================================================
  CORRECT / WRONG
==========================================================*/

.mishkaty-tap-choice
.mishkaty-game-correct{
    border-color:
        var(
            --mishkaty-correct-border
        ) !important;

    background:
        var(
            --mishkaty-correct-bg
        ) !important;

    transform:
        scale(1.025);
}


.mishkaty-tap-choice
.mishkaty-game-wrong{
    border-color:
        var(
            --mishkaty-wrong-border
        ) !important;

    background:
        var(
            --mishkaty-wrong-bg
        ) !important;
}


/*==========================================================
  FINISH SCREEN
==========================================================*/

.mishkaty-tap-finish{
    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

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

    gap:35px;

    padding:70px;

    background:
        var(
            --mishkaty-finish-background
        );

    text-align:center;
}


.mishkaty-tap-finish
.mishkaty-game-title{
    color:
        var(
            --mishkaty-title-color
        );

    font-size:
        var(
            --mishkaty-title-size
        );
}


.mishkaty-tap-finish
.mishkaty-game-instruction{
    color:
        var(
            --mishkaty-question-color
        );

    font-size:
        var(
            --mishkaty-question-size
        );
}


.mishkaty-tap-finish-icon{
    font-size:
        var(
            --mishkaty-finish-icon-size
        );

    line-height:1;
}


/*==========================================================
  FEEDBACK
==========================================================*/

.mishkaty-tap-choice
.mishkaty-game-feedback{
    z-index:20;
}


/*==========================================================
  FOUR CHOICES
==========================================================*/

.mishkaty-tap-choices:has(
    .mishkaty-tap-choice:nth-child(4)
){
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:25px;
}


.mishkaty-tap-choices:has(
    .mishkaty-tap-choice:nth-child(4)
)
.mishkaty-tap-choice-text{
    font-size:
        calc(
            var(
                --mishkaty-choice-text-size
            ) * .83
        );
}


/*==========================================================
  TOUCH DEVICES
==========================================================*/

@media (hover:none){

    .mishkaty-tap-choice:hover{
        border-color:
            var(
                --mishkaty-choice-border
            );

        background:
            var(
                --mishkaty-choice-bg
            );

        transform:none;
    }

}



/*==========================================================
  PROGRAM GAME PLAYER — VISUAL POLISH
  صفحة تشغيل اللعبة فقط — لا يؤثر على البث المباشر
==========================================================*/

#oab-program-games-page.is-game-playing
.mishkaty-game-root,
#oab-program-games-page.is-game-playing
.mishkaty-game-stage,
#oab-program-games-page.is-game-playing
.mishkaty-tap-choice-screen{
    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
}


/* لوحة العنوان الخضراء */

#oab-program-games-page.is-game-playing
.mishkaty-tap-header{
    position:relative;

    width:min(100%, 1440px);

    margin:0 auto;

    padding:10px 22px;

    background:#087a43;

    border:none;
    outline:none;

    border-radius:14px;

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

    box-sizing:border-box;
}


#oab-program-games-page.is-game-playing
.mishkaty-tap-header
.mishkaty-game-title{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:auto;
    max-width:70%;

    margin:0;

    color:#ffffff !important;

    font-size:45px;
    line-height:1.2;
    font-weight:800;

    text-align:center;
    white-space:nowrap;
}


/* العداد داخل لوحة العنوان */

#oab-program-games-page.is-game-playing
.mishkaty-tap-progress{
    background:rgba(255,255,255,.96);

    border:3px solid rgba(255,255,255,.88);
    border-radius:12px;

    color:#087a43;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.55),
        0 3px 7px rgba(0,0,0,.15);
}


/*
 * اللابتوب فقط:
 * نقل العداد إلى الجهة اليسرى
 * مع إبقاء عنوان اللعبة في المنتصف دون أي تحريك.
 */
@media (min-width:769px){

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header{
        direction:ltr;

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


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header
    .mishkaty-game-title{
        direction:rtl;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-progress{
        grid-column:1;
        grid-row:1;

        justify-self:start;
    }

}


/* السؤال أسفل العنوان */

#oab-program-games-page.is-game-playing
.mishkaty-tap-question-area
.mishkaty-game-instruction{
    color:#ff0000;

    transform:translateY(18px);
}

/*==========================================================
  MOBILE PORTRAIT — PROGRAM GAMES ONLY
  المسرح هنا 1080 × 1920
  لا يؤثر على اللابتوب أو البث المباشر
==========================================================*/

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

    /*
     * إزالة الخلفية البيضاء والإطار الخارجي
     * من مساحة اللعبة على الهاتف فقط.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-root,
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage,
    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choice-screen{
        background:transparent !important;
        border:none !important;
        outline:none !important;
        box-shadow:none !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choice-screen{

        --mishkaty-title-size:58px;
        --mishkaty-question-size:48px;
        --mishkaty-choice-text-size:60px;

        --mishkaty-question-image-width:520px;
        --mishkaty-question-image-height:190px;

        --mishkaty-choice-image-width:350px;
        --mishkaty-choice-image-height:250px;

        --mishkaty-choice-gap:12px;
        --mishkaty-choice-border-width:4px;

        display:grid;

        /*
         * تقليص الفراغ العلوي أكثر.
         */
        grid-template-rows:
            94px
            118px
            minmax(0,1fr);

        width:100%;
        height:100%;

        /*
         * تعريض مربعات الاختيار:
         * تقليل الهوامش الجانبية جدًا.
         */
        padding:
            4px
            4px
            18px;
    }


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

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header{
        display:grid;

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

        align-items:center;

        gap:10px;

        width:100%;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header
    .mishkaty-game-title{
        min-width:0;

        margin:0;

        font-size:
            var(
                --mishkaty-title-size
            );

        line-height:1.12;

        text-align:center;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-progress{
        width:132px;
        height:58px;

        font-size:28px;
    }


    /*========================
      QUESTION
    ========================*/

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-question-area{
        width:100%;

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

        display:flex;

        flex-direction:column;

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

        gap:2px;

        padding:0;

        text-align:center;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-question-area
    .mishkaty-game-instruction{
        width:100%;

        margin:0;

        font-size:
            var(
                --mishkaty-question-size
            );

        line-height:1.16;

        text-align:center;
    }


    /*========================
      THREE CHOICES
      الصورة أعلى والاسم أسفلها
      ومربع الاختيار أعرض
    ========================*/

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

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

        display:grid;

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-template-rows:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        align-items:stretch;

        gap:
            var(
                --mishkaty-choice-gap
            );

        padding:0;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{

        width:100%;
        max-width:none;
        height:100%;

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

        display:flex;

        flex-direction:column;

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

        gap:7px;

        margin:0;

        padding:
            8px
            8px
            10px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choice-image{
        width:auto;
        height:auto;

        max-width:
            var(
                --mishkaty-choice-image-width
            );

        max-height:
            var(
                --mishkaty-choice-image-height
            );

        object-fit:contain;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choice-text{
        width:100%;

        margin:0;

        font-size:
            var(
                --mishkaty-choice-text-size
            );

        line-height:1.12;

        text-align:center;
    }


    /*========================
      FOUR CHOICES
      2 × 2 على الهاتف
    ========================*/

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices:has(
        .mishkaty-tap-choice:nth-child(4)
    ){
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        grid-template-rows:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:12px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices:has(
        .mishkaty-tap-choice:nth-child(4)
    )
    > .mishkaty-tap-choice{

        gap:6px;

        padding:8px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices:has(
        .mishkaty-tap-choice:nth-child(4)
    )
    .mishkaty-tap-choice-image{

        max-width:86%;
        max-height:210px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices:has(
        .mishkaty-tap-choice:nth-child(4)
    )
    .mishkaty-tap-choice-text{

        font-size:
            calc(
                var(
                    --mishkaty-choice-text-size
                ) * .80
            );
    }


    /*========================
      FINISH
    ========================*/

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-finish{
        padding:42px 24px;

        gap:22px;
    }

}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choice-screen{

        --mishkaty-title-size:54px;
        --mishkaty-question-size:44px;
        --mishkaty-choice-text-size:56px;

        --mishkaty-choice-image-width:320px;
        --mishkaty-choice-image-height:230px;

        grid-template-rows:
            88px
            108px
            minmax(0,1fr);

        padding:
            2px
            2px
            14px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices{
        gap:10px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{

        gap:6px;

        padding:
            7px
            6px
            8px;
    }

}

/*==========================================================
  MOBILE PORTRAIT — STAGE CLASS ONLY
  يعتمد فقط على الكلاس الذي يضعه game-engine.js
  لا يؤثر على اللابتوب أو البث
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-screen{
    width:100% !important;
    height:100% !important;

    padding:
        4px
        24px
        18px !important;

    grid-template-rows:
        92px
        112px
        minmax(0,1fr) !important;

    background:transparent !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-header{
    width:100% !important;

    grid-template-columns:
        minmax(0,1fr)
        132px !important;

    gap:10px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-progress{
    width:132px !important;
    height:58px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-question-area{
    margin:0 !important;
    padding:0 !important;

    gap:2px !important;

    justify-content:flex-start !important;
}


/*
 * أهم جزء:
 * Stage الهاتف عرضه 1080px.
 * نجعل منطقة الخيارات 960px من أصل 1080px.
 */
.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices{
    width:960px !important;
    max-width:960px !important;

    height:100% !important;

    margin:
        0
        auto !important;

    padding:0 !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    grid-template-rows:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:12px !important;

    justify-self:center !important;

    box-sizing:border-box !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices
> .mishkaty-tap-choice{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:100% !important;

    margin:0 !important;

    padding:
        10px
        16px
        12px !important;

    display:flex !important;

    flex-direction:column !important;

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

    gap:8px !important;

    box-sizing:border-box !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-image{
    display:block !important;

    max-width:340px !important;
    max-height:245px !important;

    margin:0 auto !important;

    object-fit:contain !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-text{
    width:100% !important;

    margin:
        4px
        0
        0 !important;

    text-align:center !important;
}


/*==========================================================
  FOUR CHOICES — MOBILE PORTRAIT
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices:has(
    .mishkaty-tap-choice:nth-child(4)
){
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    grid-template-rows:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:12px !important;
}

/*==========================================================
  MOBILE — GAMES BUTTON FINAL FIX
  إصلاح شكل زر الألعاب فقط على الهاتف
  لا يؤثر على اللابتوب
==========================================================*/

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

    #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:9999 !important;

        width:auto !important;
        height:auto !important;

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

        background:transparent !important;
        border:none !important;
        outline:none !important;
        box-shadow:none !important;
    }


    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar
    .oab-program-game-close{
        display:flex !important;

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

        width:auto !important;
        min-width:82px !important;
        height:auto !important;
        min-height:42px !important;

        margin:0 !important;
        padding:8px 14px 11px !important;

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

        color:#ffffff !important;

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

        font-family:
            "Cairo",
            "Tahoma",
            "Arial",
            sans-serif !important;

        font-size:14px !important;
        line-height:1 !important;
        font-weight:800 !important;

        text-align:center !important;
        text-decoration:none !important;

        opacity:1 !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;
    }


    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar
    .oab-program-game-close:hover,
    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar
    .oab-program-game-close:focus,
    #oab-program-games-page.is-game-playing
    .oab-program-game-player-toolbar
    .oab-program-game-close:active{
        background:#087a43 !important;
        background-color:#087a43 !important;

        color:#ffffff !important;

        border:0 !important;
        outline:0 !important;
    }

}

/*==========================================================
  MOBILE PORTRAIT — COMPACT CHOICES + TITLE BALANCE
  الهاتف فقط — لا يؤثر على اللابتوب
==========================================================*/

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

    /*
     * عنوان اللعبة داخل اللوحة الخضراء
     * أصغر قليلًا ومتوازن مع ارتفاع اللوحة.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header
    .mishkaty-game-title{
        font-size:44px !important;
        line-height:1.08 !important;
        max-width:72% !important;
    }


    /*
     * منطقة الخيارات الثلاثة:
     * نجعلها أكثر تماسكًا وأقصر ارتفاعًا.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        width:960px !important;
        max-width:960px !important;

        height:auto !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-template-rows:
            repeat(
                3,
                320px
            ) !important;

        align-content:start !important;

        gap:10px !important;

        margin:
            0
            auto !important;

        padding:0 !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        width:100% !important;
        height:320px !important;

        min-height:320px !important;
        max-height:320px !important;

        margin:0 !important;

        padding:
            8px
            14px
            10px !important;

        gap:6px !important;

        justify-content:center !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:320px !important;
        max-height:210px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        margin:
            2px
            0
            0 !important;

        font-size:52px !important;
        line-height:1.05 !important;
    }

}


/*==========================================================
  VERY SMALL MOBILE — EXTRA COMPACT
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-tap-header
    .mishkaty-game-title{
        font-size:40px !important;
        max-width:70% !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        grid-template-rows:
            repeat(
                3,
                300px
            ) !important;

        gap:8px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        height:300px !important;

        min-height:300px !important;
        max-height:300px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:300px !important;
        max-height:195px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        font-size:48px !important;
    }

}

/*==========================================================
  MOBILE PORTRAIT — FINAL 4-CHOICE LAYOUT
  الهاتف فقط — تجهيز المساحة حتى 4 خيارات
  لا يؤثر على اللابتوب
==========================================================*/

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

    /*
     * تقليل الفراغ بين السؤال والخيارات.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait{
        justify-content:flex-start !important;
        padding-top:0 !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question{
        margin-bottom:18px !important;
    }


    /*
     * حاوية الخيارات:
     * مصممة لتستوعب 4 خيارات في عمود واحد.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        width:960px !important;
        max-width:960px !important;

        height:auto !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-template-rows:
            repeat(
                4,
                245px
            ) !important;

        align-content:start !important;

        gap:8px !important;

        margin:
            0
            auto !important;

        padding:0 !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        width:100% !important;
        height:245px !important;

        min-height:245px !important;
        max-height:245px !important;

        margin:0 !important;

        padding:
            6px
            14px
            8px !important;

        gap:4px !important;

        justify-content:center !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:270px !important;
        max-height:160px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        margin:
            2px
            0
            0 !important;

        font-size:44px !important;
        line-height:1.02 !important;
    }

}


/*==========================================================
  VERY SMALL MOBILE — 4 CHOICES
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question{
        margin-bottom:14px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        grid-template-rows:
            repeat(
                4,
                225px
            ) !important;

        gap:7px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        height:225px !important;

        min-height:225px !important;
        max-height:225px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:245px !important;
        max-height:145px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        font-size:40px !important;
    }

}

/*==========================================================
  MOBILE PORTRAIT — 4 CHOICES / TALLER + CLOSER
  الهاتف فقط — بطاقات أطول وأقرب للسؤال والعنوان
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait{
        justify-content:flex-start !important;
        padding-top:0 !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question{
        margin-top:0 !important;
        margin-bottom:8px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        grid-template-rows:
            repeat(4, 285px) !important;

        gap:8px !important;

        margin-top:0 !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        height:285px !important;
        min-height:285px !important;
        max-height:285px !important;

        padding:8px 14px 10px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:290px !important;
        max-height:185px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        font-size:46px !important;
    }

}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question{
        margin-bottom:6px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        grid-template-rows:
            repeat(4, 265px) !important;

        gap:7px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        height:265px !important;
        min-height:265px !important;
        max-height:265px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:270px !important;
        max-height:170px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        font-size:44px !important;
    }

}

/*==========================================================
  MOBILE PORTRAIT — EQUAL HEIGHT BY ACTUAL CARD COUNT
  الهاتف فقط
  البطاقات تملأ المساحة من بعد السؤال حتى قرب زر الألعاب
  دون تغيير Stage أو اللابتوب
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-screen{
        grid-template-rows:
            92px
            102px
            minmax(0,1fr) !important;

        padding:
            4px
            24px
            92px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question-area{
        align-self:start !important;

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

        justify-content:flex-start !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        align-self:stretch !important;

        width:960px !important;
        max-width:960px !important;

        height:100% !important;
        min-height:0 !important;

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

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-template-rows:none !important;
        grid-auto-flow:row !important;
        grid-auto-rows:minmax(0,1fr) !important;

        align-content:stretch !important;

        gap:8px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices
    > .mishkaty-tap-choice{
        width:100% !important;

        height:100% !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;

        padding:
            8px
            14px
            10px !important;

        gap:5px !important;

        justify-content:center !important;

        box-sizing:border-box !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        width:auto !important;
        height:auto !important;

        max-width:300px !important;
        max-height:68% !important;

        object-fit:contain !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        margin:2px 0 0 !important;

        font-size:44px !important;
        line-height:1.05 !important;
    }

}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-screen{
        grid-template-rows:
            88px
            96px
            minmax(0,1fr) !important;

        padding:
            2px
            20px
            86px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        width:968px !important;
        max-width:968px !important;

        gap:7px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-image{
        max-width:275px !important;
        max-height:66% !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-text{
        font-size:42px !important;
    }

}

/*==========================================================
  MOBILE PORTRAIT — ANSWERS CLOSER TO QUESTION
  وإبعادها قليلًا عن زر الألعاب
  الهاتف فقط — لا يؤثر على اللابتوب
==========================================================*/

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

    /*
     * تقليل الفراغ بين السؤال وبداية الأجوبة.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question-area{
        margin-bottom:4px !important;
    }


    /*
     * مساحة الخيارات:
     * تبدأ أقرب للسؤال،
     * وتنتهي أعلى قليلًا قبل زر الألعاب.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-screen{
        grid-template-rows:
            92px
            96px
            minmax(0,1fr) !important;

        padding:
            4px
            24px
            108px !important;
    }


    /*
     * المحافظة على التوزيع المتساوي
     * حسب عدد البطاقات الفعلي: 2 أو 3 أو 4.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choices{
        height:100% !important;

        grid-template-rows:none !important;
        grid-auto-rows:minmax(0,1fr) !important;

        align-content:stretch !important;

        margin-top:0 !important;
        margin-bottom:0 !important;
    }

}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-question-area{
        margin-bottom:3px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-tap-choice-screen{
        grid-template-rows:
            88px
            90px
            minmax(0,1fr) !important;

        padding:
            2px
            20px
            102px !important;
    }

}

/*==========================================================
  PREVIEW IFRAME — EXACT REAL DEVICE LAYOUT
  مصنع الألعاب فقط

  الفكرة:
  المعاينة لا تصنع تصميمًا خاصًا بها.
  بل تستخدم نفس Stage الهاتف الحقيقي 1080 × 1920
  ونفس قواعد .mishkaty-mobile-portrait الموجودة أعلاه.

  لذلك:
  - الهاتف في المعاينة = الهاتف الحقيقي.
  - التابلت/الكمبيوتر يبقيان على المسرح المرجعي المعتاد.
  - لا توجد نسخة CSS مصغرة مستقلة للهاتف داخل المعاينة.
==========================================================*/

/*
 * داخل iframe المعاينة يكون Stage نفسه هو العنصر المباشر.
 * عند اختيار الهاتف يضيف game-engine.js الكلاس:
 * .mishkaty-mobile-portrait
 *
 * نكرر فقط سياق صفحة التشغيل الحقيقي حتى تعمل القواعد نفسها
 * بدون الحاجة إلى #oab-program-games-page داخل iframe.
 */

body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-screen{
    width:100% !important;
    height:100% !important;

    padding:
        4px
        24px
        108px !important;

    grid-template-rows:
        92px
        96px
        minmax(0,1fr) !important;

    background:transparent !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-header{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        132px !important;

    align-items:center !important;

    gap:10px !important;

    width:100% !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-header
.mishkaty-game-title{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:
        translate(-50%,-50%) !important;

    width:auto !important;
    max-width:72% !important;

    margin:0 !important;

    color:#ffffff !important;

    font-size:44px !important;
    line-height:1.08 !important;
    font-weight:800 !important;

    text-align:center !important;
    white-space:nowrap !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-progress{
    width:132px !important;
    height:58px !important;

    font-size:28px !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-question-area{
    width:100% !important;

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

    display:flex !important;

    flex-direction:column !important;

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

    gap:2px !important;

    align-self:start !important;

    margin:0 0 4px !important;
    padding:0 !important;

    text-align:center !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-question-area
.mishkaty-game-instruction{
    width:100% !important;

    margin:0 !important;

    color:#ff0000 !important;

    transform:translateY(18px) !important;

    font-size:48px !important;
    line-height:1.16 !important;

    text-align:center !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-question-image{
    max-width:520px !important;
    max-height:190px !important;
}


/*
 * نفس عرض الخيارات في الهاتف الحقيقي:
 * 960px من Stage عرضه 1080px.
 */
body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices{
    align-self:stretch !important;

    width:960px !important;
    max-width:960px !important;

    height:100% !important;
    min-height:0 !important;

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

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    grid-template-rows:none !important;
    grid-auto-flow:row !important;
    grid-auto-rows:minmax(0,1fr) !important;

    align-content:stretch !important;

    gap:8px !important;

    box-sizing:border-box !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices
> .mishkaty-tap-choice{
    width:100% !important;
    max-width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;

    padding:
        8px
        14px
        10px !important;

    display:flex !important;

    flex-direction:column !important;

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

    gap:5px !important;

    box-sizing:border-box !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-image{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:300px !important;
    max-height:68% !important;

    margin:0 auto !important;

    object-fit:contain !important;
}


body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choice-text{
    width:100% !important;

    margin:2px 0 0 !important;

    font-size:44px !important;
    line-height:1.05 !important;

    text-align:center !important;
}


/* أربعة خيارات — نفس الهاتف الحقيقي */
body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-choices:has(
    .mishkaty-tap-choice:nth-child(4)
){
    grid-template-columns:
        minmax(0,1fr) !important;

    grid-template-rows:none !important;
    grid-auto-rows:minmax(0,1fr) !important;

    gap:8px !important;
}


/* شاشة النهاية */
body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-tap-finish{
    padding:42px 24px !important;
    gap:22px !important;
}


/*==========================================================
  PREVIEW — VERY SMALL PHONE
  يبقى Stage نفسه 1080 × 1920؛ لذلك لا نعيد تصغير المحتوى
  بحسب عرض iframe الفيزيائي.
==========================================================*/

body > #oab-game-preview-stage .mishkaty-game-stage.mishkaty-mobile-portrait{
    overflow:hidden !important;
}


/*==========================================================
  PREVIEW — TABLET / DESKTOP
  لا نضع قواعد مصغرة خاصة بهما هنا.
  game-engine.js يتولى Stage والـ scale، وبذلك تبقى المعاينة
  مطابقة لمنطق التشغيل الحقيقي.
==========================================================*/