/*==========================================================
 * MISKHATY GAMES ENGINE
 * Core Styles
 * Version 1.2.0
 *==========================================================*/

.mishkaty-game-root{
    position:relative;

    width:100%;
    height:100%;

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

    overflow:hidden;

    background:#ffffff;
}


/*==========================================================
  GAME STAGE
  المقاس المرجعي الثابت 1920 × 1080
==========================================================*/

.mishkaty-game-stage{
    position:absolute;

    left:50%;
    top:50%;

    width:1920px;
    height:1080px;

    transform-origin:center center;

    overflow:hidden;

    direction:rtl;

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

    background:#ffffff;
}


/*==========================================================
  COMMON GAME ELEMENTS
==========================================================*/

.mishkaty-game-stage *,
.mishkaty-game-stage *::before,
.mishkaty-game-stage *::after{
    box-sizing:border-box;
}


.mishkaty-game-screen{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;
}


.mishkaty-game-hidden{
    display:none !important;
}


/*==========================================================
  GAME TITLE
==========================================================*/

.mishkaty-game-title{
    margin:0;

    color:#126b4a;

    font-size:64px;
    line-height:1.35;
    font-weight:800;

    text-align:center;
}


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

.mishkaty-game-instruction{
    margin:0;

    color:#355447;

    font-size:42px;
    line-height:1.6;
    font-weight:700;

    text-align:center;
}


/*==========================================================
  COMMON BUTTON
==========================================================*/

.mishkaty-game-button{
    min-width:220px;
    min-height:90px;

    padding:14px 28px;

    border:3px solid #126b4a;
    border-radius:0;

    background:#16845b;
    color:#ffffff;

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

    cursor:pointer;

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

    touch-action:manipulation;
}


.mishkaty-game-button:hover{
    background:#126b4a;
}


.mishkaty-game-button:active{
    transform:scale(.98);
}


/*==========================================================
  ANSWER STATES
==========================================================*/

.mishkaty-game-correct{
    outline:8px solid #35a866 !important;
    background:#e9f9ef !important;
}


.mishkaty-game-wrong{
    outline:8px solid #e15a5a !important;
    background:#fff0f0 !important;
}


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

.mishkaty-game-feedback{
    position:absolute;

    left:50%;
    bottom:55px;

    transform:translateX(-50%);

    min-width:360px;

    padding:16px 34px;

    background:#ffffff;

    border:4px solid #16845b;

    color:#21483a;

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

    text-align:center;

    pointer-events:none;
}


/*==========================================================
  CORRECT ANSWER POINTS INDICATOR
  مؤشر واضح يظهر عند الإجابة الصحيحة مثل: +5 💎
==========================================================*/

.mishkaty-answer-points-indicator{
    position:absolute;

    left:50%;
    top:28%;

    z-index:950;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    min-width:260px;
    min-height:92px;

    padding:20px 38px;

    transform:
        translate(-50%, 0)
        scale(.82);

    opacity:0;

    border:4px solid rgba(22,132,91,.28);
    border-radius:0;

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

    color:#126b4a;

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

    text-align:center;

    white-space:nowrap;

    pointer-events:none;

    box-shadow:
        0 12px 32px rgba(18,107,74,.20);

    animation:
        mishkaty-answer-points-pop
        1100ms
        ease-out
        forwards;
}


@keyframes mishkaty-answer-points-pop{

    0%{
        opacity:0;

        transform:
            translate(-50%, 20px)
            scale(.78);
    }

    20%{
        opacity:1;

        transform:
            translate(-50%, 0)
            scale(1.08);
    }

    42%{
        opacity:1;

        transform:
            translate(-50%, -8px)
            scale(1);
    }

    76%{
        opacity:1;

        transform:
            translate(-50%, -22px)
            scale(1);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%, -42px)
            scale(.94);
    }

}


/*==========================================================
  ACCESSIBILITY
==========================================================*/

.mishkaty-game-stage button:focus-visible,
.mishkaty-game-stage [role="button"]:focus-visible{
    outline:8px solid #f4bc3e;
    outline-offset:6px;
}


/*==========================================================
  MEDIA
  لا نغيّر مقاس اللعبة هنا.
  game-engine.js يتولى التصغير والتكبير.
==========================================================*/

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

    .mishkaty-game-stage *,
    .mishkaty-game-stage *::before,
    .mishkaty-game-stage *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }


    .mishkaty-answer-points-indicator{
        opacity:1;

        transform:
            translate(-50%, 0);

        animation:none !important;
    }

}