/*==========================================================
 * MISKHATY GAMES
 * Game Type: Trace & Write
 * Version 1.0.0
 *==========================================================*/

.mishkaty-trace-write-screen{
    display:grid;

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

    gap:10px;

    width:100%;
    height:100%;

    padding:
        14px
        70px
        28px;

    box-sizing:border-box;

    overflow:hidden;
}


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

.mishkaty-trace-write-header{
    display:grid;

    grid-template-columns:
        1fr
        110px;

    align-items:center;

    width:min(100%,1024px);
    height:68px;

    margin:0 auto;

    padding:
        0
        16px;

    background:#087f45;

    border:3px solid rgba(0,0,0,.08);

    box-shadow:
        0 4px 5px rgba(0,0,0,.22);

    box-sizing:border-box;
}


.mishkaty-trace-write-header
.mishkaty-game-title{
    margin:0;

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

    text-align:center;

    color:#fff;
}


.mishkaty-trace-write-progress{
    display:flex;

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

    min-height:42px;

    padding:
        5px
        12px;

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

    border:1px solid rgba(0,0,0,.08);

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

    color:#075c35;

    box-sizing:border-box;
}


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

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

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

    width:100%;

    margin:0;

    padding:
        6px
        12px;

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

    text-align:center;

    color:#b6230f;

    box-sizing:border-box;

    white-space:normal;
}


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

.mishkaty-trace-write-target{
    display:flex;

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

    width:100%;

    box-sizing:border-box;
}


.mishkaty-trace-write-target-label{
    display:flex;

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

    min-width:110px;
    min-height:58px;

    max-width:80%;

    padding:
        6px
        20px;

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

    border:2px solid rgba(8,127,69,.22);

    font-size:42px;
    line-height:1.15;
    font-weight:800;

    text-align:center;

    color:#164c36;

    box-sizing:border-box;
}


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

.mishkaty-trace-write-board{
    position:relative;

    display:flex;

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

    width:min(100%,1024px);
    min-height:260px;
    height:100%;

    margin:0 auto;

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

    border:3px dashed rgba(8,127,69,.52);

    box-sizing:border-box;

    overflow:hidden;
}


.mishkaty-trace-write-canvas{
    display:block;

    width:100%;
    height:100%;

    min-height:260px;

    background:transparent;

    cursor:crosshair;

    touch-action:none;

    box-sizing:border-box;
}


.mishkaty-trace-write-canvas.is-correct,
.mishkaty-trace-write-canvas.mishkaty-game-correct{
    box-shadow:
        inset 0 0 0 5px rgba(32,165,90,.30);
}


.mishkaty-trace-write-canvas.is-wrong,
.mishkaty-trace-write-canvas.mishkaty-game-wrong{
    box-shadow:
        inset 0 0 0 5px rgba(220,56,56,.26);
}


/*==========================================================
  CONTROLS
==========================================================*/

.mishkaty-trace-write-controls{
    display:flex;

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

    gap:16px;

    width:100%;
}


.mishkaty-trace-write-clear,
.mishkaty-trace-write-check{
    min-width:130px;
    min-height:50px;

    padding:
        8px
        22px;

    border:0;

    font-family:inherit;

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

    cursor:pointer;

    box-shadow:
        0 3px 4px rgba(0,0,0,.16);

    box-sizing:border-box;
}


.mishkaty-trace-write-clear{
    background:#fff;

    border:2px solid #087f45;

    color:#087f45;
}


.mishkaty-trace-write-check{
    background:#087f45;

    border:2px solid #087f45;

    color:#fff;
}


.mishkaty-trace-write-clear:active,
.mishkaty-trace-write-check:active{
    transform:translateY(1px);
}


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

.mishkaty-trace-write-screen
> .mishkaty-game-feedback{
    display:flex;

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

    min-height:40px;

    margin:0;

    padding:
        4px
        10px;

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

    text-align:center;

    box-sizing:border-box;
}


.mishkaty-trace-write-screen
> .mishkaty-game-feedback:empty{
    visibility:hidden;
}


.mishkaty-trace-write-screen
> .mishkaty-game-feedback.is-correct{
    color:#087f45;
}


.mishkaty-trace-write-screen
> .mishkaty-game-feedback.is-wrong{
    color:#b6230f;
}


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

.mishkaty-trace-write-finish{
    grid-row:1 / -1;

    display:flex;

    flex-direction:column;

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

    gap:18px;

    width:100%;
    height:100%;

    text-align:center;
}


.mishkaty-trace-write-finish-icon{
    font-size:86px;
    line-height:1;
}


.mishkaty-trace-write-finish
.mishkaty-game-title{
    margin:0;

    font-size:44px;
    font-weight:800;

    color:#087f45;
}


.mishkaty-trace-write-finish
.mishkaty-game-instruction{
    margin:0;

    font-size:28px;
    font-weight:700;

    color:#214c3b;
}


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

@media (max-width:1024px){

    .mishkaty-trace-write-screen{
        padding-left:34px;
        padding-right:34px;
    }


    .mishkaty-trace-write-header
    .mishkaty-game-title{
        font-size:26px;
    }


    .mishkaty-trace-write-screen
    > .mishkaty-game-instruction{
        font-size:28px;
    }

}


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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen{
        grid-template-rows:
            82px
            92px
            72px
            360px
            72px
            54px;

        gap:8px;

        padding:
            4px
            10px
            88px;

        overflow:hidden;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-header{
        grid-template-columns:
            1fr
            90px;

        width:100%;
        height:62px;

        padding:
            0
            10px;
    }


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


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-progress{
        min-height:38px;

        font-size:21px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen
    > .mishkaty-game-instruction{
        padding:
            16px
            10px
            6px;

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

        white-space:normal;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target-label{
        min-width:100px;
        min-height:58px;

        max-width:94%;

        padding:
            5px
            14px;

        font-size:42px;

        white-space:normal;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-board{
        width:100%;
        height:360px;
        min-height:360px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-canvas{
        height:360px;
        min-height:360px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls{
        gap:12px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-clear,
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-check{
        min-width:120px;
        min-height:56px;

        padding:
            8px
            18px;

        font-size:25px;
    }


    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen
    > .mishkaty-game-feedback{
        font-size:21px;
    }

}


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

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

    .mishkaty-trace-write-screen{
        grid-template-rows:
            62px
            48px
            50px
            minmax(160px,1fr)
            54px
            38px;

        gap:5px;

        padding:
            4px
            24px
            8px;
    }


    .mishkaty-trace-write-header{
        height:54px;
    }


    .mishkaty-trace-write-header
    .mishkaty-game-title{
        font-size:22px;
    }


    .mishkaty-trace-write-screen
    > .mishkaty-game-instruction{
        font-size:23px;
    }


    .mishkaty-trace-write-target-label{
        min-height:44px;

        font-size:32px;
    }


    .mishkaty-trace-write-board,
    .mishkaty-trace-write-canvas{
        min-height:160px;
    }


    .mishkaty-trace-write-clear,
    .mishkaty-trace-write-check{
        min-width:110px;
        min-height:44px;

        font-size:20px;
    }

}


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

.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-screen{
    grid-template-rows:
        82px
        92px
        72px
        360px
        72px
        54px !important;

    gap:8px !important;

    padding:
        4px
        10px
        88px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-header{
    grid-template-columns:
        1fr
        90px !important;

    width:100% !important;
    height:62px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-header
.mishkaty-game-title{
    font-size:25px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-screen
> .mishkaty-game-instruction{
    font-size:34px !important;
    line-height:1.3 !important;

    white-space:normal !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-target-label{
    font-size:42px !important;

    white-space:normal !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-board,
.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-canvas{
    height:360px !important;
    min-height:360px !important;
}


.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-clear,
.mishkaty-game-stage.mishkaty-mobile-portrait
.mishkaty-trace-write-check{
    min-width:120px !important;
    min-height:56px !important;

    font-size:25px !important;
}


/*==========================================================
  DESKTOP FINAL ADJUSTMENTS
  تعديلات الكمبيوتر فقط
==========================================================*/

@media (min-width:1025px){

    /* تقريب التعليمات من شريط العنوان */
    .mishkaty-trace-write-screen{
        grid-template-rows:
            80px
            72px
            70px
            minmax(260px,1fr)
            64px
            48px;
    }

    /* تكبير حرف المثال أعلى مساحة الكتابة */
    .mishkaty-trace-write-target-label{
        font-size:48px !important;
        line-height:1 !important;
        min-width:118px;
        min-height:64px;
    }

    /* جعل شريط الأزرار بعرض مساحة الكتابة */
    .mishkaty-trace-write-controls{
        width:min(100%,1024px);
        margin:0 auto;
        gap:12px;
    }

    /* اسمع ومسح بنفس العرض */
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-speak,
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-clear{
        flex:1 1 0;
        min-width:0;
    }

    /* تحقق أكبر من الزرين الآخرين */
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-check{
        flex:2 1 0;
        min-width:0;
    }
}


/*==========================================================
  DESKTOP TARGET BACKGROUND WIDTH
  خلفية حرف المثال بعرض مساحة الكتابة - الكمبيوتر فقط
==========================================================*/

@media (min-width:1025px){

    .mishkaty-trace-write-target{
        width:min(100%,1024px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .mishkaty-trace-write-target-label{
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        box-sizing:border-box !important;
        padding:8px 12px 10px !important;
    }
}


/*==========================================================
  DESKTOP TARGET TOP SPACE
  فراغ بسيط فوق حرف المثال - الكمبيوتر فقط
==========================================================*/

@media (min-width:1025px){

    .mishkaty-trace-write-target-label{
        padding-top:14px !important;
        padding-bottom:10px !important;
    }
}


/*==========================================================
  PHONE PORTRAIT FINAL LAYOUT
  تعديلات الهاتف فقط - بدون المساس بالكمبيوتر
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen{
        grid-template-rows:
            86px
            82px
            92px
            560px
            92px
            54px;

        gap:8px;

        padding:
            4px
            10px
            88px;

        overflow:hidden;
    }


    /* 1- عنوان الصفحة بحجم أوضح مثل بقية الألعاب */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-header
    .mishkaty-game-title{
        font-size:31px;
        line-height:1.15;
    }


    /* 2- رفع عبارة التعليمات قليلًا */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen
    > .mishkaty-game-instruction{
        display:flex;
        align-items:flex-start;
        justify-content:center;

        padding:
            6px
            10px
            0;

        font-size:34px;
        line-height:1.2;
    }


    /* 3 + 6- حرف المثال أكبر وبنفس عائلة خط الكمبيوتر */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target{
        width:100%;
        margin:0 auto;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target-label{
        width:100%;
        max-width:none;

        min-width:0;
        min-height:78px;

        padding:
            12px
            18px
            10px;

        font-family:"Arial","Tahoma",sans-serif;
        font-size:58px;
        line-height:1;
        font-weight:800;
    }


    /* 5- مساحة كتابة أكبر على الهاتف */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-board{
        width:100%;
        height:560px;
        min-height:560px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-canvas{
        height:560px;
        min-height:560px;

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


    /* 4- نفس فكرة أزرار الكمبيوتر */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls{
        display:flex;
        width:100%;
        margin:0 auto;
        gap:12px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-speak,
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-clear{
        flex:1 1 0;
        min-width:0;
        min-height:72px;

        padding:
            10px
            12px;

        font-size:28px;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-check{
        flex:2 1 0;
        min-width:0;
        min-height:72px;

        padding:
            10px
            12px;

        font-size:28px;
    }
}


/*==========================================================
  PHONE PORTRAIT - LARGE WORK AREA
  الهاتف فقط - الكمبيوتر لا يتأثر
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen{
        position:relative !important;

        display:grid !important;

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

        gap:6px !important;

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

        padding:
            4px
            10px
            86px !important;

        overflow:hidden !important;
    }


    /* تكبير الحرف الرئيسي أعلى مساحة الكتابة */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target{
        width:100% !important;
        height:112px !important;
        margin:0 auto !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target-label{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

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

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

        padding:
            12px
            16px
            10px !important;

        box-sizing:border-box !important;

        font-family:"Arial","Tahoma",sans-serif !important;
        font-size:72px !important;
        font-weight:800 !important;
        line-height:1 !important;
    }


    /* مساحة الكتابة تأخذ كل المساحة المتبقية حتى قرب زر الألعاب */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-board{
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        align-self:stretch !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-canvas{
        display:block !important;

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

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


    /* تكبير خط الأزرار السفلية مع نفس نسب الكمبيوتر */
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls{
        display:flex !important;

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

        margin:0 auto !important;
        gap:10px !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-speak,
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-clear{
        flex:1 1 0 !important;

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

        padding:
            10px
            8px !important;

        font-size:34px !important;
        line-height:1 !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-controls
    .mishkaty-trace-write-check{
        flex:2 1 0 !important;

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

        padding:
            10px
            8px !important;

        font-size:34px !important;
        line-height:1 !important;
    }
}


/*==========================================================
  PHONE PORTRAIT - SAFE HEADER SIZE
  الهاتف فقط - يحافظ على بنية عنوان لعبة الكتابة
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-header{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:100% !important;
        height:86px !important;
        min-height:86px !important;

        padding:
            8px
            14px !important;

        box-sizing:border-box !important;
    }

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-header
    .mishkaty-game-title{
        position:static !important;
        transform:none !important;

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

        margin:0 auto !important;

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

        font-size:40px !important;
        line-height:1.15 !important;
        font-weight:800 !important;

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-progress{
        position:absolute !important;
        left:14px !important;
        top:50% !important;
        transform:translateY(-50%) !important;

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

        width:110px !important;
        min-width:110px !important;
        height:50px !important;

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

        box-sizing:border-box !important;

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

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-screen{
        grid-template-rows:
            86px
            72px
            112px
            minmax(0,1fr)
            86px
            54px !important;
    }
}


/*==========================================================
  PHONE PORTRAIT - CAIRO HEADER FONT
  خط كايرو للعنوان والعداد - الهاتف فقط
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-header
    .mishkaty-game-title,
    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-progress{
        font-family:
            "Cairo",
            "Tahoma",
            "Arial",
            sans-serif !important;
    }
}


/*==========================================================
  PHONE PORTRAIT - CENTER MAIN LETTER VERTICALLY
  توسيط الحرف الرئيسي أعلى وأسفل الخلفية البيضاء - الهاتف فقط
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target-label{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding-top:0 !important;
        padding-bottom:0 !important;

        line-height:1 !important;
    }
}


/*==========================================================
  PHONE PORTRAIT - FINAL LETTER OPTICAL CENTER
  رفع الحرف قليلًا للتوسيط البصري الكامل - الهاتف فقط
==========================================================*/

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

    #oab-program-games-page.is-game-playing
    .mishkaty-trace-write-target-label{
        transform:translateY(-5px) !important;
    }
}