/* =========================================================
   RESPONSIVE — TABLET / SMALL DESKTOP
========================================================= */

@media(max-width:1060px){

    /* =====================================================
       NAVBAR
    ====================================================== */

    .nav-links{
        display:none;
    }

    .menu-btn{
        display:inline-flex;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero{
        min-height:auto;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .hero-copy{
        max-width:760px;
    }

    .hero-visual{
        min-height:490px;
    }


    /* =====================================================
       PRINCIPLES
    ====================================================== */

    .principles-grid{
        grid-template-columns:1fr 1fr;
    }


    /* =====================================================
       PROJECTS
    ====================================================== */

    .project-card,
    .project-card:nth-child(even){
        grid-template-columns:1fr;
    }

    .project-card:nth-child(even) .project-media{
        order:0;
    }


    /* =====================================================
       EXPERIENCE
    ====================================================== */

    .experience-layout{
        grid-template-columns:1fr;
        gap:26px;
    }

    .experience-intro{
        position:static;
    }


    /* =====================================================
       NOTES
    ====================================================== */

    .notes-grid{
        grid-template-columns:1fr 1fr;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact-layout{
        grid-template-columns:1fr;
    }


    /* =====================================================
       ABOUT PAGE
    ====================================================== */

    .about-page-grid{
        grid-template-columns:1fr;
    }

    .about-page-portrait{
        justify-self:start;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-grid{
        grid-template-columns:1fr;
        justify-items:start;
    }

    .footer-note{
        text-align:start;
    }


    /* =====================================================
       ABOUT PEEK — TABLET
    ====================================================== */

    .about-peek{
        top:auto;
        right:0;
        bottom:78px;

        transform:
            translateX(118%);
    }

    .about-peek.show{
        transform:
            translateX(0);
    }

    .peek-character{
        width:185px;
        height:292px;
    }

    .peek-character img{
        width:225px;
        right:-43px;
    }

    .peek-wall{
        width:28px;
    }

    .peek-speech{
        right:172px;
        top:45px;
        width:245px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:760px){

    :root{
        --header-h:70px;
    }


    .container{
        width:min(100% - 24px,1180px);
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .site-header{
        padding:6px 0;
    }

    .nav-shell{
        height:58px;
        border-radius:15px;
        gap:8px;
        padding:0 8px;
    }

    .brand{
        flex:0 0 auto;
    }

    .brand-name{
        display:none;
    }

    .nav-tools{
        margin-inline-start:auto;
        gap:5px;
        min-width:0;
    }

    .search-btn{
        width:40px;
        padding:0;
        flex:0 0 40px;
    }

    .kbd-hint{
        display:none;
    }

    .cv-btn{
        display:none;
    }

    .play-link{
        display:inline-flex;
    }


    /* =====================================================
       MOBILE NAV
    ====================================================== */

    .mobile-nav{
        top:72px;

        left:12px;
        right:12px;

        border-radius:16px;
        padding:8px;

        pointer-events:auto;
    }

    .mobile-nav.open{
        display:grid;
    }

    .mobile-nav a{
        pointer-events:auto;

        min-height:48px;

        padding:12px 14px;

        font-size:14px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero{
        padding-top:118px;
        padding-bottom:60px;
    }

    .hero h1{
        font-size:56px;
    }

    .hero-role{
        font-size:16px;
    }

    .hero-visual{
        min-height:420px;
    }

    .hero-glow{
        width:100%;
        right:0;
    }

    .hero-person{
        width:68%;
        right:-7%;
        bottom:5px;
    }

    .hero-bubble{
        top:18px;
        left:0;

        max-width:235px;

        font-size:13px;

        padding:11px 13px;
    }


    /* =====================================================
       ANYDESK — MOBILE
    ====================================================== */

    .anydesk-card{
        top:124px;
        left:1%;

        width:194px;

        padding:10px;

        border-radius:19px;
    }

    .anydesk-brand{
        gap:8px;
        font-size:15px;
    }

    .anydesk-mark{
        width:21px;
        height:21px;
    }

    .anydesk-mark:before,
    .anydesk-mark:after{
        width:13px;
        height:13px;
        top:4px;
    }

    .anydesk-mark:after{
        left:8px;
    }

    .anydesk-label{
        font-size:11px;

        margin:9px 0 5px;
    }

    .anydesk-id{
        border-radius:12px;

        padding:6px 7px 6px 10px;

        font-size:14px;
    }

    .anydesk-id button{
        width:32px;
        height:32px;

        border-radius:9px;

        font-size:14px;
    }

    .hero-note{
        display:none;
    }

    .hero-cloud-left{
        width:250px;
        left:-75px;
    }

    .hero-cloud-right{
        width:280px;
        right:-90px;
    }

    .scroll-cue{
        bottom:10px;
    }


    /* =====================================================
       SECTIONS
    ====================================================== */

    .section{
        padding:64px 0;
    }

    .section-head{
        align-items:start;
        flex-direction:column;

        gap:12px;

        margin-bottom:22px;
    }

    .principles-grid,
    .notes-grid,
    .about-story-grid{
        grid-template-columns:1fr;
    }


    /* =====================================================
       EXPERIENCE
    ====================================================== */

    .experience-layout{
        grid-template-columns:1fr;
        gap:22px;
    }

    .experience-timeline{
        padding-left:22px;
    }

    .experience-item{
        padding-left:28px;
    }


    /* =====================================================
       PROJECTS
    ====================================================== */

    .project-card{
        padding:12px;
        border-radius:22px;
    }

    .project-media{
        min-height:210px;
    }

    .project-body{
        padding:8px;
    }

    .project-body h3{
        font-size:24px;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact-layout{
        padding:18px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .field.full{
        grid-column:auto;
    }


    /* =====================================================
       GENERAL PANELS
    ====================================================== */

    .panel-wide{
        align-items:start;
        flex-direction:column;
    }

    .learning-chips{
        justify-content:flex-start;
    }


    /* =====================================================
       PAGE HERO
    ====================================================== */

    .page-hero{
        padding-top:72px;
    }

    .page-hero h1{
        font-size:52px;
    }


    /* =====================================================
       ABOUT PEEK — MOBILE
    ====================================================== */

    .about-peek{
        display:block;

        right:0;
        bottom:70px;
        top:auto;
    }

    .peek-character{
        width:148px;
        height:235px;
    }

    .peek-character img{
        width:182px;
        right:-36px;
        bottom:0;
    }

    .peek-wall{
        width:22px;
        right:-3px;
    }

    .peek-character::before{
        width:110px;
        height:180px;

        right:5px;
        top:34px;
    }

    .peek-character::after{
        left:7px;
        top:70px;

        transform:
            scale(.8)
            rotate(-16deg);
    }

    .peek-speech{
        right:136px;
        top:30px;

        width:218px;

        padding:13px 14px;
    }

    .peek-speech::after{
        top:62px;
    }


    /* =====================================================
       ACCENT POPOVER
    ====================================================== */

    .accent-popover{
        right:12px;
        left:auto;
        top:72px;
    }


    /* =====================================================
       ABOUT MODAL
    ====================================================== */

    .about-modal{
        padding:26px 22px;
    }

    .about-modal h2{
        font-size:32px;
    }


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

    .game-shell{
        padding:10px;
    }

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

    .mobile-controls{
        display:flex;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media(max-width:500px){

    /* =====================================================
       NAVBAR
    ====================================================== */

    .container{
        width:min(100% - 20px,1180px);
    }

    .nav-shell{
        gap:6px;
        padding:0 7px;
    }

    .nav-tools{
        gap:4px;
        margin-inline-start:auto;
    }

    .icon-btn,
    .lang-btn,
    .menu-btn{
        height:38px;
    }

    .icon-btn{
        width:38px;
        flex-basis:38px;
    }

    .search-btn{
        width:38px;
        flex-basis:38px;
    }

    .play-link{
        width:38px;
        flex-basis:38px;
    }

    .menu-btn{
        width:38px;
        flex-basis:38px;
    }

    .lang-btn{
        min-width:54px;

        padding:0 7px;

        gap:5px;
    }

    .lang-btn .globe{
        font-size:16px;
    }

    .mobile-nav{
        left:10px;
        right:10px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero h1{
        font-size:48px;
    }

    .hero-visual{
        min-height:360px;
    }

    .hero-person{
        width:76%;
        right:-15%;
    }

    .hero-bubble{
        max-width:210px;
    }


    /* =====================================================
       ANYDESK — SMALL MOBILE
    ====================================================== */

    .anydesk-card{
        width:178px;

        top:112px;

        padding:9px;

        border-radius:18px;
    }

    .anydesk-brand{
        gap:7px;
        font-size:14px;
    }

    .anydesk-mark{
        width:20px;
        height:20px;
    }

    .anydesk-mark:before,
    .anydesk-mark:after{
        width:12px;
        height:12px;

        top:4px;
    }

    .anydesk-mark:after{
        left:7px;
    }

    .anydesk-label{
        font-size:10.5px;

        margin:8px 0 5px;
    }

    .anydesk-id{
        padding:5px 6px 5px 9px;

        font-size:13px;

        border-radius:11px;
    }

    .anydesk-id button{
        width:29px;
        height:29px;

        border-radius:8px;

        font-size:13px;
    }


    /* =====================================================
       EXPERIENCE
    ====================================================== */

    .experience-timeline{
        padding-left:20px;
    }

    .experience-item{
        padding-left:24px;
    }


    /* =====================================================
       OTHER
    ====================================================== */

    .principle{
        min-height:0;
    }

    .footer-links{
        flex-wrap:wrap;
    }


    /* =====================================================
       ABOUT PEEK — SMALL MOBILE
    ====================================================== */

    /*
     * سابقًا كان هنا:
     *
     * .about-peek{
     *     display:none;
     * }
     *
     * وهذا هو سبب اختفائه على الجوال الحقيقي.
     */

    .about-peek{
        display:block;

        right:0;
        bottom:62px;
        top:auto;
    }

    .peek-character{
        width:136px;
        height:218px;
    }

    .peek-character img{
        width:168px;

        right:-33px;
        bottom:0;
    }

    .peek-wall{
        width:20px;

        right:-3px;
    }

    .peek-character::before{
        width:102px;
        height:166px;

        right:4px;
        top:31px;
    }

    .peek-character::after{
        left:6px;
        top:64px;

        transform:
            scale(.74)
            rotate(-16deg);
    }

    .peek-speech{
        right:124px;
        top:26px;

        width:min(
            200px,
            calc(100vw - 145px)
        );

        padding:11px 12px;

        font-size:12px;
    }

    .peek-speech::after{
        top:54px;
    }

}


/* =========================================================
   RESPONSIVE — EXTRA SMALL DEVICES
========================================================= */

@media(max-width:390px){

    /* =====================================================
       NAVBAR
    ====================================================== */

    .nav-shell{
        gap:4px;
        padding:0 5px;
    }

    .nav-tools{
        gap:3px;
    }

    .brand-mark{
        width:30px;
        height:30px;

        flex-basis:30px;
    }

    .icon-btn,
    .search-btn,
    .play-link,
    .menu-btn{
        width:36px;
        height:36px;

        flex-basis:36px;
    }

    .lang-btn{
        height:36px;

        min-width:50px;

        padding:0 5px;

        gap:4px;
    }

    .lang-btn .globe{
        font-size:15px;
    }


    /* =====================================================
       HERO — EXTRA SMALL
    ====================================================== */

    .anydesk-card{
        width:172px;

        padding:8px;
    }

    .anydesk-id{
        font-size:12.5px;
    }

    .anydesk-id button{
        width:28px;
        height:28px;
    }


    /* =====================================================
       ABOUT PEEK — EXTRA SMALL
    ====================================================== */

    .about-peek{
        display:block;

        right:0;
        bottom:56px;
    }

    .peek-character{
        width:124px;
        height:200px;
    }

    .peek-character img{
        width:154px;

        right:-31px;
    }

    .peek-wall{
        width:19px;
    }

    .peek-character::before{
        width:94px;
        height:152px;

        right:3px;
        top:28px;
    }

    .peek-character::after{
        left:5px;
        top:58px;

        transform:
            scale(.68)
            rotate(-16deg);
    }

    .peek-speech{
        right:113px;
        top:23px;

        width:min(
            185px,
            calc(100vw - 130px)
        );

        padding:10px 11px;

        font-size:11.5px;
    }

    .peek-speech::after{
        top:48px;
    }

}


/* =========================================================
   EXTREMELY SMALL DEVICES
========================================================= */

@media(max-width:340px){

    /*
     * نخفي زر اللعبة من Navbar فقط.
     * اللعبة تظل داخل القائمة المنسدلة.
     */
    .play-link{
        display:none;
    }


    /* =====================================================
       ABOUT PEEK — VERY SMALL
    ====================================================== */

    .about-peek{
        display:block;

        bottom:50px;
    }

    .peek-character{
        width:116px;
        height:188px;
    }

    .peek-character img{
        width:144px;

        right:-29px;
    }

    .peek-speech{
        right:105px;

        width:min(
            168px,
            calc(100vw - 118px)
        );

        font-size:11px;
    }

}