/*==========================================================
 * MISKHATY GAMES
 * Game Type: Drag & Drop
 * Version 1.3.6
 *==========================================================*/


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

.mishkaty-drag-drop-screen {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(10px, 1.35vw, 18px);
    padding: clamp(14px, 1.8vw, 24px) clamp(14px, 2.5vw, 34px);
    direction: rtl;
    overflow: hidden;
}


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

.mishkaty-drag-drop-header {
    width: 100%;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
}

.mishkaty-drag-drop-header .mishkaty-game-title {
    grid-column: 2;
    margin: 0;
    text-align: center;
    line-height: 1.2;
}

.mishkaty-drag-drop-progress {
    grid-column: 3;
    justify-self: end;
    font-size: clamp(14px, 1.35vw, 18px);
    font-weight: 700;
    white-space: nowrap;
}


/*
==========================================================
INSTRUCTION
==========================================================
*/

.mishkaty-drag-drop-screen .mishkaty-game-instruction {
    width: 100%;
    flex: 0 0 auto;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.35;
    font-weight: 700;
}


/*
==========================================================
WORKSPACE
==========================================================
*/

.mishkaty-drag-drop-workspace {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(10px, 2.3vw, 34px);
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

.mishkaty-drag-drop-source,
.mishkaty-drag-drop-target {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: clamp(8px, 1.15vw, 18px);
    padding: clamp(6px, 1.2vw, 18px);
    box-sizing: border-box;
    overflow: hidden;
}

.mishkaty-drag-drop-area-title {
    width: 100%;
    text-align: center;
    font-size: clamp(17px, 1.75vw, 24px);
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
}


/*
==========================================================
DRAG ITEM / DROP ZONE
==========================================================
*/

.mishkaty-drag-drop-item,
.mishkaty-drag-drop-dropzone {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.9vw, 14px);
    padding: clamp(8px, 1.25vw, 18px) clamp(8px, 1.55vw, 22px);
    background: #ffffff;
    border: clamp(3px, 0.28vw, 4px) solid #c4ddcf;
    font-size: clamp(26px, 3.1vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.mishkaty-drag-drop-item {
    cursor: grab;
}

.mishkaty-drag-drop-item:active {
    cursor: grabbing;
}

.mishkaty-drag-drop-item:hover,
.mishkaty-drag-drop-item.is-selected {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.mishkaty-drag-drop-item.is-dragging {
    opacity: 0.55;
}

.mishkaty-drag-drop-dropzone {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.78);
}

.mishkaty-drag-drop-dropzone.is-drag-over {
    transform: scale(1.02);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(31, 143, 102, 0.12);
}

.mishkaty-drag-drop-item.is-matched,
.mishkaty-drag-drop-dropzone.is-matched {
    cursor: default;
}


/*
==========================================================
MATCHED LAYOUT
==========================================================
*/

.mishkaty-drag-drop-dropzone.is-matched {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: clamp(7px, 1vw, 18px);
    padding: clamp(7px, 0.9vw, 12px) clamp(7px, 1.15vw, 16px);
    border-style: solid;
    overflow: hidden;
}

.mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-text {
    min-width: 0;
    width: 100%;
    text-align: center;
}

.mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-image {
    justify-self: center;
}

.mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-item {
    width: auto;
    min-width: clamp(62px, 8.5vw, 120px);
    max-width: clamp(88px, 13vw, 190px);
    min-height: clamp(54px, 6vw, 74px);
    height: auto;
    margin: 0;
    padding: clamp(6px, 0.75vw, 10px) clamp(8px, 1.15vw, 18px);
    border-width: 3px;
    font-size: clamp(23px, 2.5vw, 34px);
    flex: none;
    justify-self: end;
    box-shadow: none;
    transform: none;
}

.mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-item:hover {
    transform: none;
    box-shadow: none;
}

.mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-item .mishkaty-drag-drop-image {
    max-height: clamp(48px, 6vw, 70px);
}


/*
==========================================================
CONTENT
==========================================================
*/

.mishkaty-drag-drop-text {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.mishkaty-drag-drop-image {
    display: block;
    max-width: 100%;
    max-height: min(180px, 18vh);
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    flex: 0 1 auto;
}

/*
الصورة مع وجود نص:
تبقى بحجم متوازن داخل البطاقة.
*/
.mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
.mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
    max-width: 92%;
    max-height: min(170px, 72%);
}

/*
الصورة عندما تكون هي المحتوى الوحيد:
تستفيد من مساحة البطاقة بدل البقاء بحجمها الأصلي الصغير.
*/
.mishkaty-drag-drop-item > .mishkaty-drag-drop-image:only-child,
.mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image:only-child {
    width: auto;
    height: 82%;
    max-width: 88%;
    max-height: 82%;
    object-fit: contain;
}


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

.mishkaty-drag-drop-item.mishkaty-game-correct,
.mishkaty-drag-drop-dropzone.mishkaty-game-correct {
    border-style: solid;
}

.mishkaty-drag-drop-item.mishkaty-game-wrong,
.mishkaty-drag-drop-dropzone.mishkaty-game-wrong {
    animation: mishkaty-drag-drop-shake 0.32s ease;
}

@keyframes mishkaty-drag-drop-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}


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

.mishkaty-drag-drop-screen .mishkaty-game-feedback {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 2vw, 28px);
    transform: translateX(-50%);
    z-index: 20;
    min-width: min(280px, 72vw);
    max-width: 88%;
    box-sizing: border-box;
    padding: clamp(12px, 1.3vw, 16px) clamp(16px, 1.8vw, 24px);
    background: #ffffff;
    border: 3px solid #1f8f66;
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
}


/*
==========================================================
POINTER GHOST
==========================================================
*/

.mishkaty-drag-drop-pointer-ghost {
    box-sizing: border-box;
}


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

.mishkaty-drag-drop-finish {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.5vw, 20px);
    text-align: center;
}

.mishkaty-drag-drop-finish-icon {
    font-size: clamp(58px, 6vw, 80px);
    line-height: 1;
}


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

@media (max-width: 900px) {

    .mishkaty-drag-drop-screen {
        padding: 16px 20px;
        gap: 12px;
    }

    .mishkaty-drag-drop-workspace {
        gap: 16px;
    }

    .mishkaty-drag-drop-source,
    .mishkaty-drag-drop-target {
        padding: 9px;
        gap: 10px;
    }

    .mishkaty-drag-drop-item,
    .mishkaty-drag-drop-dropzone {
        padding: 10px 12px;
        font-size: 32px;
    }

    .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
        max-height: min(150px, 68%);
    }

    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image:only-child,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image:only-child {
        height: 80%;
        max-height: 80%;
        max-width: 88%;
    }

}


/*
==========================================================
PHONE
==========================================================
*/

@media (max-width: 600px) {

    .mishkaty-drag-drop-screen {
        padding: 10px;
        gap: 8px;
    }

    .mishkaty-drag-drop-header {
        grid-template-columns: 1fr auto 1fr;
        gap: 6px;
    }

    .mishkaty-drag-drop-screen .mishkaty-game-instruction {
        font-size: 23px;
        line-height: 1.25;
    }

    .mishkaty-drag-drop-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    .mishkaty-drag-drop-source,
    .mishkaty-drag-drop-target {
        padding: 4px;
        gap: 6px;
    }

    .mishkaty-drag-drop-area-title {
        font-size: 16px;
    }

    .mishkaty-drag-drop-item,
    .mishkaty-drag-drop-dropzone {
        padding: 6px;
        border-width: 3px;
        font-size: 26px;
        gap: 5px;
    }

    .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
        max-width: 96%;
        max-height: min(104px, 66%);
    }

    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image:only-child,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image:only-child {
        height: 78%;
        max-height: 78%;
        max-width: 92%;
    }

    .mishkaty-drag-drop-dropzone.is-matched {
        gap: 5px;
        padding: 5px;
    }

    .mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-item {
        min-width: 56px;
        max-width: 82px;
        min-height: 48px;
        padding: 5px 6px;
        border-width: 2px;
        font-size: 21px;
    }

    .mishkaty-drag-drop-dropzone.is-matched > .mishkaty-drag-drop-item .mishkaty-drag-drop-image {
        max-height: 42px;
    }

    .mishkaty-drag-drop-screen .mishkaty-game-feedback {
        bottom: 12px;
        min-width: 210px;
        max-width: 90%;
        padding: 10px 14px;
        font-size: 18px;
    }

}


/*
==========================================================
SHORT / LANDSCAPE SCREENS
لابتوب منخفض الارتفاع أو هاتف أفقي
==========================================================
*/

@media (max-height: 700px) {

    .mishkaty-drag-drop-screen {
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 8px;
    }

    .mishkaty-drag-drop-screen .mishkaty-game-instruction {
        font-size: clamp(20px, 3.2vh, 30px);
        line-height: 1.2;
    }

    .mishkaty-drag-drop-source,
    .mishkaty-drag-drop-target {
        gap: 6px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .mishkaty-drag-drop-area-title {
        font-size: clamp(15px, 2.5vh, 20px);
    }

    .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
        max-height: min(92px, 60%);
    }

}


/*
==========================================================
VERY SMALL PHONES
==========================================================
*/

@media (max-width: 390px) {

    .mishkaty-drag-drop-screen {
        padding: 7px;
    }

    .mishkaty-drag-drop-workspace {
        gap: 5px;
    }

    .mishkaty-drag-drop-source,
    .mishkaty-drag-drop-target {
        padding: 2px;
        gap: 4px;
    }

    .mishkaty-drag-drop-area-title {
        font-size: 14px;
    }

    .mishkaty-drag-drop-item,
    .mishkaty-drag-drop-dropzone {
        padding: 4px;
        font-size: 23px;
    }

    .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
        max-height: min(76px, 62%);
    }

}


/*==========================================================
PROGRAM GAME PLAYER — MATCH TAP CHOICE HEADER
توحيد عنوان لعبة السحب والإفلات مع اللعبة الأولى
==========================================================*/

#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-header {
    position: relative;
    width: min(100%, 1440px);
    min-height: 96px;
    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-drag-drop-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-drag-drop-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 76px;
    background: rgba(255,255,255,.96);
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 12px;
    color: #087a43;
    font-size: 32px;
    font-weight: 800;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.55),
        0 3px 7px rgba(0,0,0,.15);
    box-sizing: border-box;
}

/*
عناوين منطقتي السحب والإفلات
*/
#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-area-title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    color: #244c3b;
}

/*
الكمبيوتر واللابتوب:
العداد في اليسار مثل اللعبة الأولى.
*/
@media (min-width:769px) {

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header {
        direction: ltr;
        grid-template-columns: 150px minmax(0,1fr);
    }

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-progress {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
}


/*==========================================================
PREVIEW IFRAME — SAME HEADER
المعاينة داخل مصنع الألعاب
==========================================================*/

body > #oab-game-preview-stage
.mishkaty-drag-drop-header {
    position: relative;
    width: min(100%, 1440px);
    min-height: 96px;
    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;
}

body > #oab-game-preview-stage
.mishkaty-drag-drop-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;
}

body > #oab-game-preview-stage
.mishkaty-drag-drop-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 76px;
    background: rgba(255,255,255,.96);
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 12px;
    color: #087a43;
    font-size: 32px;
    font-weight: 800;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.55),
        0 3px 7px rgba(0,0,0,.15);
    box-sizing: border-box;
}

body > #oab-game-preview-stage
.mishkaty-drag-drop-area-title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    color: #244c3b;
}

@media (min-width:769px) {

    body > #oab-game-preview-stage
    .mishkaty-drag-drop-header {
        direction: ltr;
        grid-template-columns: 150px minmax(0,1fr);
    }

    body > #oab-game-preview-stage
    .mishkaty-drag-drop-header
    .mishkaty-game-title {
        direction: rtl;
    }

    body > #oab-game-preview-stage
    .mishkaty-drag-drop-progress {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
}


/*==========================================================
PHONE — HEADER BALANCE
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header {
        min-height: 92px;
        width: 100%;
        padding: 8px 14px;
        grid-template-columns: minmax(0,1fr) 132px;
        gap: 10px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header
    .mishkaty-game-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header
    .mishkaty-game-title {
        max-width: 72%;
        font-size: 44px;
        line-height: 1.08;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-progress,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-progress {
        width: 132px;
        height: 58px;
        font-size: 28px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 28px;
    }
}


/*==========================================================
PROGRAM GAME PLAYER — FINAL COMPUTER POLISH
تكبير التعليمات والعناوين + حذف الخلفية البيضاء الخارجية
==========================================================*/

/*
حذف الخلفية البيضاء والإطار الخارجي لمساحة اللعبة
مثل اللعبة الأولى.
*/
#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-screen {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/*
تكبير تعليمات الجولة:
"اسحب الحرف للصورة المناسبة"
*/
#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-screen
.mishkaty-game-instruction {
    font-size: 46px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #BA2100 !important;
    margin: 2px auto 4px !important;
    text-align: center !important;
}

/*
تكبير عنواني العمودين:
"اسحب" و "إلى المكان الصحيح"
*/
#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-area-title {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #244c3b !important;
    margin: 0 0 2px !important;
}


/*==========================================================
PREVIEW IFRAME — SAME FINAL POLISH
نفس النتيجة داخل معاينة المصنع
==========================================================*/

body > #oab-game-preview-stage
.mishkaty-drag-drop-screen {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

body > #oab-game-preview-stage
.mishkaty-drag-drop-screen
.mishkaty-game-instruction {
    font-size: 46px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #BA2100 !important;
    margin: 2px auto 4px !important;
    text-align: center !important;
}

body > #oab-game-preview-stage
.mishkaty-drag-drop-area-title {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #244c3b !important;
    margin: 0 0 2px !important;
}


/*==========================================================
PHONE — KEEP THE SAME IDEA RESPONSIVE
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        font-size: 42px !important;
        line-height: 1.15 !important;
        margin: 2px auto 4px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }
}


/*==========================================================
PHONE PORTRAIT — COMPACT DRAG & DROP
الهاتف فقط — لا يؤثر على الكمبيوتر أو التابلت
==========================================================*/

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

    /*
    الشاشة
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen {
        padding:
            4px
            6px
            86px !important;

        gap: 6px !important;
    }

    /*
    الهيدر:
    نحافظ على نفس الشكل الأخضر
    مع مساحة أفضل للعنوان والعداد.
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header {
        min-height: 78px !important;
        padding: 6px 10px !important;
        grid-template-columns:
            112px
            minmax(0,1fr) !important;
        gap: 8px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header
    .mishkaty-game-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header
    .mishkaty-game-title {
        max-width: 66% !important;
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-progress,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-progress {
        width: 112px !important;
        height: 48px !important;
        font-size: 24px !important;
    }

    /*
    تعليمات الجولة
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        font-size: 34px !important;
        line-height: 1.12 !important;
        margin: 2px auto 2px !important;
    }

    /*
    مساحة اللعب:
    ثلاثة صفوف متساوية ومضغوطة
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-workspace,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-workspace {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap: 6px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-source,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-target,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-source,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-target {
        grid-template-rows:
            42px
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        gap: 5px !important;
        padding: 2px !important;
    }

    /*
    عناوين العمودين
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 26px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    /*
    البطاقات:
    إلغاء الطول المبالغ فيه
    مع تكبير النص داخلها.
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;

        padding: 5px 6px !important;

        border-width: 3px !important;

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

        gap: 4px !important;

        overflow: hidden !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-text {
        font-size: inherit !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
    }

    /*
    الصور:
    أصغر من الشكل الحالي بكثير
    وتبقى داخل البطاقة بدون تمديدها.
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-image,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image {
        width: auto !important;
        height: auto !important;

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

        object-fit: contain !important;
    }

    /*
    إذا كانت الصورة وحدها داخل البطاقة
    لا تتضخم كما في النسخة السابقة.
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image:only-child,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image:only-child,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item > .mishkaty-drag-drop-image:only-child,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone > .mishkaty-drag-drop-image:only-child {
        width: auto !important;
        height: auto !important;

        max-width: 68% !important;
        max-height: 68% !important;
    }

    /*
    العنصر بعد الإجابة الصحيحة
    */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched {
        gap: 4px !important;
        padding: 4px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        min-width: 54px !important;
        max-width: 76px !important;
        min-height: 44px !important;

        padding: 4px 5px !important;

        font-size: 24px !important;
    }

}


/*==========================================================
VERY SMALL PHONE
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header
    .mishkaty-game-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header
    .mishkaty-game-title {
        font-size: 31px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        font-size: 31px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 23px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone {
        font-size: 34px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-image {
        max-width: 66% !important;
        max-height: 66% !important;
    }

}


/*==========================================================
SAFETY SCOPE — DRAG & DROP ONLY
هذا الملف لا يغيّر تنسيق أنواع الألعاب الأخرى.
==========================================================*/

#oab-program-games-page.is-game-playing
.mishkaty-drag-drop-screen,
body > #oab-game-preview-stage
.mishkaty-drag-drop-screen {
    background: transparent !important;
}

/*==========================================================
PHONE PORTRAIT — FINAL HEIGHT BALANCE
الهاتف فقط
تقليل ارتفاع منطقة السحب والإفلات وترك فراغ واضح فوق زر الألعاب.
لا يؤثر على الكمبيوتر أو التابلت.
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen {
        padding-bottom: 158px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-workspace,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-workspace {
        min-height: 0 !important;
        margin-bottom: 4px !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen {
        padding-bottom: 150px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — COMPACT CARDS + CENTERED HEADER + BIGGER TEXT
الهاتف فقط
==========================================================*/

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

    /* تصغير مساحة البطاقات ورفعها عن زر الألعاب */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen {
        padding-bottom: 270px !important;
    }

    /* توسيط عنوان اللعبة الحقيقي داخل اللوحة الخضراء */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-header
    .mishkaty-game-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-header
    .mishkaty-game-title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: 68% !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* إبقاء العداد في اليسار دون التأثير على توسيط العنوان */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-progress,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-progress {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }

    /* تكبير عبارة التعليمات */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        font-size: 42px !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
    }

    /* تكبير عناوين: اسحب / إلى المكان الصحيح */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 34px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
    }

    /* تكبير محتوى البطاقات */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone {
        font-size: 46px !important;
        font-weight: 800 !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen {
        padding-bottom: 250px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        font-size: 39px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-area-title {
        font-size: 31px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone {
        font-size: 43px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — HEADER TEXT SPACING
الهاتف فقط
زيادة المسافة أسفل العنوان وإنزال عناوين المناطق والبطاقات قليلًا.
==========================================================*/

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

    /* زيادة الفراغ بين التعليمات وعناوين منطقتي اللعب */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-workspace,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-workspace {
        margin-top: 18px !important;
    }

    /* إنزال البطاقات قليلًا مع إبقاء أحجامها كما هي */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-source,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-target,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-source,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-target {
        padding-top: 8px !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-workspace,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-workspace {
        margin-top: 16px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — INSTRUCTION LOWER
الهاتف فقط
إبعاد عبارة التعليمات عن عنوان اللعبة قليلًا.
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        transform: translateY(14px) !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-screen
    .mishkaty-game-instruction {
        transform: translateY(12px) !important;
    }
}

/*==========================================================
PHONE PORTRAIT — LARGER CARD LETTERS & WORDS
الهاتف فقط
تكبير الحروف والكلمات داخل بطاقات السحب والإفلات.
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-text {
        font-size: 58px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-item,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone,
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-text {
        font-size: 54px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — MATCHED ANSWER LAYOUT
الهاتف فقط
تنسيق الإجابة الصحيحة بحيث تظهر الصورة والكلمة بشكل متوازن.
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:10px !important;

        padding:10px 12px !important;

        overflow:hidden !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        text-align:center !important;

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-image {
        display:block !important;

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

        max-width:52% !important;
        max-height:46% !important;

        margin:0 auto !important;

        object-fit:contain !important;

        justify-self:auto !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        width:auto !important;
        max-width:72% !important;

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

        margin:0 auto !important;

        padding:6px 10px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:6px !important;

        border-width:3px !important;

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

        box-shadow:none !important;
        transform:none !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        width:auto !important;
        height:auto !important;

        max-width:150px !important;
        max-height:115px !important;

        margin:0 auto !important;

        object-fit:contain !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        font-size:48px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        font-size:42px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — MATCHED IMAGE FINAL
الهاتف فقط
- تكبير صورة الإجابة الصحيحة
- حذف المربع/الإطار حول العنصر المسحوب
- جعل الكلمة أسفل الصورة
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
    }

    /* العنصر المسحوب بعد نجاح الإجابة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        order:1 !important;

        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:78% !important;
        max-height:62% !important;

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

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

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

        transform:none !important;
    }

    /* صورة الأسد/الصورة المسحوبة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        display:block !important;

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

        max-width:250px !important;
        max-height:190px !important;

        margin:0 auto !important;

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

        object-fit:contain !important;
    }

    /* الكلمة الأصلية في مكان الإجابة تكون أسفل الصورة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        order:2 !important;

        width:100% !important;
        margin:2px 0 0 !important;

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

        text-align:center !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        max-width:230px !important;
        max-height:175px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        font-size:48px !important;
    }
}

/*==========================================================
PHONE PORTRAIT — LARGER MATCHED IMAGE
الهاتف فقط
استغلال المساحة داخل مربع الإجابة الصحيحة لتكبير الصورة.
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        max-width:90% !important;
        max-height:72% !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        max-width:320px !important;
        max-height:235px !important;
    }
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-game-stage.mishkaty-mobile-portrait
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        max-width:295px !important;
        max-height:220px !important;
    }
}

/*==========================================================
DESKTOP / LAPTOP — MATCHED ANSWER LAYOUT
الكمبيوتر واللابتوب فقط
- تكبير صورة الإجابة الصحيحة
- حذف المربع/الإطار الداخلي حول الصورة
- جعل الكلمة أسفل الصورة
- توسيط الصورة والكلمة داخل البطاقة
==========================================================*/

@media (min-width:769px) {

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched {
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:12px !important;

        padding:12px 18px !important;

        overflow:hidden !important;
    }

    /* العنصر المسحوب بعد نجاح الإجابة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        order:1 !important;

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

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

        max-width:92% !important;
        max-height:74% !important;

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

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

        background:transparent !important;

        box-shadow:none !important;
        transform:none !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    /* الصورة بعد الإجابة الصحيحة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        display:block !important;

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

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

        margin:0 auto !important;

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

        background:transparent !important;

        box-shadow:none !important;

        object-fit:contain !important;
    }

    /* الكلمة أسفل الصورة */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        order:2 !important;

        width:100% !important;

        margin:2px 0 0 !important;

        font-size:58px !important;
        line-height:1.08 !important;
        font-weight:900 !important;

        text-align:center !important;
    }
}

/*==========================================================
DESKTOP / LAPTOP — MATCHED ANSWER FINAL BALANCE
الكمبيوتر واللابتوب فقط
منع الصورة من الصعود خارج البطاقة وتوسيط الصورة والكلمة كمجموعة.
==========================================================*/

@media (min-width:769px) {

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched {
        padding:20px 18px !important;
        gap:10px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item {
        flex:0 1 auto !important;
        max-height:62% !important;
        overflow:visible !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-item
    .mishkaty-drag-drop-image {
        max-width:300px !important;
        max-height:175px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        flex:0 0 auto !important;
        margin:0 !important;
        font-size:54px !important;
    }
}

/*==========================================================
DESKTOP / LAPTOP — FINAL TEXT + AREA LABEL SPACING
الكمبيوتر واللابتوب فقط
- إعادة حجم كلمة الإجابة الصحيحة إلى حجم البطاقات الطبيعي
- إبعاد عبارتي "اسحب" و "إلى المكان الصحيح" عن المربعات
==========================================================*/

@media (min-width:769px) {

    /* كلمة الإجابة الصحيحة بنفس حجم النص الطبيعي داخل البطاقات */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-dropzone.is-matched
    > .mishkaty-drag-drop-text {
        font-size:42px !important;
        line-height:1.12 !important;
        font-weight:800 !important;
    }

    /* رفع عناوين المنطقتين قليلًا بعيدًا عن أول صف من المربعات */
    #oab-program-games-page.is-game-playing
    .mishkaty-drag-drop-area-title,
    body > #oab-game-preview-stage
    .mishkaty-drag-drop-area-title {
        transform:translateY(-12px) !important;
    }
}