/*==========================================================
 * MISKHATY GAMES
 * Game Type: Memory Cards
 * Version 1.0.0
 *==========================================================*/


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

.mishkaty-memory-cards-screen{
    position:relative;

    display:grid;

    grid-template-rows:
        96px
        72px
        minmax(0,1fr)
        48px;

    gap:10px;

    width:100%;
    height:100%;

    padding:
        14px
        70px
        28px;

    box-sizing:border-box;

    overflow:hidden;

    background:transparent;
}


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

.mishkaty-memory-cards-header{
    position:relative;

    display:grid;

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

    align-items:center;

    width:min(100%,1440px);

    margin:0 auto;

    padding:
        10px
        22px;

    box-sizing:border-box;

    background:#087a43;

    border: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);
}


.mishkaty-memory-cards-header
.mishkaty-game-title{
    position:absolute;

    left:50%;
    top:50%;

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

    width:auto;
    max-width:70%;

    margin:0;

    color:#ffffff;

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

    font-size:
        clamp(
            24px,
            2.8vw,
            38px
        );

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

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


.mishkaty-memory-cards-progress{
    grid-column:1;
    grid-row:1;

    justify-self:start;

    display:flex;

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

    width:150px;
    height:58px;

    background:rgba(255,255,255,.96);

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

    border-radius:12px;

    color:#087a43;

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

    font-size:28px;
    line-height:1;
    font-weight:800;

    box-sizing:border-box;

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


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

.mishkaty-memory-cards-screen
> .mishkaty-game-instruction{
    display:flex;

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

    width:100%;
    height:100%;

    margin:0;

    color:#ba2100;

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

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

    text-align:center;
}


/*==========================================================
  BOARD
==========================================================*/

.mishkaty-memory-cards-board{
    display:grid;

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

    grid-auto-rows:
        minmax(0,1fr);

    gap:18px;

    width:min(100%,1200px);
    height:100%;

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

    margin:0 auto;

    padding:4px 0 0;

    box-sizing:border-box;

    overflow:hidden;
}


/*==========================================================
  CARD
==========================================================*/

.mishkaty-memory-card{
    position:relative;

    width:100%;
    height:100%;

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

    margin:0;
    padding:0;

    border:0;
    outline:0;

    background:transparent;

    cursor:pointer;

    perspective:1100px;

    touch-action:manipulation;

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


.mishkaty-memory-card:focus-visible{
    outline:
        4px solid
        rgba(8,122,67,.28);

    outline-offset:4px;
}


/*==========================================================
  CARD INNER
==========================================================*/

.mishkaty-memory-card-inner{
    position:relative;

    display:block;

    width:100%;
    height:100%;

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

    transform-style:preserve-3d;

    transition:
        transform .42s ease;

    box-sizing:border-box;
}


.mishkaty-memory-card.is-flipped
.mishkaty-memory-card-inner,
.mishkaty-memory-card.is-matched
.mishkaty-memory-card-inner{
    transform:
        rotateY(180deg);
}


/*==========================================================
  FRONT / BACK
==========================================================*/

.mishkaty-memory-card-back,
.mishkaty-memory-card-front{
    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

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

    gap:8px;

    width:100%;
    height:100%;

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

    padding:
        12px
        14px;

    box-sizing:border-box;

    overflow:hidden;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    border:
        4px solid
        #c4ddcf;

    border-radius:0;

    box-shadow:
        0 8px 0
        rgba(35,91,66,.10);
}


.mishkaty-memory-card-back{
    background:
        linear-gradient(
            145deg,
            #0b8c50,
            #087a43
        );

    color:#ffffff;
}


.mishkaty-memory-card-front{
    transform:
        rotateY(180deg);

    background:#ffffff;

    color:#244c3b;
}


/*==========================================================
  CARD BACK ICON
==========================================================*/

.mishkaty-memory-card-back-icon{
    display:flex;

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

    width:86px;
    height:86px;

    border:
        5px solid
        rgba(255,255,255,.86);

    border-radius:50%;

    color:#ffffff;

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

    font-size:58px;
    line-height:1;
    font-weight:900;

    box-shadow:
        inset 0 3px 0
        rgba(255,255,255,.20);

    box-sizing:border-box;
}


/*==========================================================
  CARD IMAGE
==========================================================*/

.mishkaty-memory-card-image{
    display:block;

    width:auto;
    height:auto;

    max-width:88%;
    max-height:68%;

    object-fit:contain;

    pointer-events:none;

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


/*==========================================================
  CARD TEXT
==========================================================*/

.mishkaty-memory-card-text{
    display:block;

    width:100%;

    margin:0;

    color:#244c3b;

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

    font-size:44px;
    line-height:1.05;
    font-weight:800;

    text-align:center;

    overflow-wrap:anywhere;

    pointer-events:none;
}


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

.mishkaty-memory-card.is-matched
.mishkaty-memory-card-front{
    border-color:#35a866;

    background:#e9f9ef;

    box-shadow:
        0 0 0 5px
        rgba(53,168,102,.12),
        0 8px 0
        rgba(35,91,66,.10);
}


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

.mishkaty-memory-card.mishkaty-game-wrong
.mishkaty-memory-card-front{
    border-color:#e15a5a;

    background:#fff0f0;

    box-shadow:
        0 0 0 5px
        rgba(225,90,90,.10),
        0 8px 0
        rgba(35,91,66,.10);
}


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

.mishkaty-memory-cards-feedback{
    display:flex;

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

    width:min(100%,1200px);
    height:100%;

    margin:0 auto;

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

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

    text-align:center;
}


.mishkaty-memory-cards-feedback.is-correct{
    color:#087a43;
}


.mishkaty-memory-cards-feedback.is-wrong{
    color:#ba2100;
}


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

@media (hover:hover) and (pointer:fine){

    .mishkaty-memory-card:not(.is-flipped):not(.is-matched):hover
    .mishkaty-memory-card-inner{
        transform:
            translateY(-4px);
    }
}


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

@media (max-width:1024px){

    .mishkaty-memory-cards-screen{
        padding:
            8px
            24px
            92px;
    }


    .mishkaty-memory-cards-board{
        gap:14px;
    }


    .mishkaty-memory-card-back-icon{
        width:72px;
        height:72px;

        font-size:48px;
    }


    .mishkaty-memory-card-text{
        font-size:38px;
    }
}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            88px
            78px
            minmax(0,1fr)
            42px;

        gap:8px;

        width:100%;
        height:100%;

        padding:
            4px
            14px
            88px;

        overflow:hidden;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-header{
        width:100%;

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

        padding:
            8px
            12px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-header
    .mishkaty-game-title{
        max-width:72%;

        font-size:38px;
        line-height:1.15;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-progress{
        width:110px;
        height:50px;

        font-size:26px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        font-size:31px;
        line-height:1.2;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-board{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        grid-auto-rows:
            minmax(0,1fr);

        gap:10px;

        width:100%;
        height:100%;

        min-height:0;

        padding-top:2px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-back,
    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-front{
        padding:
            8px
            6px;

        border-width:3px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-back-icon{
        width:66px;
        height:66px;

        border-width:4px;

        font-size:44px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-image{
        max-width:92%;
        max-height:68%;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:34px;
        line-height:1;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-feedback{
        font-size:21px;
    }
}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            84px
            72px
            minmax(0,1fr)
            38px;

        padding:
            2px
            10px
            84px;

        gap:6px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-header
    .mishkaty-game-title{
        font-size:34px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        font-size:28px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-board{
        gap:8px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-back-icon{
        width:58px;
        height:58px;

        font-size:39px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:30px;
    }
}


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

@media (max-height:520px) and (orientation:landscape){

    .mishkaty-memory-cards-screen{
        grid-template-rows:
            66px
            48px
            minmax(0,1fr)
            32px;

        gap:5px;

        padding:
            4px
            20px
            14px;
    }


    .mishkaty-memory-cards-header{
        padding:
            5px
            12px;
    }


    .mishkaty-memory-cards-header
    .mishkaty-game-title{
        font-size:28px;
    }


    .mishkaty-memory-cards-progress{
        width:96px;
        height:42px;

        font-size:22px;
    }


    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        font-size:24px;
    }


    .mishkaty-memory-cards-board{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        gap:8px;
    }


    .mishkaty-memory-card-back-icon{
        width:48px;
        height:48px;

        border-width:3px;

        font-size:32px;
    }


    .mishkaty-memory-card-text{
        font-size:28px;
    }


    .mishkaty-memory-cards-feedback{
        font-size:18px;
    }
}


/*==========================================================
  BUILDER MOBILE PREVIEW
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen{
    grid-template-rows:
        88px
        78px
        minmax(0,1fr)
        42px !important;

    gap:8px !important;

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

    padding:
        4px
        14px
        88px !important;

    overflow:hidden !important;
}


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

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

    padding:
        8px
        12px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-header
.mishkaty-game-title{
    max-width:72% !important;

    font-size:38px !important;
    line-height:1.15 !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-progress{
    width:110px !important;
    height:50px !important;

    font-size:26px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-board{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

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

    gap:10px !important;

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

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


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card{
    min-width:0 !important;
    min-height:0 !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card-back-icon{
    width:66px !important;
    height:66px !important;

    font-size:44px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card-text{
    font-size:34px !important;
    line-height:1 !important;
}

/*==========================================================
  MEMORY CARDS — BOARD SIZE FIX
  يمنع تمدد صفوف البطاقات إلى كامل مساحة اللوحة
==========================================================*/

.mishkaty-memory-cards-board{
    grid-auto-rows:auto;
    align-content:center;
}

.mishkaty-memory-card{
    height:clamp(150px,22vh,230px);
}

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-board{
        grid-auto-rows:auto;
        align-content:center;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card{
        height:clamp(120px,18vh,180px);
    }
}

@media (max-height:520px) and (orientation:landscape){

    .mishkaty-memory-cards-board{
        grid-auto-rows:auto;
        align-content:center;
    }

    .mishkaty-memory-card{
        height:clamp(90px,24vh,135px);
    }
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-board{
    grid-auto-rows:auto !important;
    align-content:center !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card{
    height:clamp(120px,18vh,180px) !important;
}

/*==========================================================
  MEMORY CARDS — FEEDBACK CONFLICT FIX
  عزل شريط الرسائل عن تنسيق المحرك العام
==========================================================*/

.mishkaty-memory-cards-screen
.mishkaty-memory-cards-feedback{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;

    transform:none;

    min-width:0;

    padding:0;

    background:transparent;

    border:0;

    box-shadow:none;

    pointer-events:none;
}

.mishkaty-memory-cards-screen
.mishkaty-memory-cards-feedback:empty{
    visibility:hidden;
}

/*==========================================================
  MEMORY CARDS — FINAL CONGRATULATION SCREEN
==========================================================*/

.mishkaty-memory-cards-finish{
    position:absolute;
    inset:0;

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

    gap:34px;

    width:100%;
    height:100%;

    padding:60px;

    box-sizing:border-box;

    background:transparent;

    text-align:center;
}

.mishkaty-memory-cards-finish
.mishkaty-tap-finish-icon{
    font-size:110px;
    line-height:1;
}

.mishkaty-memory-cards-finish
.mishkaty-game-title{
    margin:0;

    color:#087a43;

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

    font-size:clamp(48px,5vw,76px);
    line-height:1.25;
    font-weight:900;

    text-align:center;
}

.mishkaty-memory-cards-finish
.mishkaty-game-instruction{
    margin:0;

    color:#244c3b;

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

    font-size:clamp(32px,3.2vw,50px);
    line-height:1.35;
    font-weight:800;

    text-align:center;
}


/*==========================================================
  FINAL SCREEN — PHONE PORTRAIT
==========================================================*/

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

    .mishkaty-memory-cards-finish{
        gap:24px;
        padding:32px 20px 90px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-tap-finish-icon{
        font-size:82px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-game-title{
        font-size:44px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-game-instruction{
        font-size:30px;
    }
}


/*==========================================================
  FINAL SCREEN — PHONE LANDSCAPE
==========================================================*/

@media (max-height:520px) and (orientation:landscape){

    .mishkaty-memory-cards-finish{
        gap:14px;
        padding:18px 24px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-tap-finish-icon{
        font-size:64px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-game-title{
        font-size:38px;
    }

    .mishkaty-memory-cards-finish
    .mishkaty-game-instruction{
        font-size:26px;
    }
}


/*==========================================================
  FINAL SCREEN — BUILDER MOBILE PREVIEW
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-finish{
    gap:24px !important;
    padding:32px 20px 90px !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-finish
.mishkaty-tap-finish-icon{
    font-size:82px !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-finish
.mishkaty-game-title{
    font-size:44px !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-finish
.mishkaty-game-instruction{
    font-size:30px !important;
}

/*==========================================================
  MEMORY CARDS — DESKTOP SQUARE LARGE CARDS
  الكمبيوتر فقط
==========================================================*/

@media (min-width:1025px) and (min-height:521px){

    .mishkaty-memory-cards-screen{
        grid-template-rows:
            96px
            72px
            minmax(0,1fr)
            48px;
    }

    .mishkaty-memory-cards-board{
        grid-template-columns:
            repeat(
                6,
                minmax(0,1fr)
            );

        grid-auto-rows:auto;

        gap:14px;

        width:min(100%,1500px);
        height:100%;

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

        margin:0 auto;
    }

    .mishkaty-memory-card{
        width:100%;
        height:auto;

        aspect-ratio:1 / 1;
    }

    .mishkaty-memory-card-inner{
        width:100%;
        height:100%;
    }
}

/*==========================================================
  MEMORY CARDS — DESKTOP 4 COLUMNS × 3 ROWS
  الكمبيوتر فقط — مربعات متساوية 1:1
==========================================================*/

@media (min-width:1025px) and (min-height:521px){

    .mishkaty-memory-cards-board{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

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

        grid-auto-rows:unset;

        gap:14px;

        width:min(100%,1080px);
        height:min(100%,810px);

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

        margin:0 auto;
    }

    .mishkaty-memory-card{
        width:100%;
        height:100%;

        aspect-ratio:1 / 1;
    }

    .mishkaty-memory-card-inner{
        width:100%;
        height:100%;
    }
}

/*==========================================================
  MEMORY CARDS — PHONE PORTRAIT SQUARE CARDS
  الهاتف فقط — 3 أعمدة × 4 صفوف — مربعات 1:1
  الكمبيوتر المعتمد لا يتغير
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            88px
            78px
            minmax(0,1fr)
            42px;

        gap:8px;

        padding:
            4px
            10px
            88px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-board{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        grid-template-rows:
            repeat(
                4,
                auto
            );

        grid-auto-rows:unset;

        gap:8px;

        width:100%;
        height:auto;

        align-self:center;
        align-content:center;
        justify-content:center;

        margin:0 auto;
        padding:0;

        overflow:visible;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card{
        width:100%;
        height:auto;

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

        aspect-ratio:1 / 1;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-inner{
        width:100%;
        height:100%;
    }
}


/*==========================================================
  MEMORY CARDS — VERY SMALL PHONE
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-board{
        gap:6px;
    }
}


/*==========================================================
  MEMORY CARDS — BUILDER PHONE PREVIEW
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-board{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

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

    grid-auto-rows:unset !important;

    gap:8px !important;

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

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

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

    overflow:visible !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card{
    width:100% !important;
    height:auto !important;

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

    aspect-ratio:1 / 1 !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card-inner{
    width:100% !important;
    height:100% !important;
}

/*==========================================================
  MEMORY CARDS — PHONE INSTRUCTION LARGER + CENTERED
  الهاتف فقط — تكبير وتوسيط التعليمات
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        display:flex;

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

        width:100%;
        height:100%;

        margin:0;

        padding:0 12px;

        box-sizing:border-box;

        font-size:38px;
        line-height:1.25;
        font-weight:900;

        text-align:center;
        text-align-last:center;
    }
}


/*==========================================================
  MEMORY CARDS — VERY SMALL PHONE INSTRUCTION
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        font-size:34px;
        line-height:1.25;
    }
}


/*==========================================================
  MEMORY CARDS — BUILDER PHONE PREVIEW INSTRUCTION
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen
> .mishkaty-game-instruction{
    display:flex !important;

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

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

    margin:0 !important;

    padding:0 12px !important;

    box-sizing:border-box !important;

    font-size:38px !important;
    line-height:1.25 !important;
    font-weight:900 !important;

    text-align:center !important;
    text-align-last:center !important;
}

/*==========================================================
  MEMORY CARDS — PHONE INSTRUCTION VERTICAL CENTER
  الهاتف فقط — نفس الحجم مع توسيط رأسي أدق
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            88px
            110px
            minmax(0,1fr)
            42px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        align-self:center;
        justify-self:center;

        display:flex;

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

        width:100%;
        height:100%;

        margin:0;

        padding:0 12px;

        box-sizing:border-box;

        font-size:38px;
        line-height:1.25;
        font-weight:900;

        text-align:center;
        text-align-last:center;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:46px;
        line-height:1.08;
        font-weight:900;
    }
}


/*==========================================================
  MEMORY CARDS — VERY SMALL PHONE TEXT
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            84px
            104px
            minmax(0,1fr)
            38px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:42px;
        line-height:1.08;
    }
}


/*==========================================================
  MEMORY CARDS — BUILDER PHONE PREVIEW
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen{
    grid-template-rows:
        88px
        110px
        minmax(0,1fr)
        42px !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen
> .mishkaty-game-instruction{
    align-self:center !important;
    justify-self:center !important;

    display:flex !important;

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

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

    margin:0 !important;

    padding:0 12px !important;

    box-sizing:border-box !important;

    font-size:38px !important;
    line-height:1.25 !important;
    font-weight:900 !important;

    text-align:center !important;
    text-align-last:center !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card-text{
    font-size:46px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
}

/*==========================================================
  MEMORY CARDS — PHONE FINAL TEXT TUNING
  الهاتف فقط
  - تكبير التعليمات
  - توسيطها بين العنوان والبطاقات
  - تكبير النص داخل البطاقات قليلاً
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            88px
            118px
            minmax(0,1fr)
            42px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        display:flex;

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

        align-self:center;
        justify-self:center;

        width:100%;
        height:100%;

        margin:0;
        padding:0 10px;

        box-sizing:border-box;

        font-size:42px;
        line-height:1.22;
        font-weight:900;

        text-align:center;
        text-align-last:center;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:52px;
        line-height:1.08;
        font-weight:900;
    }
}


/*==========================================================
  MEMORY CARDS — VERY SMALL PHONE
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen{
        grid-template-rows:
            84px
            112px
            minmax(0,1fr)
            38px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-cards-screen
    > .mishkaty-game-instruction{
        font-size:38px;
        line-height:1.22;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-memory-card-text{
        font-size:48px;
        line-height:1.08;
    }
}


/*==========================================================
  MEMORY CARDS — BUILDER PHONE PREVIEW
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen{
    grid-template-rows:
        88px
        118px
        minmax(0,1fr)
        42px !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-cards-screen
> .mishkaty-game-instruction{
    display:flex !important;

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

    align-self:center !important;
    justify-self:center !important;

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

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

    box-sizing:border-box !important;

    font-size:42px !important;
    line-height:1.22 !important;
    font-weight:900 !important;

    text-align:center !important;
    text-align-last:center !important;
}

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-memory-card-text{
    font-size:52px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
}