/* Keep each existing category's original color when navigation items are inserted. */
header nav .layui-nav-item>a[href$="/list/1/"]>i{color:#000}
/* Cross-platform transfer, in rose, with a lighter shade on dark backgrounds. */
header nav .layui-nav-item>a[href$="/list/2/"]>i{color:#db2777}
header nav .layui-nav-item>a[href$="/list/2/"]>i::before{content:"\f0ec"}
body.night header nav .layui-nav-item>a[href$="/list/2/"]>i{color:#f472b6}
header nav .layui-nav-item>a[href$="/list/3/"]>i{color:#00a115}
header nav .layui-nav-item>a[href$="/update/"]>i{color:#44a5ff}
header nav .layui-nav-item>a[href$="/help/"]>i{color:#f00}
header nav .layui-nav-item>a[href$="/collection/"]>i{color:#ff9800}
header nav .layui-nav-item>a[href^="https://www.xdgamebox.com/"]>i{color:#7c28e7}
header nav .layui-nav-item>a[href^="https://www.xdgame.vip/"]>i{color:#134dd5}

/* Give the logo, navigation and action buttons their own space. */
header .container>nav .layui-nav>.layui-nav-item>a,
html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
    font-size:15px!important;
    font-weight:500;
}
@media(min-width:1321px){
    header .container>nav,
    html[data-site-language=en] header .container>nav {
        padding:0!important;
        margin-left:32px;
        margin-right:auto;
        flex:0 0 auto;
    }
    header .container>nav>.layui-nav {
        display:flex!important;
        align-items:center;
        padding:0!important;
        white-space:nowrap;
    }
    header .container>nav .layui-nav>.layui-nav-item {
        flex:0 0 auto;
        margin:0;
    }
    header .container>nav .layui-nav>.layui-nav-item>a,
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
        padding-left:10px!important;
        padding-right:10px!important;
    }
    header .container>.night-open {margin-left:20px}
    header.su .logo {padding-top:6px;padding-bottom:6px}
}
@media(min-width:1600px){
    header .container>nav,
    html[data-site-language=en] header .container>nav {margin-left:40px}
    header .container>nav .layui-nav>.layui-nav-item>a,
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
        padding-left:12px!important;
        padding-right:12px!important;
    }
}
/* Fold the menu while there is still room for readable labels and the logo. */
@media(max-width:1320px){
    header .container {width:calc(100% - 32px)}
    header .container>.logo {margin-right:auto}
    header .container>.menu {
        display:block;
        width:34px;
        line-height:70px;
        text-align:center;
    }
    header.su .container>.menu {line-height:50px}
    header .container>nav,
    html[data-site-language=en] header .container>nav {
        position:absolute;
        left:0;
        top:71px;
        width:100%;
        padding:0!important;
        margin:0;
        background:#fff;
        box-shadow:0 4px 10px #15202b18;
        max-height:calc(100vh - 71px);
        overflow:auto;
    }
    header.su .container>nav {top:51px;max-height:calc(100vh - 51px)}
    header .container>nav>.layui-nav {display:none!important;padding:12px!important}
    header .container:has(>.menu.xz)>nav>.layui-nav {display:block!important;height:auto!important;overflow:visible!important}
    header .container>nav .layui-nav>.layui-nav-item {line-height:40px!important}
    header .container>nav .layui-nav>.layui-nav-item>a,
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
        padding-left:16px!important;
        padding-right:16px!important;
    }
    body.night header .container>nav {background:#29323e}
}
@media(max-width:800px){
    header .container {width:95%}
}
@media(min-width:1600px){
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {padding-left:8px!important;padding-right:8px!important}
}
@media(min-width:1321px) and (max-width:1599px){
    html[data-site-language=en] header .container {width:calc(100% - 32px)}
    html[data-site-language=en] header .container>.logo {margin-right:auto}
    html[data-site-language=en] header .container>.menu {
        display:block;
        width:34px;
        line-height:70px;
        text-align:center;
    }
    html[data-site-language=en] header.su .container>.menu {line-height:50px}
    html[data-site-language=en] header .container>nav {
        position:absolute;
        left:0;
        top:71px;
        width:100%;
        padding:0!important;
        margin:0;
        background:#fff;
        box-shadow:0 4px 10px #15202b18;
        max-height:calc(100vh - 71px);
        overflow:auto;
    }
    html[data-site-language=en] header.su .container>nav {top:51px;max-height:calc(100vh - 51px)}
    html[data-site-language=en] header .container>nav>.layui-nav {display:none!important;padding:12px!important}
    html[data-site-language=en] header .container:has(>.menu.xz)>nav>.layui-nav {display:block!important;height:auto!important;overflow:visible!important}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item {line-height:40px!important}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
        padding-left:16px!important;
        padding-right:16px!important;
    }
    html[data-site-language=en] body.night header .container>nav {background:#29323e}
}