/* 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}

/* Readable labels with a consistent icon and text baseline. */
header .container>nav .layui-nav>.layui-nav-item>a,
html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:38px;
    line-height:38px!important;
    border-radius:8px;
    font-size:15px!important;
    font-weight:500;
    white-space:nowrap;
    transition:color .18s,background-color .18s;
}
header .container>nav .layui-nav>.layui-nav-item>a>i {
    flex:0 0 16px;
    width:16px;
    margin:0;
    font-size:15px;
    text-align:center;
}
header .container>nav .layui-nav>.layui-nav-item>a:hover,
header .container>nav .layui-nav>.layui-this>a {background:#eef4fc}
body.night header .container>nav .layui-nav>.layui-nav-item>a:hover,
body.night header .container>nav .layui-nav>.layui-this>a {background:#283443}
header .container>nav .layui-nav>.layui-nav-item>a:focus-visible {outline:2px solid #7aa5e6;outline-offset:2px}
header .container>nav .layui-nav>.layui-nav-item::after {display:none}
@media(min-width:1366px){
    header .container {width:calc(100% - 64px);max-width:1440px}
    header .container>nav,
    html[data-site-language=en] header .container>nav {padding:0!important;margin-left:36px;margin-right:auto;flex:0 0 auto}
    header .container>nav>.layui-nav {display:flex!important;align-items:center;gap:2px;padding:0!important;white-space:nowrap}
    header .container>nav .layui-nav>.layui-nav-item {display:flex;align-items:center;height:70px;line-height:70px!important;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:26px}
    header .container>.night-open::before {content:"";position:absolute;left:-14px;top:calc(50% - 9px);width:1px;height:18px;background:#dce2e9}
    body.night header .container>.night-open::before {background:#3b424c}
    header.su .logo {padding-top:6px;padding-bottom:6px}
    header.su .container>nav .layui-nav>.layui-nav-item {height:50px;line-height:50px!important}
    header.su .container>nav .layui-nav>.layui-nav-item>a {height:34px;line-height:34px!important}
}
@media(min-width:1440px){
    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 {font-size:16px!important}
}
@media(min-width:1600px){
    header .container>nav,
    html[data-site-language=en] header .container>nav {margin-left:48px}
    header .container>nav .layui-nav>.layui-nav-item>a {padding-left:12px!important;padding-right:12px!important}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {font-size:15px!important;padding-left:8px!important;padding-right:8px!important}
}
/* Preserve the logo and readable type before the desktop row becomes crowded. */
@media(max-width:1365px){
    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 6px 14px #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:14px!important;max-width:760px;margin:auto}
    header .container:has(>.menu.xz)>nav>.layui-nav {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:auto!important;overflow:visible!important}
    header .container>nav .layui-nav>.layui-nav-item {height:auto;margin:0;line-height:42px!important;background:transparent;border-radius:8px}
    header .container>nav .layui-nav>.layui-nav-item>a,
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {display:flex;width:100%;box-sizing:border-box;height:42px;line-height:42px!important;padding:0 12px!important;background:#f4f6f9}
    header .container>nav .layui-nav>.layui-this {background:transparent!important}
    header .container>nav .layui-nav>.layui-this>a {background:#e7f0ff!important;color:#246ac3!important}
    body.night header .container>nav {background:#252c36}
    body.night header .container>nav .layui-nav>.layui-nav-item>a {background:#303946}
    body.night header .container>nav .layui-nav>.layui-this>a {background:#314d72!important;color:#d9e9ff!important}
}
@media(max-width:800px){
    header .container {width:95%}
    header .container:has(>.menu.xz)>nav>.layui-nav {grid-template-columns:repeat(2,minmax(0,1fr))}
    header .container>nav .layui-nav>.layui-nav-item:first-child {grid-column:1/-1}
}
@media(min-width:1366px) 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 6px 14px #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:14px!important;max-width:960px;margin:auto}
    html[data-site-language=en] header .container:has(>.menu.xz)>nav>.layui-nav {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:auto!important;overflow:visible!important}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item {height:auto;margin:0;line-height:42px!important;background:transparent;border-radius:8px}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-nav-item>a {display:flex;width:100%;box-sizing:border-box;height:42px;line-height:42px!important;padding:0 12px!important;background:#f4f6f9}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-this {background:transparent!important}
    html[data-site-language=en] header .container>nav .layui-nav>.layui-this>a {background:#e7f0ff!important;color:#246ac3!important}
    html[data-site-language=en] body.night header .container>nav {background:#252c36}
    html[data-site-language=en] body.night header .container>nav .layui-nav>.layui-nav-item>a {background:#303946}
    html[data-site-language=en] body.night header .container>nav .layui-nav>.layui-this>a {background:#314d72!important;color:#d9e9ff!important}
    html[data-site-language=en] header .container>.night-open::before {display:none}
}
@media(prefers-reduced-motion:reduce){header .container>nav .layui-nav>.layui-nav-item>a {transition:none}}