/*==========================================================
 * MISKHATY GAMES
 * Game Type: Matching
 * Version 1.0.0
 *==========================================================*/


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

.mishkaty-matching-screen{
    position:relative;

    display:grid;

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

    width:100%;
    height:100%;

    padding:
        14px
        70px
        34px;

    gap:0;

    box-sizing:border-box;

    background:transparent;
}


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

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

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


.mishkaty-matching-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:
        "Tahoma",
        "Arial",
        sans-serif;

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

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


.mishkaty-matching-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:
        "Tahoma",
        "Arial",
        sans-serif;

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

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


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

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

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

    width:100%;
    height:100%;

    margin:0;

    color:#ba2100;

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

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

    text-align:center;
}


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

.mishkaty-matching-board{
    display:grid;

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

    gap:56px;

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

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

    margin:0 auto;

    padding:
        14px
        0
        0;

    box-sizing:border-box;
}


/*==========================================================
  COLUMNS
==========================================================*/

.mishkaty-matching-column{
    display:grid;

    grid-auto-flow:row;

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

    gap:16px;

    width:100%;
    height:100%;

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


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

.mishkaty-matching-card{
    position:relative;

    display:flex;

    flex-direction:column;

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

    gap:10px;

    width:100%;
    height:100%;

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

    margin:0;

    padding:
        12px
        18px;

    background:#ffffff;

    border:
        4px solid
        #c4ddcf;

    border-radius:0;

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

    color:#244c3b;

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

    cursor:pointer;

    touch-action:manipulation;

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

    box-sizing:border-box;

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


.mishkaty-matching-card:hover{
    border-color:#16845b;

    background:#f5fff8;

    transform:
        translateY(-3px);
}


.mishkaty-matching-card:active{
    transform:
        translateY(2px);
}


.mishkaty-matching-card.is-selected{
    border-color:#16845b;

    background:#eaf8f0;

    box-shadow:
        0 0 0 5px rgba(22,132,91,.12),
        0 8px 0 rgba(35,91,66,.08);
}


.mishkaty-matching-card.is-matched{
    opacity:.72;

    cursor:default;
}


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

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

    width:auto;
    height:auto;

    max-width:230px;
    max-height:150px;

    object-fit:contain;

    pointer-events:none;

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


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

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

    width:100%;

    margin:0;

    color:#244c3b;

    font-size:46px;
    line-height:1.1;
    font-weight:800;

    text-align:center;

    pointer-events:none;

    overflow-wrap:anywhere;
}


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

.mishkaty-matching-card.mishkaty-game-correct,
.mishkaty-matching-card.is-correct{
    border-color:#35a866 !important;

    background:#e9f9ef !important;
}


.mishkaty-matching-card.mishkaty-game-wrong,
.mishkaty-matching-card.is-wrong{
    border-color:#e15a5a !important;

    background:#fff0f0 !important;
}


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

.mishkaty-matching-screen
.mishkaty-game-feedback{
    z-index:40;
}


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

.mishkaty-matching-finish{
    position:absolute;

    inset:0;

    z-index:50;

    display:flex;

    flex-direction:column;

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

    gap:28px;

    width:100%;
    height:100%;

    margin:0;

    padding:32px;

    box-sizing:border-box;

    text-align:center;

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


.mishkaty-matching-finish-icon{
    font-size:150px;
    line-height:1;
}


.mishkaty-matching-finish
.mishkaty-game-title{
    margin:0;

    color:#087a43;

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

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

    text-align:center;
}


.mishkaty-matching-finish
.mishkaty-game-instruction{
    margin:0;

    color:#ba2100;

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

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

    text-align:center;
}


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

@media (hover:none){

    .mishkaty-matching-card:hover{
        border-color:#c4ddcf;

        background:#ffffff;

        transform:none;
    }


    .mishkaty-matching-card.is-selected:hover{
        border-color:#16845b;

        background:#eaf8f0;
    }

}


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

@media (max-width:900px){

    .mishkaty-matching-screen{
        grid-template-rows:
            92px
            80px
            minmax(0,1fr);

        padding:
            4px
            20px
            92px;
    }


    .mishkaty-matching-header{
        width:100%;

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

        padding:
            8px
            14px;
    }


    .mishkaty-matching-header
    .mishkaty-game-title{
        max-width:72%;

        font-size:44px;
    }


    .mishkaty-matching-progress{
        width:132px;
        height:58px;

        font-size:28px;
    }


    .mishkaty-matching-screen
    > .mishkaty-game-instruction{
        font-size:36px;
    }


    .mishkaty-matching-board{
        width:100%;

        gap:18px;

        padding-top:8px;
    }


    .mishkaty-matching-column{
        gap:10px;
    }


    .mishkaty-matching-card{
        gap:5px;

        padding:
            8px
            10px;

        border-width:4px;
    }


    .mishkaty-matching-card-image{
        max-width:180px;
        max-height:115px;
    }


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

}


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

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

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

        grid-template-rows:
            92px
            86px
            minmax(0,1fr);

        padding:
            4px
            20px
            92px;

        background:transparent !important;
    }


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


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

        gap:14px;

        width:100%;
        height:100%;

        min-height:0;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-column{
        grid-auto-rows:
            minmax(0,1fr);

        gap:8px;
    }


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

        min-height:0;

        padding:
            7px
            8px;

        gap:4px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        max-width:155px;
        max-height:105px;
    }


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

}


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

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

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

        padding:
            2px
            16px
            86px;
    }


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


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


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


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-column{
        gap:7px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        max-width:140px;
        max-height:95px;
    }


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

}


/*==========================================================
  MOBILE PORTRAIT STAGE CLASS
  Works in real game and builder preview.
==========================================================*/

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

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

    padding:
        4px
        20px
        92px !important;

    background:transparent !important;
}


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

    gap:14px !important;

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

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

    margin:0 auto !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-column{
    height:100% !important;

    min-height:0 !important;

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

    gap:8px !important;
}


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

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

    max-height:none !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card-image{
    max-width:155px !important;
    max-height:105px !important;
}


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

/*==========================================================
  DESKTOP ONLY — FINAL TEXT/TITLE FIX
  الكمبيوتر فقط
==========================================================*/

@media (min-width:901px){

    /*
     * نفس حجم عنوان الألعاب السابقة.
     */
    .mishkaty-matching-header
    .mishkaty-game-title{
        font-size:
            clamp(
                24px,
                2.8vw,
                38px
            );
    }


    /*
     * إبقاء الصورة والنص داخل البطاقة.
     * الصف الأول للصورة، والثاني للنص.
     */
    .mishkaty-matching-card{
        display:grid;

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

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

        gap:4px;

        padding:
            8px
            14px;

        overflow:hidden;
    }


    .mishkaty-matching-card-image{
        align-self:center;

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

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


    .mishkaty-matching-card-text{
        align-self:end;

        font-size:34px;
        line-height:1.05;

        padding-bottom:2px;

        box-sizing:border-box;
    }

}

/*==========================================================
  PHONE PORTRAIT ONLY — LARGER IMAGE + TEXT
  الهاتف فقط — لا يؤثر على الكمبيوتر
==========================================================*/

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

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

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

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

        gap:4px;

        padding:
            8px
            8px;

        overflow:hidden;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        align-self:center;

        width:auto;
        height:auto;

        max-width:78%;
        max-height:72%;

        object-fit:contain;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-text{
        align-self:end;

        font-size:40px;
        line-height:1.05;

        padding-bottom:4px;

        box-sizing:border-box;
    }

}


/*==========================================================
  BUILDER MOBILE PREVIEW
  نفس تعديل الهاتف داخل المعاينة
==========================================================*/

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card{
    display:grid !important;

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

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

    gap:4px !important;

    padding:
        8px
        8px !important;

    overflow:hidden !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card-image{
    align-self:center !important;

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

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

    object-fit:contain !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card-text{
    align-self:end !important;

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

    padding-bottom:4px !important;

    box-sizing:border-box !important;
}


/*==========================================================
  VERY SMALL PHONE — SAFE LIMIT
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        max-width:80%;
        max-height:70%;
    }


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

}

/*==========================================================
  PHONE PORTRAIT — IMAGE CLOSER TO TEXT
  الهاتف فقط — تكبير الصورة وتقريب النص منها
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:0 !important;

        padding:
            6px
            6px !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        width:auto !important;
        height:auto !important;

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

        margin:
            0
            auto
            2px !important;

        object-fit:contain !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-text{
        width:100% !important;

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

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

        text-align:center !important;
    }

}


/* مصنع الألعاب — معاينة الهاتف */

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:0 !important;

    padding:
        6px
        6px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-matching-card-image{
    width:auto !important;
    height:auto !important;

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

    margin:
        0
        auto
        2px !important;

    object-fit:contain !important;
}


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

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

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

    text-align:center !important;
}


/* الهاتف الصغير جدًا */

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

    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-image{
        max-width:94% !important;
        max-height:72% !important;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-matching-card-text{
        font-size:40px !important;
    }

}

/*==========================================================
  DESKTOP ONLY — TEXT-ONLY CARD CENTERING
  إذا كان العنصر نصًا فقط، يوضع في منتصف المربع.
  لا يؤثر على الهاتف ولا على الصورة مع النص.
==========================================================*/

@media (min-width:901px){

    .mishkaty-matching-card:not(:has(.mishkaty-matching-card-image))
    .mishkaty-matching-card-text{
        grid-row:
            1 / -1;

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

        margin:0;

        padding:0;
    }

}