/* 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}
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-this>a {background:#eef4fc}
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}}

/* Set both colors after the menu rules so legacy white text cannot survive hover. */
header .container>nav .layui-nav>.layui-nav-item>a:hover,
header .container>nav .layui-nav>.layui-nav-item>a:focus-visible {
    color:#246ac3!important;
    background:#e7f0ff!important;
}
body.night header .container>nav .layui-nav>.layui-nav-item>a:hover,
body.night header .container>nav .layui-nav>.layui-nav-item>a:focus-visible {
    color:#d9e9ff!important;
    background:#314d72!important;
}

/* Local SVG masks inherit each category color without font glyphs. */
:root{
    --xd-icon-calendar-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%203v4m10-4v4M3%2010h18m-13%205%203%203%205-5%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-chevron-up:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2015%207-7%207%207%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-close:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%206%2012%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-collections:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10a1%201%200%200%201%201%201v17l-6-4-6%204V4a1%201%200%200%201%201-1Z%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-computer-games:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2016v4M8%2020h8%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-game-box:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2013v6a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-6M12%203v11m-4-4%204%204%204-4%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-game-library:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%224.5%22%20height%3D%2216%22%20rx%3D%22.7%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%224%22%20width%3D%224.5%22%20height%3D%2216%22%20rx%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M3%208h4.5m1.5%200h4.5m6%201v7M16.5%2012.5h6%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-gamepad:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h8c2%200%203.5%201.4%204%203.5l1.2%207c.4%202-1.8%203-3.2%201.6L15%2015H9l-3%203.1c-1.4%201.4-3.6.4-3.2-1.6l1.2-7C4.5%207.4%206%206%208%206Z%22%2F%3E%3Cpath%20d%3D%22M7.5%209v5M5%2011.5h5%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2210%22%20r%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2212.5%22%20r%3D%22.6%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-help:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M9.5%209a2.5%202.5%200%200%201%205%20.2c0%201.9-2.5%202-2.5%203.8%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-logout:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204H5a1%201%200%200%200-1%201v14a1%201%200%200%200%201%201h4M9%2012h12m-4-4%204%204-4%204%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-menu:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-moon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2013A8.5%208.5%200%200%201%2011%203.5%208.5%208.5%200%201%200%2020.5%2013Z%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-ported-games:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203.5h16m-2.5-2L20%203.5l-2.5%202M20%2021H4m2.5-2L4%2021l2.5%202%22%2F%3E%3Cpath%20d%3D%22M8.2%207.5h7.6c2%200%203.3%201.3%203.8%203.1l1.1%204.4c.5%202-1.7%203.3-3.1%201.8L15.9%2015H8.1l-1.7%201.8c-1.4%201.5-3.6.2-3.1-1.8l1.1-4.4c.5-1.8%201.8-3.1%203.8-3.1Z%22%2F%3E%3Cpath%20d%3D%22M7.5%2010v4m-2-2h4%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2210.7%22%20r%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2213%22%20r%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-rankings:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%22.5%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2217%22%20rx%3D%22.5%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%229%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-search:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22m15.5%2015.5%205%205%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-sun:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2m0%2016v2M2%2012h2m16%200h2M4.9%204.9l1.4%201.4m11.4%2011.4%201.4%201.4M4.9%2019.1l1.4-1.4m11.4-11.4%201.4-1.4%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-ticket:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16a1%201%200%200%201%201%201v3a3%203%200%200%200%200%206v3a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1v-3a3%203%200%200%200%200-6V6a1%201%200%200%201%201-1Z%22%2F%3E%3Cpath%20d%3D%22M15%205v2m0%204v2m0%204v2%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-tools:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%203.5a5.7%205.7%200%200%200-7.1%207.1l-4%204a3%203%200%200%200%204.2%204.2l4-4a5.7%205.7%200%200%200%207.1-7.1l-3.1%203.1-3.2-3.2%203.1-3.1Z%22%2F%3E%3C%2Fsvg%3E");
    --xd-icon-user:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-1a8%208%200%200%201%2016%200v1%22%2F%3E%3C%2Fsvg%3E");
}
header nav .layui-nav-item>a[href$="/list/1/"]>i{--nav-icon:var(--xd-icon-computer-games)}
header nav .layui-nav-item>a[href$="/list/2/"]>i{--nav-icon:var(--xd-icon-ported-games)}
header nav .layui-nav-item>a[href$="/list/3/"]>i{--nav-icon:var(--xd-icon-tools)}
header nav .layui-nav-item>a[href$="/update/"]>i{--nav-icon:var(--xd-icon-rankings)}
header nav .layui-nav-item>a[href$="/help/"]>i{--nav-icon:var(--xd-icon-help)}
header nav .layui-nav-item>a[href$="/collection/"]>i{--nav-icon:var(--xd-icon-collections)}
header nav .layui-nav-item>a[href^="https://www.xdgamebox.com/"]>i{--nav-icon:var(--xd-icon-game-box)}
header nav .layui-nav-item>a[href^="https://www.xdgame.vip/"]>i{--nav-icon:var(--xd-icon-game-library)}

header .container>nav .layui-nav>.layui-nav-item>a>i {
    display:inline-block!important;
    height:16px;
    line-height:1;
}
header .container>nav .layui-nav>.layui-nav-item>a>i::before {
    content:""!important;
    display:block;
    width:16px;
    height:16px;
    background-color:currentColor;
    -webkit-mask-image:var(--nav-icon);
    mask-image:var(--nav-icon);
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
}
body.night header nav .layui-nav-item>a[href$="/list/1/"]>i{color:#c0c4cc}

/* Preserve the existing controls, their click targets and theme classes. */
header .search-toggle>i,
header .night-toggle>i.night,
header .container>.menu>i,
#header-user .user-entry>i,
#header-user .logined_btn a>i {
    display:inline-block;
    width:18px;
    height:18px;
    line-height:1;
}
header .search-toggle>i,
#search .site-search-input-icon,
#search .site-search-submit>i{--nav-icon:var(--xd-icon-search)}
header .night-toggle>i.night{--nav-icon:var(--xd-icon-moon)}
body.night header .night-toggle>i.night{--nav-icon:var(--xd-icon-sun)}
header .container>.menu>i{--nav-icon:var(--xd-icon-menu)}
#header-user .user-entry>i,
#header-user .user-open-ul b.icon-yonghu{--nav-icon:var(--xd-icon-user)}
#header-user .logined_btn a>i{--nav-icon:var(--xd-icon-logout)}
#header-user .user-open-ul b.fa-calendar-check-o{--nav-icon:var(--xd-icon-calendar-check)}
#header-user .user-open-ul b.icon-shoucang1{--nav-icon:var(--xd-icon-collections)}
#header-user .user-open-ul b.fa-ticket{--nav-icon:var(--xd-icon-ticket)}
#search .closesearch{--nav-icon:var(--xd-icon-close)}
#search .site-search-game-icon>i{--nav-icon:var(--xd-icon-gamepad)}
.backtop.fa{--nav-icon:var(--xd-icon-chevron-up)}
header .search-toggle>i::before,
header .night-toggle>i.night::before,
header .container>.menu>i::before,
#header-user .user-entry>i::before,
#header-user .logined_btn a>i::before,
#header-user .user-open-ul b::before,
#search .closesearch::before,
#search .site-search-game-icon>i::before,
#search .site-search-input-icon::before,
#search .site-search-submit>i::before,
.backtop.fa::before {
    content:""!important;
    display:block;
    width:18px;
    height:18px;
    background-color:currentColor;
    -webkit-mask-image:var(--nav-icon);
    mask-image:var(--nav-icon);
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
}
#header-user .user-open-ul b::before{width:16px;height:16px}
.backtop.fa::before{position:absolute;top:calc(50% - 9px);left:calc(50% - 9px)}

/* Remaining content glyphs use the complete matching local iconfont. */
@font-face {
    font-family:iconfont;
    src:url('/static/fonts/home_iconfont.1db415aef885.woff2') format('woff2');
    font-style:normal;
    font-weight:normal;
}
