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

.site-header{
    position:fixed;

    inset:
        0 0 auto;

    z-index:1000;

    padding:
        10px 0;

    /*
     * الهيدر نفسه لا يمنع التعامل
     * مع الصفحة في المناطق الفارغة.
     */
    pointer-events:none;
}


/* =========================================================
   NAV SHELL
========================================================= */

.nav-shell{
    height:60px;

    border:
        1px solid transparent;

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:22px;

    padding:
        0 12px;

    pointer-events:auto;

    transition:
        .25s background,
        .25s border-color,
        .25s box-shadow,
        .25s backdrop-filter;
}


.site-header.scrolled
.nav-shell{
    background:
        rgba(
            7,
            17,
            31,
            .64
        );

    border-color:
        var(--line);

    backdrop-filter:
        blur(18px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%);

    box-shadow:
        0 12px 40px
        rgba(
            0,
            0,
            0,
            .16
        );
}


[data-theme="light"]
.site-header.scrolled
.nav-shell{
    background:
        rgba(
            246,
            250,
            255,
            .72
        );
}


/* =========================================================
   BRAND
========================================================= */

.brand{
    display:flex;

    align-items:center;

    gap:11px;

    font-weight:800;

    white-space:nowrap;

    flex:
        0 0 auto;
}


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

    flex:
        0 0 32px;

    border-radius:10px;

    background:
        linear-gradient(
            140deg,
            var(--accent),
            var(--accent-2)
        );

    position:relative;

    box-shadow:
        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .2
        ),

        0 8px 18px
        rgba(
            var(--accent-rgb),
            .2
        );
}


.brand-mark:before,
.brand-mark:after{
    content:"";

    position:absolute;

    top:9px;

    width:9px;
    height:14px;

    border-radius:
        8px 8px 2px 2px;

    background:
        #07111f;
}


.brand-mark:before{
    left:6px;

    transform:
        rotate(25deg);
}


.brand-mark:after{
    right:6px;

    transform:
        rotate(-25deg);
}


[data-theme="light"]
.brand-mark:before,

[data-theme="light"]
.brand-mark:after{
    background:
        #f5f8ff;
}


.brand-name{
    font-size:15px;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.nav-links{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:24px;

    margin-inline:auto;
}


.nav-links a{
    position:relative;

    padding:
        19px 0;

    color:
        var(--muted);

    font-size:13px;

    touch-action:
        manipulation;
}


.nav-links a:hover,
.nav-links a.active{
    color:
        var(--text);
}


.nav-links a.active:after{
    content:"";

    position:absolute;

    left:15%;
    right:15%;
    bottom:9px;

    height:2px;

    border-radius:2px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    box-shadow:
        0 0 10px
        rgba(
            var(--accent-rgb),
            .5
        );
}


/* =========================================================
   NAV TOOLS
========================================================= */

.nav-tools{
    display:flex;

    align-items:center;

    gap:7px;

    flex:
        0 0 auto;
}


.icon-btn,
.lang-btn,
.cv-btn,
.menu-btn{
    height:40px;

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

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

    border-radius:12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

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


.icon-btn:hover,
.lang-btn:hover,
.cv-btn:hover,
.menu-btn:hover{
    border-color:
        rgba(
            var(--accent-rgb),
            .45
        );

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

    transform:
        translateY(-1px);
}


/* =========================================================
   ICON BUTTON
========================================================= */

.icon-btn{
    position:relative;

    width:40px;

    flex:
        0 0 40px;
}


.icon-btn svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:
        currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;
}


/* =========================================================
   SEARCH
========================================================= */

.search-btn{
    width:auto;

    padding:
        0 10px;

    gap:8px;
}


.kbd-hint{
    padding:
        2px 5px;

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

    border-radius:6px;

    color:
        var(--muted);

    font-size:10px;
}


/* =========================================================
   SOUND
========================================================= */

.sound-icon{
    font-size:13px;

    letter-spacing:-2px;
}


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

.accent-dot{
    width:18px;
    height:18px;

    border-radius:50%;

    background:
        conic-gradient(
            var(--accent),
            var(--accent-2),
            #ff78a9,
            var(--accent)
        );

    box-shadow:
        0 0 0 2px
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* =========================================================
   LANGUAGE
========================================================= */

.lang-btn{
    padding:
        0 10px;

    gap:7px;

    font-size:12px;

    font-weight:800;

    white-space:nowrap;
}


.globe{
    font-size:18px;
}


/* =========================================================
   CV
========================================================= */

.cv-btn{
    padding:
        0 13px;

    font-size:12px;

    font-weight:800;

    white-space:nowrap;
}


/* =========================================================
   PLAY BUTTON — DESKTOP
========================================================= */

.play-link.active{
    border-color:
        rgba(
            var(--accent-rgb),
            .55
        );

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


.play-icon{
    width:20px !important;

    height:20px !important;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn{
    display:none;

    width:40px;

    flex:
        0 0 40px;

    font-size:18px;
}


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

.mobile-nav{
    position:fixed;

    top:78px;

    left:20px;
    right:20px;

    z-index:1002;

    display:none;

    padding:8px;

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

    border-radius:18px;

    background:
        var(--panel-strong);

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(20px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(140%);

    max-height:
        calc(
            100dvh - 100px
        );

    overflow-y:auto;

    overscroll-behavior:
        contain;

    /*
     * مهم لأن site-header
     * pointer-events:none.
     */
    pointer-events:auto;
}


.mobile-nav.open{
    display:grid;

    gap:4px;
}


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

.mobile-nav a{
    position:relative;

    display:grid;

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

    align-items:center;

    gap:10px;

    min-height:54px;

    padding:
        7px 10px;

    border:
        1px solid
        transparent;

    border-radius:13px;

    color:
        var(--text);

    font-size:14px;

    font-weight:650;

    line-height:1.35;

    cursor:pointer;

    pointer-events:auto;

    touch-action:
        manipulation;

    -webkit-tap-highlight-color:
        transparent;

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


.mobile-nav a:hover,
.mobile-nav a:focus-visible{
    background:
        rgba(
            var(--accent-rgb),
            .07
        );

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

    color:
        var(--text);
}


.mobile-nav a:active{
    transform:
        scale(.988);

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


/* =========================================================
   ACTIVE MOBILE LINK
========================================================= */

.mobile-nav a.active{
    background:
        linear-gradient(
            90deg,
            rgba(
                var(--accent-rgb),
                .13
            ),
            rgba(
                var(--accent-rgb),
                .045
            )
        );

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


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

.mobile-nav-icon{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

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

    border-radius:11px;

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

    color:
        var(--muted);

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


.mobile-nav-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:
        currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.mobile-nav a:hover
.mobile-nav-icon,

.mobile-nav a.active
.mobile-nav-icon{
    color:
        var(--text);

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

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


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

.mobile-play-link
.mobile-nav-icon.game{
    color:
        var(--accent-2);

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

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


.mobile-play-link{
    margin-top:3px;
}


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

.mobile-nav-label{
    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


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

.mobile-nav-arrow{
    display:flex;

    align-items:center;

    justify-content:center;

    color:
        var(--muted);

    font-size:23px;

    line-height:1;

    opacity:.65;

    transition:
        transform .18s ease,
        opacity .18s ease;
}


.mobile-nav a:hover
.mobile-nav-arrow{
    opacity:1;

    transform:
        translateX(2px);
}


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

html[dir="rtl"]
.mobile-nav{
    text-align:right;
}


html[dir="rtl"]
.mobile-nav-arrow{
    transform:
        scaleX(-1);
}


html[dir="rtl"]
.mobile-nav a:hover
.mobile-nav-arrow{
    transform:
        scaleX(-1)
        translateX(2px);
}


/* =========================================================
   LIGHT THEME
========================================================= */

[data-theme="light"]
.mobile-nav-icon{
    background:
        rgba(
            8,
            22,
            40,
            .025
        );
}


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

@media(hover:none){

    .icon-btn:hover,
    .lang-btn:hover,
    .cv-btn:hover,
    .menu-btn:hover{
        transform:none;
    }


    .mobile-nav a:hover{
        transform:none;
    }
}