/* =========================================================
   GAME PAGE
========================================================= */

.game-page{
    min-height:100vh;
}

.game-section{
    padding-top:30px;
}


/* =========================================================
   GAME SHELL
========================================================= */

.game-shell{
    border:1px solid var(--line);
    border-radius:26px;

    background:rgba(9,19,34,.72);

    padding:18px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    /*
     * حماية إضافية من أي overflow
     * قادم من عناصر اللعبة.
     */
    min-width:0;
}


/* =========================================================
   GAME TOOLBAR
========================================================= */

.game-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:14px;
}

.game-toolbar > div{
    display:grid;
    gap:4px;
}

.game-toolbar strong{
    font-size:13px;
}

.game-toolbar span{
    font-size:11px;
    color:var(--muted);
}


/* =========================================================
   GAME STAGE
========================================================= */

.game-stage{
    position:relative;

    width:100%;
    max-width:100%;

    min-width:0;

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

    overflow:hidden;
}


/* =========================================================
   GAME FRAME
========================================================= */

.game-frame{
    position:relative;

    width:100%;
    max-width:100%;

    min-width:0;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:
        radial-gradient(
            circle at 75% 18%,
            rgba(77,135,255,.12),
            transparent 35%
        ),
        #071321;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 24px 70px rgba(0,0,0,.28);

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

    touch-action:none;
}


/* =========================================================
   CANVAS
========================================================= */

.game-frame canvas{
    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    aspect-ratio:16 / 9;

    touch-action:none;

    background:#081526;
}


/* =========================================================
   GAME MESSAGE
========================================================= */

.game-message{
    position:absolute;

    left:50%;
    bottom:24px;

    z-index:25;

    width:min(
        520px,
        calc(100% - 40px)
    );

    box-sizing:border-box;

    transform:
        translateX(-50%)
        translateY(12px);

    display:block;

    padding:14px 18px;

    border:1px solid var(--line-strong);
    border-radius:16px;

    background:rgba(7,17,31,.90);

    color:#fff;

    text-align:center;

    font-size:13px;
    line-height:1.6;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;

    pointer-events:none;
}

.game-message.show{
    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}

.game-message[data-mode="loading"]{
    color:#d9e8ff;
}

.game-message[data-mode="error"]{
    border-color:rgba(255,93,120,.42);
    color:#ffdce3;
}


/* =========================================================
   FALLBACK MOBILE CONTROLS
========================================================= */

.mobile-controls{
    display:none;

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

    gap:12px;

    margin-top:16px;

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

.mobile-controls button{
    display:grid;
    place-items:center;

    width:68px;
    height:56px;

    border:1px solid var(--line);
    border-radius:17px;

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

    color:var(--text);

    font-size:23px;

    cursor:pointer;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;

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

.mobile-controls button:active{
    transform:
        translateY(2px)
        scale(.96);

    background:rgba(108,124,255,.14);

    border-color:var(--line-strong);
}


/* =========================================================
   TOUCH UI
========================================================= */

.game-touch-ui{
    position:absolute;

    inset:0;

    z-index:20;

    display:none;

    pointer-events:none;

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

    touch-action:none;
}


/* =========================================================
   TOUCH MOVE PAD
========================================================= */

.game-touch-move{
    position:absolute;

    left:3.5%;
    bottom:5%;

    width:clamp(
        150px,
        25vw,
        245px
    );

    height:clamp(
        72px,
        13vw,
        108px
    );

    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;

    border:1px solid rgba(255,255,255,.16);

    border-radius:999px;

    background:rgba(4,13,26,.36);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 35px rgba(0,0,0,.22);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    opacity:.72;

    pointer-events:auto;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;

    transition:
        opacity .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.game-touch-move.active{
    opacity:.94;

    border-color:rgba(var(--accent-rgb),.48);

    background:rgba(7,18,34,.58);
}

.touch-move-arrow{
    display:grid;
    place-items:center;

    height:100%;

    color:rgba(255,255,255,.72);

    font-size:clamp(
        34px,
        6vw,
        52px
    );

    font-weight:300;

    line-height:1;
}

.touch-move-center{
    width:clamp(
        42px,
        7vw,
        60px
    );

    height:clamp(
        42px,
        7vw,
        60px
    );

    border:1px solid rgba(var(--accent-rgb),.42);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.18),
            rgba(var(--accent-rgb),.16)
        );

    box-shadow:
        0 0 22px
        rgba(var(--accent-rgb),.12);

    transform:translateX(0);

    transition:
        transform .08s linear,
        background .12s ease,
        border-color .12s ease;
}

.game-touch-move[data-direction="left"]
.touch-move-center{
    transform:translateX(-18px);

    background:rgba(var(--accent-rgb),.25);
}

.game-touch-move[data-direction="right"]
.touch-move-center{
    transform:translateX(18px);

    background:rgba(var(--accent-rgb),.25);
}


/* =========================================================
   TOUCH JUMP
========================================================= */

.game-touch-jump{
    position:absolute;

    right:4.5%;
    bottom:5%;

    width:clamp(
        78px,
        13vw,
        112px
    );

    height:clamp(
        78px,
        13vw,
        112px
    );

    display:grid;
    place-items:center;
    align-content:center;

    gap:0;

    border:1px solid rgba(var(--accent-rgb),.42);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.15),
            rgba(var(--accent-rgb),.14)
        );

    color:#fff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.26),
        0 0 24px rgba(var(--accent-rgb),.08);

    opacity:.78;

    pointer-events:auto;

    cursor:pointer;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .10s ease,
        opacity .12s ease,
        background .12s ease;
}

.game-touch-jump .jump-arrow{
    font-size:clamp(
        27px,
        5vw,
        42px
    );

    line-height:.9;
}

.game-touch-jump small{
    margin-top:3px;

    font-size:clamp(
        8px,
        1.6vw,
        11px
    );

    font-weight:800;

    letter-spacing:.08em;

    opacity:.76;
}

.game-touch-jump.active{
    opacity:1;

    transform:scale(.92);

    background:rgba(var(--accent-rgb),.30);
}


/* =========================================================
   TOUCH PAUSE
========================================================= */

.game-touch-pause{
    position:absolute;

    top:3%;
    right:3%;

    width:clamp(
        38px,
        6vw,
        48px
    );

    height:clamp(
        38px,
        6vw,
        48px
    );

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.14);

    border-radius:13px;

    background:rgba(4,13,26,.42);

    color:rgba(255,255,255,.84);

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

    opacity:.72;

    pointer-events:auto;

    cursor:pointer;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.game-touch-pause:active{
    transform:scale(.94);

    opacity:1;
}


/* =========================================================
   ORIENTATION HINT — DEFAULT
========================================================= */

.game-orientation-hint{
    position:absolute;

    inset:0;

    z-index:60;

    display:grid;
    place-items:center;

    padding:22px;

    box-sizing:border-box;

    background:rgba(3,11,22,.88);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .20s ease,
        visibility .20s ease;
}

.game-orientation-hint.show{
    opacity:1;
    visibility:visible;

    pointer-events:auto;
}


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

.orientation-card{
    width:min(
        340px,
        100%
    );

    max-width:100%;

    box-sizing:border-box;

    padding:24px 22px;

    border:1px solid var(--line-strong);

    border-radius:24px;

    background:rgba(7,18,34,.96);

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.42);

    text-align:center;
}

.orientation-icon{
    position:relative;

    width:74px;
    height:62px;

    margin:0 auto 15px;
}

.phone-shape{
    position:absolute;

    left:23px;
    top:4px;

    width:30px;
    height:50px;

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

    border-radius:8px;

    transform:rotate(-14deg);
}

.phone-shape:after{
    content:"";

    position:absolute;

    left:50%;
    bottom:4px;

    width:5px;
    height:2px;

    border-radius:99px;

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

    transform:translateX(-50%);
}

.rotate-arrow{
    position:absolute;

    right:2px;
    bottom:1px;

    color:var(--accent);

    font-size:32px;

    line-height:1;

    transform:rotate(-18deg);
}

.orientation-card strong{
    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-size:19px;
}

.orientation-card p{
    margin:0 auto 17px;

    color:var(--muted);

    font-size:13px;

    line-height:1.7;
}

.orientation-card .btn{
    width:100%;

    box-sizing:border-box;

    justify-content:center;
}

.orientation-skip{
    margin-top:12px;

    padding:5px 8px;

    border:0;

    background:transparent;

    color:var(--muted);

    font-size:11px;

    cursor:pointer;
}


/* =========================================================
   FULLSCREEN
========================================================= */

.game-stage:fullscreen,
.game-stage:-webkit-full-screen{
    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    margin:0;
    padding:0;

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

    overflow:hidden;

    background:#020914;
}

.game-stage:fullscreen .game-frame,
.game-stage:-webkit-full-screen .game-frame{
    width:min(
        100vw,
        calc(100vh * 16 / 9)
    );

    height:min(
        100vh,
        calc(100vw * 9 / 16)
    );

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

    aspect-ratio:16 / 9;

    border:0;
    border-radius:0;

    box-shadow:none;
}

.game-stage:fullscreen canvas,
.game-stage:-webkit-full-screen canvas{
    width:100%;
    height:100%;

    object-fit:contain;
}


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

@media(pointer:coarse){

    .game-touch-ui{
        display:block;
    }

    .mobile-controls{
        display:flex;
    }

}


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

@media(max-width:900px),
       (pointer:coarse){

    .game-shell{
        padding:12px;

        border-radius:20px;
    }

    .game-frame{
        border-radius:16px;
    }

}


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

@media(pointer:coarse)
and (orientation:portrait){

    /*
     * نافذة تدوير الجوال تغطي الـViewport
     * بدون استخدام 100vw أو 100dvh،
     * وبالتالي لا تضيف أي Scroll للصفحة.
     */
    .game-orientation-hint{
        position:fixed;

        inset:0;

        z-index:9999;

        width:auto;
        height:auto;

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

        max-width:none;
        max-height:none;

        box-sizing:border-box;

        padding:
            max(
                16px,
                env(safe-area-inset-top)
            )
            max(
                16px,
                env(safe-area-inset-right)
            )
            max(
                16px,
                env(safe-area-inset-bottom)
            )
            max(
                16px,
                env(safe-area-inset-left)
            );

        overflow:hidden;

        background:rgba(3,11,22,.96);
    }


    .game-orientation-hint.show{
        display:grid;
        place-items:center;
    }


    .orientation-card{
        width:min(
            330px,
            100%
        );

        max-width:100%;

        max-height:calc(
            100vh - 32px
        );

        box-sizing:border-box;

        overflow-y:auto;

        overscroll-behavior:contain;

        padding:20px 18px;

        border-radius:22px;
    }


    .orientation-icon{
        width:62px;
        height:52px;

        margin:0 auto 11px;
    }


    .phone-shape{
        left:20px;
        top:3px;

        width:25px;
        height:43px;
    }


    .rotate-arrow{
        right:2px;
        bottom:0;

        font-size:27px;
    }


    .orientation-card strong{
        margin-bottom:6px;

        font-size:17px;
    }


    .orientation-card p{
        margin:0 auto 13px;

        font-size:12px;
        line-height:1.55;
    }


    .orientation-card .btn{
        min-height:46px;

        padding:11px 14px;

        font-size:13px;

        border-radius:14px;
    }


    .orientation-skip{
        display:block;

        width:100%;

        min-height:38px;

        box-sizing:border-box;

        margin-top:7px;

        padding:8px 10px;

        font-size:11px;
    }


    .game-touch-ui{
        opacity:.22;
    }

}


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

@media(pointer:coarse)
and (orientation:landscape){

    .game-touch-ui{
        opacity:1;
    }


    .game-touch-move{
        left:3%;
        bottom:4%;
    }


    .game-touch-jump{
        right:3.5%;
        bottom:4%;
    }


    .game-orientation-hint{
        position:absolute;

        inset:0;

        width:auto;
        height:auto;

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

        padding:22px;

        box-sizing:border-box;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:600px){

    .game-toolbar{
        align-items:flex-start;
    }


    .game-toolbar span{
        max-width:220px;
    }


    .mobile-controls button{
        width:62px;
        height:52px;
    }

}


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

@media(pointer:coarse)
and (orientation:portrait)
and (max-height:620px){

    .orientation-card{
        padding:15px 16px;
    }


    .orientation-icon{
        width:52px;
        height:43px;

        margin-bottom:7px;
    }


    .phone-shape{
        left:17px;

        width:22px;
        height:37px;
    }


    .rotate-arrow{
        font-size:23px;
    }


    .orientation-card strong{
        font-size:15px;
    }


    .orientation-card p{
        margin-bottom:9px;

        font-size:11px;
        line-height:1.45;
    }


    .orientation-card .btn{
        min-height:42px;

        padding:9px 12px;
    }


    .orientation-skip{
        min-height:32px;

        margin-top:4px;

        padding:5px;
    }

}


/* =========================================================
   MOBILE FULLSCREEN
========================================================= */

@media(pointer:coarse){

    .game-stage:fullscreen,
    .game-stage:-webkit-full-screen{
        touch-action:none;

        overscroll-behavior:none;
    }


    .game-stage:fullscreen .game-touch-ui,
    .game-stage:-webkit-full-screen .game-touch-ui{
        display:block;

        opacity:1;
    }

}


/* =========================================================
   LANDSCAPE — SHORT HEIGHT PHONES
========================================================= */

@media(pointer:coarse)
and (orientation:landscape)
and (max-height:500px){

    .game-touch-move{
        width:clamp(
            138px,
            22vw,
            205px
        );

        height:clamp(
            64px,
            11vw,
            88px
        );
    }


    .game-touch-jump{
        width:clamp(
            66px,
            10vw,
            90px
        );

        height:clamp(
            66px,
            10vw,
            90px
        );
    }


    .game-touch-pause{
        width:36px;
        height:36px;

        font-size:13px;
    }

}


/* =========================================================
   VERY SHORT LANDSCAPE
========================================================= */

@media(pointer:coarse)
and (orientation:landscape)
and (max-height:380px){

    .game-touch-move{
        bottom:3%;
    }


    .game-touch-jump{
        bottom:3%;
    }


    .touch-move-arrow{
        font-size:31px;
    }


    .game-touch-jump .jump-arrow{
        font-size:27px;
    }

}