/*==========================================================
 * MISKHATY GAMES
 * Game Type: Catch / Hit
 * التقاط الحرف أو الكلمة
 * Version 1.0.1
 *==========================================================*/


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

.mishkaty-catch-hit-screen{
    position:relative;

    display:grid;

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

    width:100%;
    height:100%;

    padding:
        14px
        70px
        34px;

    gap:0;

    box-sizing:border-box;

    background:transparent;

    overflow:hidden;

    direction:rtl;
}


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

.mishkaty-catch-hit-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-catch-hit-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:
        clamp(
            24px,
            2.8vw,
            38px
        );

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

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


.mishkaty-catch-hit-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);

    box-sizing:border-box;
}


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

.mishkaty-catch-hit-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;
}


/*==========================================================
  TARGET
==========================================================*/

.mishkaty-catch-hit-target{
    display:flex;

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

    gap:18px;

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

    margin:
        6px
        auto
        10px;

    padding:
        8px
        24px;

    box-sizing:border-box;

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

    border:
        4px solid
        #c4ddcf;

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


.mishkaty-catch-hit-target-label{
    color:#087a43;

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

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

    white-space:nowrap;
}


.mishkaty-catch-hit-target-text{
    color:#244c3b;

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

    font-size:36px;
    line-height:1.1;
    font-weight:900;

    text-align:center;
}


/*==========================================================
  ARENA
==========================================================*/

.mishkaty-catch-hit-arena{
    position:relative;

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

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

    margin:0 auto;

    overflow:hidden;

    border:
        4px solid
        rgba(8,122,67,.28);

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

    box-sizing:border-box;
}


/*==========================================================
  MOVING ITEM
==========================================================*/

.mishkaty-catch-hit-item{
    position:absolute;

    left:0;
    top:0;

    display:flex;

    flex-direction:column;

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

    gap:6px;

    width:190px;
    height:150px;

    margin:0;

    padding:
        10px
        12px;

    box-sizing:border-box;

    border:
        4px solid
        #16845b;

    border-radius:0;

    background:#ffffff;

    color:#244c3b;

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

    cursor:pointer;

    touch-action:manipulation;

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

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

    will-change:transform;

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


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

    .mishkaty-catch-hit-item:hover{
        border-color:#0b9b60;

        background:#f5fff8;

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

}


.mishkaty-catch-hit-item:active{
    border-color:#087a43;
}


/*==========================================================
  ITEM IMAGE
==========================================================*/

.mishkaty-catch-hit-item-image{
    display:block;

    width:auto;
    height:auto;

    max-width:140px;
    max-height:92px;

    object-fit:contain;

    pointer-events:none;

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


/*==========================================================
  ITEM TEXT
==========================================================*/

.mishkaty-catch-hit-item-text{
    display:block;

    width:100%;

    margin:0;

    color:#244c3b;

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

    text-align:center;

    pointer-events:none;

    overflow-wrap:anywhere;
}


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

.mishkaty-catch-hit-item.mishkaty-game-correct,
.mishkaty-catch-hit-item.is-correct{
    border-color:#35a866 !important;

    background:#e9f9ef !important;

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


.mishkaty-catch-hit-item.mishkaty-game-wrong,
.mishkaty-catch-hit-item.is-wrong{
    border-color:#e15a5a !important;

    background:#fff0f0 !important;

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


.mishkaty-catch-hit-item.is-caught{
    opacity:.72;
}


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

.mishkaty-catch-hit-screen
.mishkaty-game-feedback{
    z-index:50;
}


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

.mishkaty-catch-hit-finish{
    position:absolute;

    inset:0;

    z-index:60;

    display:flex;

    flex-direction:column;

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

    gap:24px;

    width:100%;
    height:100%;

    margin:0;

    padding:
        40px;

    box-sizing:border-box;

    text-align:center;

    background:transparent;
}


.mishkaty-catch-hit-finish-icon{
    display:flex;

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

    width:150px;
    height:150px;

    margin:0;

    font-size:110px;
    line-height:1;
}


.mishkaty-catch-hit-finish
.mishkaty-game-title{
    width:auto;
    max-width:90%;

    margin:0;

    color:#087a43;

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

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

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

    text-align:center;
}


.mishkaty-catch-hit-finish
.mishkaty-game-instruction{
    width:auto;
    max-width:90%;

    margin:0;

    color:#355949;

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

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );

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

    text-align:center;
}


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

@media (max-width:900px){

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

        padding:
            4px
            20px
            92px;
    }


    .mishkaty-catch-hit-header{
        width:100%;

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

        padding:
            8px
            14px;
    }


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

        font-size:40px;
    }


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

        font-size:39px;
    }


    .mishkaty-catch-hit-screen
    > .mishkaty-game-instruction{
        font-size:34px;
    }


    .mishkaty-catch-hit-target{
        width:100%;
        height:76px;

        gap:14px;

        margin:
            8px
            auto;

        padding:
            8px
            16px;
    }


    .mishkaty-catch-hit-target-label{
        font-size:25px;
    }


    .mishkaty-catch-hit-target-text{
        font-size:32px;
    }


    .mishkaty-catch-hit-arena{
        width:100%;
        height:100%;
    }


    .mishkaty-catch-hit-item{
        width:170px;
        height:140px;

        padding:
            8px
            10px;
    }


    .mishkaty-catch-hit-item-image{
        max-width:125px;
        max-height:86px;
    }


    .mishkaty-catch-hit-item-text{
        font-size:42px;
    }

}


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

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

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

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

        padding:
            4px
            16px
            92px;

        background:transparent !important;
    }


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


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

        font-size:40px;
    }


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


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-target{
        height:104px;

        gap:18px;

        padding:
            12px
            18px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-target-label{
        font-size:31px;
    }


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


    /*
     * في الهاتف نجعل العناصر كبيرة وواضحة للطفل،
     * لكن ليست ضخمة حتى تبقى الحركة طبيعية.
     */
    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-item{
        width:185px;
        height:155px;

        padding:
            9px
            9px;

        border-width:5px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-item-image{
        max-width:140px;
        max-height:96px;
    }


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


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-finish{
        padding:
            80px
            36px
            120px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-finish-icon{
        width:190px;
        height:190px;

        font-size:145px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-finish
    .mishkaty-game-title{
        font-size:52px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-finish
    .mishkaty-game-instruction{
        font-size:36px;
    }

}


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

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

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

        padding:
            2px
            12px
            86px;
    }


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


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


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-target-label{
        font-size:29px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-target-text{
        font-size:28px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-item{
        width:165px;
        height:145px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-catch-hit-item-image{
        max-width:122px;
        max-height:88px;
    }


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

}


/*==========================================================
  MOBILE PORTRAIT STAGE CLASS
  Real game + builder preview
==========================================================*/

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

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

    padding:
        4px
        16px
        92px !important;

    background:transparent !important;
}


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

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

    padding:
        8px
        14px !important;
}


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

    font-size:40px !important;
}


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

    font-size:28px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-screen
> .mishkaty-game-instruction{
    font-size:32px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-target{
    width:100% !important;
    height:104px !important;

    gap:18px !important;

    margin:
        7px
        auto !important;

    padding:
        12px
        18px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-target-label{
    font-size:31px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-target-text{
    font-size:42px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-arena{
    width:100% !important;
    height:100% !important;

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


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-item{
    width:185px !important;
    height:155px !important;

    padding:
        9px
        9px !important;

    border-width:5px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-item-image{
    max-width:140px !important;
    max-height:96px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-catch-hit-item-text{
    font-size:34px !important;
}


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

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

    .mishkaty-catch-hit-item{
        transition:none;
    }

}