:root{--container-width:1500px;--radius-tag:7px;--radius-card:12px;--radius-panel:16px;}
:root[data-theme="dark"]{
--page-outer:#070b10;--page-bg:#0b1118;--card-bg:#131c28;--card-border:rgba(120,160,200,.10);--tag-bg:rgba(58,167,242,.10);--tag-text:#9dcdf1;
--bg-page:var(--page-bg);--bg-header:#0a1018;--bg-card:var(--card-bg);--bg-card-strong:#0f1722;--bg-soft:#111a24;--bg-input:#111a24;--bg-hover:#162131;
--text-primary:#eaf2fb;--text-secondary:#a9b8c9;--text-muted:#7e8ea3;--text-disabled:#59687a;
--accent:#3aa7f2;--accent-hover:#2197dd;--accent-soft:rgba(58,167,242,.10);--accent-border:rgba(58,167,242,.20);
--hero-title:#f2f7fd;--hero-description:#a9b8c9;--hero-category:#9dcdf1;--hero-english:#7e8ea3;--hero-label:#d9edfc;--hero-link:#ffffff;
--border-light:rgba(120,160,200,.08);--border-normal:rgba(120,160,200,.10);--border-hover:rgba(58,167,242,.24);
--shadow-sm:0 5px 14px rgba(0,0,0,.16);--shadow-md:0 8px 20px rgba(0,0,0,.20);--shadow-lg:0 12px 28px rgba(0,0,0,.28);--shadow-small:var(--shadow-sm);--shadow-large:var(--shadow-lg);
}:root[data-theme="light"]{
--page-bg-top:#f7f9fb;--page-bg-middle:#f5f8fb;--page-bg-bottom:#f4f7fa;--page-bg:#f5f8fb;
--card-bg:#ffffff;--card-border:rgba(30,50,70,.06);--tag-bg:#f1f5f8;--tag-text:#66778a;
--bg-page:var(--page-bg);--bg-header:#ffffff;--bg-card:var(--card-bg);--bg-card-strong:var(--card-bg);--bg-soft:var(--tag-bg);--bg-input:#f1f5f8;--bg-hover:#edf4f8;
--text-primary:#172536;--text-secondary:#5f7185;--text-muted:#8a99aa;--text-disabled:#aeb8c1;
--accent:#2197dd;--accent-hover:#1788cd;--accent-soft:#eaf5fc;--accent-border:rgba(33,151,221,.22);
--hero-title:#102a43;--hero-description:#52667a;--hero-category:#66829b;--hero-english:#7f91a5;--hero-label:#193a57;--hero-link:#1788cd;
--border-light:rgba(30,50,70,.06);--border-normal:rgba(30,50,70,.10);--border-hover:var(--accent-border);
--shadow-sm:0 3px 10px rgba(30,50,70,.05);--shadow-md:0 6px 18px rgba(30,50,70,.06);--shadow-lg:0 10px 28px rgba(30,50,70,.08);--shadow-small:var(--shadow-sm);--shadow-large:var(--shadow-lg);
}
*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

background:var(--bg-page,#101010);

color:var(--text-primary,#fff);

font-family:

"Microsoft YaHei",
Arial,
sans-serif;

}





/* ======================
椤堕儴瀵艰埅
====================== */


.navbar{

height:75px;

background:#171717;

position:sticky;

top:0;

z-index:100;

}




.nav-inner{


width:var(--container-width);

max-width:calc(100% - 80px);

height:75px;

margin:auto;


display:flex;

align-items:center;


}





.logo{

    width:172px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    text-align:left;

    gap:0;

    line-height:1;

}


.logo-text{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:max-content;

}


.logo-title{

    font-size:24px;

    font-weight:800;

    color:#66c0f4;

    letter-spacing:.5px;

    text-shadow:0 0 14px rgba(102,192,244,.22);

    white-space:nowrap;

}


.logo small{

    display:block;

    margin-top:7px;

    font-size:12px;

    font-weight:800;

    line-height:1;

    letter-spacing:2.7px;

    color:#f4f8ff;

    text-align:center;

    white-space:nowrap;

    transform:none;

}





nav{


display:flex;


gap:28px;


align-items:center;


flex:1;


}



nav a{


color:#ddd;


text-decoration:none;


font-size:16px;


white-space:nowrap;

position:relative;

padding:8px 9px;

border-radius:8px;


}



nav a:hover{


color:#fff;


}





.search-box{

position:relative;

margin-right:clamp(20px,4vw,64px);

}



.search-box input{


width:330px;


background:#292929;


border:1px solid rgba(255,255,255,.14);


outline:none;


padding:12px 18px 12px 42px;


border-radius:25px;


color:white;


}



.search-box input:hover{
border-color:rgba(255,255,255,.22);
}

.search-box .header-search-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
width:17px;
height:17px;
fill:none;
stroke:#a4a8ac;
stroke-width:1.6;
pointer-events:none;
}

.search-box input:focus,
.library-page .search-box input:focus-visible{

background:#292929;

border-color:rgba(102,192,244,.38);

box-shadow:none;
outline:none;

}



.search-box input::placeholder{

color:#8f98a3;

}



.search-results{

display:none;

position:absolute;

top:calc(100% + 10px);

right:0;

width:390px;

max-height:360px;

overflow:auto;

background:#171717;

border:1px solid #2d3338;

border-radius:10px;

box-shadow:0 18px 45px rgba(0,0,0,.42);

z-index:30;

}









/* ======================
绮鹃€夋帹鑽?
====================== */


.featured{

    width:var(--container-width);

    max-width:calc(100% - 80px);

    min-height:0;

    aspect-ratio:5.09 / 1;

    margin:30px auto 34px;

    background:#181b1e;

    border-radius:16px;

    overflow:hidden;

    display:grid;

    grid-template-columns:42% 58%;

    position:relative;

    border:0;

    box-shadow:0 18px 42px rgba(0,0,0,.16);

}





.featured-cover{


width:auto;

height:100%;

overflow:hidden;

position:relative;

background-color:#11161b;

border-right:0;


}

.featured-cover img{


width:100%;


height:100%;


object-fit:contain;

position:relative;

z-index:1;

object-position:center;

background:transparent;


}





.featured-content{


width:auto;


padding:22px 260px 30px 48px;


display:flex;


flex-direction:column;


justify-content:center;

position:relative;

background:linear-gradient(90deg,#191c1f 0%,#181b1e 72%,#171a1d 100%);


}

.featured-thumbnails{

width:205px;

height:auto;

position:absolute;

right:28px;

top:10px;

bottom:10px;

overflow:hidden;

-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);

mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);

z-index:2;

}

.featured-thumb-track{

display:flex;

flex-direction:column;

gap:12px;

transition:transform .35s ease;

}

.featured-thumb-track.is-short{

height:100%;

justify-content:center;

}

.featured-thumb{

display:block;

width:205px;

height:82px;

flex:0 0 auto;

overflow:hidden;

padding:0;

border:0;

border-radius:12px;

background:#20262b;

opacity:.78;

cursor:pointer;

transition:opacity .35s ease,border-color .2s ease,box-shadow .2s ease;

}

.featured-thumb:hover{

opacity:.9;

}

.featured-thumb.active{

box-shadow:0 6px 16px rgba(30,55,75,.10);

opacity:1;

position:relative;

}

.featured-thumb-timer{

position:absolute;

left:10px;

right:10px;

bottom:6px;

height:2px;

overflow:hidden;

border-radius:999px;

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

pointer-events:none;

}

.featured-thumb-timer-progress{

display:block;

width:0;

height:100%;

border-radius:inherit;

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

box-shadow:0 0 4px rgba(0,0,0,.16);

pointer-events:none;

animation:featuredThumbTimer var(--featured-rotation-duration,60s) linear forwards;

}

@keyframes featuredThumbTimer{

from{width:var(--featured-timer-start,0%)}

to{width:100%}

}

.featured-thumb.is-previous,
.featured-thumb.is-after{

opacity:1;

}

.featured-thumb img{

display:block;

width:100%;

height:100%;

object-fit:cover;

background:#11161b;

}

.featured-tag{


width:max-content;

max-width:530px;

padding:5px 10px;

border:1px solid rgba(33,157,230,.14);

border-radius:999px;

background:rgba(33,157,230,.08);

font-size:12px;

line-height:1.2;

color:#8fc9ea;


font-weight:600;


margin-bottom:0;


}



.featured-content h1{

width:100%;

max-width:530px;


font-size:clamp(25px,2vw,30px);

font-weight:700;

letter-spacing:-.3px;


margin-top:12px;

margin-bottom:0;


}

.featured-english-title{

width:100%;

max-width:530px;

margin-top:5px;

font-size:11px;

font-weight:500;

line-height:1.3;

letter-spacing:1.6px;

color:#9aa8b6;

text-transform:uppercase;

}

.featured-english-title[hidden]{

display:none;

}

.featured-categories{

width:100%;

max-width:500px;

margin-top:10px;

display:flex;

align-items:center;

gap:6px;

overflow:hidden;

white-space:nowrap;

font-size:11px;

font-weight:500;

line-height:1.4;

color:#8191a2;

}

.featured-categories span{

display:inline-flex;

align-items:center;

min-width:0;

max-width:110px;

padding:3px 8px;

border:1px solid rgba(102,130,155,.16);

border-radius:999px;

background:rgba(102,130,155,.09);

color:inherit;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

line-height:1.2;

}

.featured-categories[hidden]{

display:none;

}




.featured-content p{


font-size:14px;

font-weight:400;


color:#ccc;


line-height:1.8;

width:100%;

max-width:450px;

margin-top:11px;


}


.featured-actions{

    margin-top:14px;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:26px;

    width:100%;

    max-width:450px;

}




.featured-content button{


margin-top:0;


width:auto;

height:40px;


padding:0 20px;


border:1px solid rgba(31,151,224,.16);


border-radius:10px;

background:#eef7fd;

color:#168fd4;

box-shadow:0 5px 14px rgba(34,91,130,.07);


cursor:pointer;

font-weight:600;

transition:color .18s ease,transform .18s ease,box-shadow .18s ease;


}

.featured-content button::after{
content:"→";
}

.featured-content button:hover{

color:#168fd4;

transform:translateY(-1px);

background:#e7f4fc;

box-shadow:0 7px 16px rgba(34,91,130,.10);

}

.featured-cover img,
.featured-content > *,
.featured-thumbnails{

transition:opacity .28s ease;

}

.featured.is-changing .featured-cover img,
.featured.is-changing .featured-content > *,
.featured.is-changing .featured-thumbnails{

opacity:0;

}









/* ======================
涓讳綋
====================== */


.content-layout{


width:var(--container-width);


max-width:calc(100% - 80px);


margin:auto;


display:flex;


gap:24px;


}




.game-area{


width:1170px;


}




.section-title h2{


font-size:23px;


line-height:1.2;


margin-bottom:18px;


}







/* 娓告垙鍗＄墖 */




.home-page .game-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:18px;


}





/* ======================
鍒嗛〉
====================== */


.pagination{


margin:34px 0;


display:flex;


justify-content:center;


gap:12px;


}





.pagination button{


padding:9px 16px;


background:#222;


border:none;


color:white;


border-radius:6px;


}



.pagination .active{


background:#66c0f4;


color:#111;


}









/* ======================
鍙充晶鏍?
====================== */



.sidebar{


width:300px;


flex-shrink:0;


}


.sidebar-section-title{

font-size:23px;

line-height:1.2;

margin-bottom:18px;

white-space:nowrap;

}




.ranking-box,
.category-box{


background:#181818;


border-radius:14px;


padding:20px;


margin-bottom:25px;


}





.ranking-title{


display:flex;


align-items:center;


justify-content:center;


white-space:nowrap;


margin-bottom:18px;


}





.ranking-title h2{


font-size:20px;


white-space:nowrap;


}





.rank-tabs{


display:flex;


gap:6px;


justify-content:center;


width:100%;


}





.rank-tabs span{


padding:6px 9px;


background:#333;


border-radius:5px;


font-size:13px;


white-space:nowrap;


}





.rank-tabs .active{


background:#66c0f4;


color:#111;


}






.rank-item{


height:42px;


display:flex;


align-items:center;


border-bottom:1px solid #303030;


font-size:14px;


}





.rank-item b{


color:#66c0f4;


width:35px;


}





.rank-item:last-child{


border-bottom:none;


}





.more-link{


display:block;


text-align:center;


margin-top:18px;


color:#66c0f4;


text-decoration:none;


font-size:14px;


}









/* ======================
鐑棬鍒嗙被
====================== */


.category-box h2{


font-size:20px;


margin-bottom:18px;


}





.category-grid{


display:flex;


flex-wrap:wrap;


gap:10px;


}




.category-grid > a{
display:flex;
color:inherit;
text-decoration:none;
}

.category-grid span{


background:#333;


padding:8px 16px;


border-radius:18px;


font-size:13px;


white-space:nowrap;


}









/* ======================
搴曢儴
====================== */


footer{


margin-top:60px;


background:#080808;


padding:35px;


text-align:center;


color:#777;


}
/* ======================
绮鹃€夋帹鑽愯疆鎾渾鐐?
====================== */

#recommendDesc{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

/* Shared header controls and day mode */
.logo{text-decoration:none;color:inherit}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.header-actions .search-box{margin-right:0}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border:1px solid #343a40;border-radius:50%;background:#232629;color:#e8edf2;font:20px/1 inherit;cursor:pointer;transition:.2s ease}
.theme-toggle:hover{border-color:#66c0f4;color:#66c0f4;transform:translateY(-1px)}
.navbar nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.navbar nav a[aria-current="page"]::after{content:"";position:absolute;left:25%;right:25%;bottom:1px;height:2px;border-radius:2px;background:var(--accent)}

html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{background:linear-gradient(180deg,var(--page-bg-top) 0%,var(--page-bg-middle) 35%,var(--page-bg-bottom) 100%);background-attachment:fixed;color:var(--text-primary)}
html[data-theme="light"] .navbar{background:rgba(243,246,248,.96);border-bottom:1px solid rgba(120,140,160,.10);box-shadow:0 3px 14px rgba(45,65,85,.06);backdrop-filter:blur(12px)}
html[data-theme="light"] .logo small{color:var(--text-secondary)}
html[data-theme="light"] .navbar nav a{color:#26374a}
html[data-theme="light"] .navbar nav a:hover{color:var(--accent);background:var(--accent-soft)}
html[data-theme="light"] .search-box input{background:var(--bg-input);border-color:var(--border-normal);color:var(--text-primary)}
html[data-theme="light"] .search-box input:hover{border-color:rgba(35,60,90,.16)}
html[data-theme="light"] .search-box input:focus{background:var(--bg-input);border-color:var(--accent-border);outline:1px solid rgba(32,153,224,.08)}
html[data-theme="light"] .search-box input::placeholder{color:#8b9aaf}
html[data-theme="light"] .search-box .header-search-icon{stroke:#7f91a4}
html[data-theme="light"] .search-results{background:var(--bg-card);border-color:var(--border-normal);box-shadow:var(--shadow-large)}
html[data-theme="light"] .theme-toggle{background:#e6edf2;border-color:var(--border-normal);color:var(--accent)}
html[data-theme="light"] .featured{background:var(--card-bg);border-color:var(--card-border);box-shadow:var(--shadow-large)}
html[data-theme="light"] .featured-cover{border-color:var(--border-light);background-color:var(--tag-bg)}
html[data-theme="light"] .featured-content{background:linear-gradient(90deg,rgba(250,251,252,.94),rgba(250,251,252,.82))}
html[data-theme="light"] .featured-thumbnails{background:transparent}
html[data-theme="light"] .featured-thumb{background:var(--tag-bg)}
html[data-theme="light"] .featured-thumb.active{box-shadow:0 6px 16px rgba(30,75,110,.10)}
html[data-theme="light"] .featured-thumb img{background:var(--tag-bg)}
html[data-theme="light"] .featured-tag{background:rgba(33,157,230,.08);border-color:rgba(33,157,230,.14);color:var(--hero-label)}
html[data-theme="light"] .featured-content h1{color:var(--hero-title)}
html[data-theme="light"] .featured-english-title{color:var(--hero-english)}
html[data-theme="light"] .featured-categories{color:var(--hero-category)}
html[data-theme="light"] .featured-content p{color:var(--hero-description)}
html[data-theme="light"] .featured-content button{background:#eef7fd;color:var(--hero-link);border-color:rgba(31,151,224,.16);box-shadow:0 5px 14px rgba(34,91,130,.07)}
html[data-theme="light"] .featured-content button:hover{transform:translateY(-1px);background:#e7f4fc;color:#0878b5;box-shadow:0 7px 16px rgba(34,91,130,.10)}
html[data-theme="light"] .section-title h2,html[data-theme="light"] .sidebar-section-title,html[data-theme="light"] .category-box h2{color:#1a2738}
html[data-theme="light"] .ranking-box,html[data-theme="light"] .category-box{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-small)}
html[data-theme="light"] .rank-tabs span{background:var(--bg-input);color:var(--text-muted)}
html[data-theme="light"] .rank-tabs .active{background:var(--accent);color:#fff}
html[data-theme="light"] .rank-item{border-color:var(--border-light);color:var(--text-primary)}
html[data-theme="light"] .rank-item b{color:#6f91aa}
html[data-theme="light"] .rank-item:nth-child(1) b{color:var(--accent)}
html[data-theme="light"] .rank-item:nth-child(2) b{color:#7f91a4}
html[data-theme="light"] .rank-item:nth-child(3) b{color:#c7955f}
html[data-theme="light"] .more-link{color:var(--accent)}
html[data-theme="light"] .category-grid span{background:var(--tag-bg);color:var(--tag-text)}
html[data-theme="light"] .pagination button{background:#e8eef3;color:var(--text-secondary)}
html[data-theme="light"] .pagination button:hover{background:var(--accent-soft)}
html[data-theme="light"] .pagination .active{background:var(--accent);color:#fff}
html[data-theme="light"] footer{background:transparent;color:var(--text-muted)}

/* Homepage discovery sidebar */
.home-page .game-area{width:auto;min-width:0;flex:1}
.home-page .sidebar{width:350px}
.home-page .sidebar-random{margin-top:46px}
.sidebar-random,.ranking-box{border:1px solid rgba(255,255,255,.065)}
.sidebar-random{margin-bottom:18px;padding:16px;border-radius:14px;background:#181818}
.sidebar-random-heading,.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-random-heading h2,.ranking-heading h2{font-size:18px;line-height:1.25;white-space:nowrap}
.sidebar-random-heading p,.ranking-heading p{margin-top:4px;color:#7f8992;font-size:11px;white-space:nowrap}
.sidebar-random-heading>button{padding:6px 10px;border:1px solid #384149;border-radius:7px;background:#24292d;color:#aeb8c1;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.sidebar-random-heading>button:hover{border-color:#66c0f4;color:#8bd1f8}
.sidebar-random-heading>button:disabled{opacity:.5;cursor:wait}
.sidebar-random-result{min-height:64px;margin-top:13px;border-radius:9px;background:#202428;color:#89949e;font-size:12px}
.sidebar-random-result.loading{display:grid;place-items:center}
.sidebar-random-result a{display:grid;grid-template-columns:90px minmax(0,1fr) 14px;align-items:center;gap:11px;min-height:64px;padding:7px;color:inherit;text-decoration:none}
.sidebar-random-result img{display:block;width:90px;aspect-ratio:460/215;object-fit:contain;border-radius:6px;background:#101316}
.sidebar-random-result span{display:grid;min-width:0;gap:5px}.sidebar-random-result strong{overflow:hidden;color:#e9eef2;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.sidebar-random-result small{color:#85919b;font-size:11px}.sidebar-random-result i{color:#6f7e89;font-size:22px;font-style:normal}
.ranking-box{padding:16px 16px 13px}
.ranking-heading{margin-bottom:10px}
.ranking-heading-copy{min-width:0}
.ranking-heading .rank-tabs{width:auto;flex:0 0 auto;gap:4px}
.ranking-heading .rank-tabs span{display:grid;place-items:center;min-width:30px;height:30px;padding:0;border-radius:7px;cursor:pointer}
.rank-item{height:52px;gap:9px;color:#cbd3da;text-decoration:none;transition:background .16s ease}
.rank-item:hover{background:rgba(255,255,255,.035)}
.rank-item b{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:7px;background:#23292e;color:#90a2af;font-size:12px;font-variant-numeric:tabular-nums}
.rank-item:nth-child(1) b{background:#59441c;color:#ffd269}.rank-item:nth-child(2) b{background:#313a42;color:#cad7e0}.rank-item:nth-child(3) b{background:#4b3527;color:#e9ad78}
.rank-item img{width:46px;aspect-ratio:460/215;flex:0 0 46px;object-fit:contain;border-radius:5px;background:#101316}
.rank-item span{min-width:0;flex:1;overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.rank-item i{color:#65737e;font-size:20px;font-style:normal}
html[data-theme="light"] .sidebar-random,html[data-theme="light"] .ranking-box{background:var(--card-bg);border-color:var(--card-border);box-shadow:var(--shadow-small)}
html[data-theme="light"] .sidebar-random-result{background:var(--bg-soft)}
html[data-theme="light"] .sidebar-random-result img,html[data-theme="light"] .rank-item img{background:#dbe2e7}
html[data-theme="light"] .sidebar-random-result strong{color:var(--text-primary)}
html[data-theme="light"] .sidebar-random-heading p,html[data-theme="light"] .ranking-heading p,html[data-theme="light"] .sidebar-random-result small{color:var(--text-muted)}
html[data-theme="light"] .sidebar-random-heading>button{background:var(--bg-input);border-color:var(--border-normal);color:var(--text-secondary)}
html[data-theme="light"] .rank-item:hover{background:rgba(31,62,85,.035)}
html[data-theme="light"] .rank-item b{background:#e4e9ed;color:#667b8d}
html[data-theme="light"] .rank-item:nth-child(1) b{background:#fff0c6;color:#c1831c}html[data-theme="light"] .rank-item:nth-child(2) b{background:#e0e7ec;color:#6e8293}html[data-theme="light"] .rank-item:nth-child(3) b{background:#f6dfcf;color:#b57645}

.storage-icon{width:14px;height:14px;flex:0 0 14px;fill:currentColor;stroke:none;opacity:.72}

@media(max-width:980px){.featured{grid-template-columns:42% 58%}.featured-content{padding:28px 25px}.featured-tag{font-size:12px}.featured-content h1{font-size:25px}.featured-thumbnails{display:none}}
@media(max-width:1080px){.home-page .content-layout{display:grid}.home-page .sidebar{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-page .sidebar-random,.home-page .ranking-box,.home-page .category-box{margin-bottom:0}.home-page .sidebar-random{grid-column:1;margin-top:0}.home-page .ranking-box{grid-column:2;grid-row:1/span 2}.home-page .category-box{grid-column:1}.home-page .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.home-page .sidebar{display:block}.home-page .sidebar-random,.home-page .ranking-box,.home-page .category-box{margin-bottom:18px}.home-page .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.featured{display:block;max-width:calc(100% - 28px);aspect-ratio:auto}.featured-cover{width:100%;height:auto;aspect-ratio:460/215}.featured-content{width:100%;min-height:220px;padding:26px}.featured-content h1{font-size:28px}.featured-thumbnails{display:none}.content-layout{max-width:calc(100% - 28px)}}


@media(max-width:1320px){
    .nav-inner{max-width:calc(100% - 48px)}
    .navbar nav{gap:16px}
    .navbar nav a{font-size:14px}
    .search-box input{width:240px}
}
@media(max-width:980px){
    .navbar{height:auto;position:relative}
    .nav-inner{height:auto;min-height:75px;flex-wrap:wrap;gap:14px;padding:14px 0}
    .navbar nav{order:3;flex-basis:100%;overflow-x:auto;padding-bottom:3px}
    .header-actions{flex:1;justify-content:flex-end}
}
@media(max-width:620px){
    .nav-inner{max-width:calc(100% - 28px)}
    .logo{width:auto}.logo-title{font-size:20px}.logo small{font-size:10px}
    .header-actions .search-box{display:none}
    .navbar nav{gap:15px}.navbar nav a{font-size:13px}
}

/* Keep the featured information readable as the desktop viewport narrows. */
@media (max-width:1500px) and (min-width:1181px){
    .featured-content{padding:14px 250px 16px 40px}
    .featured-tag{padding:4px 9px}
    .featured-content h1{margin-top:8px;font-size:clamp(24px,2vw,28px)}
    .featured-english-title{margin-top:2px}
    .featured-categories{margin-top:6px}
    .featured-categories span{padding:2px 7px}
    .featured-content p{margin-top:7px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .featured-actions{margin-top:9px}
    .featured-content button{height:36px}
}
@media (max-width:1180px) and (min-width:701px){
    .featured{aspect-ratio:auto;min-height:260px}
    .featured-content{padding:20px 34px}
    .featured-thumbnails{display:none}
    .featured-content h1{margin-top:8px;font-size:25px}
    .featured-english-title{margin-top:3px}
    .featured-categories{margin-top:7px}
    .featured-content p{margin-top:8px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .featured-actions{margin-top:10px}
    .featured-content button{height:38px}
}
/* Balanced editorial layout for the featured information area. */
.featured-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:22px 250px 24px 50px;
    background:
        radial-gradient(circle at 30% 50%,rgba(53,158,220,.055) 0,rgba(53,158,220,.02) 38%,transparent 68%),
        linear-gradient(90deg,#191c1f 0%,#181b1e 72%,#171a1d 100%);
}
.featured-kicker-row{
    width:100%;
    max-width:500px;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.featured-kicker-row .featured-tag{
    flex:0 0 auto;
    max-width:190px;
    margin:0;
}
.featured-column-subtitle{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    color:#8495a6;
    font-size:12px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.featured-column-subtitle[hidden]{display:none}
.featured-content h1{
    width:100%;
    max-width:500px;
    margin:11px 0 0;
    font-size:clamp(28px,2.15vw,32px);
    line-height:1.16;
}
.featured-content h1.is-long-title{
    font-size:clamp(25px,1.85vw,29px);
}
.featured-english-title{
    width:100%;
    max-width:500px;
    margin-top:5px;
}
.featured-categories{
    width:100%;
    max-width:500px;
    margin-top:10px;
}
.featured-content p{
    width:100%;
    max-width:470px;
    min-height:0;
    margin:12px 0 0;
    font-size:15px;
    line-height:1.72;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.featured-actions{
    width:100%;
    max-width:470px;
    margin:14px 0 0;
}
html[data-theme="light"] .featured-content{
    background:
        radial-gradient(circle at 30% 50%,rgba(53,158,220,.075) 0,rgba(53,158,220,.025) 40%,transparent 70%),
        linear-gradient(90deg,rgba(250,251,252,.97),rgba(250,251,252,.86));
}
html[data-theme="light"] .featured-column-subtitle{color:#71869a}

@media (max-width:1500px) and (min-width:1181px){
    .featured-content{padding:15px 250px 17px 48px}
    .featured-kicker-row{gap:8px}
    .featured-content h1{margin-top:8px;font-size:clamp(27px,2.1vw,30px)}
    .featured-content h1.is-long-title{font-size:clamp(24px,1.8vw,27px)}
    .featured-english-title{margin-top:3px}
    .featured-categories{margin-top:7px}
    .featured-categories span{padding:2px 7px}
    .featured-content p{max-width:430px;margin-top:8px;font-size:14px;line-height:1.65}
    .featured-actions{margin-top:10px}
    .featured-content button{height:36px}
}
@media (max-width:1180px) and (min-width:701px){
    .featured{aspect-ratio:auto;min-height:260px}
    .featured-content{padding:20px 34px}
    .featured-thumbnails{display:none}
    .featured-kicker-row,.featured-content h1,.featured-english-title,.featured-categories{max-width:520px}
    .featured-content h1{margin-top:8px;font-size:27px}
    .featured-content h1.is-long-title{font-size:24px}
    .featured-english-title{margin-top:3px}
    .featured-categories{margin-top:7px}
    .featured-content p{max-width:500px;margin-top:9px;font-size:14px;line-height:1.65}
    .featured-actions{max-width:500px;margin-top:11px}
    .featured-content button{height:38px}
}
@media (max-width:700px){
    .featured-content{padding:24px}
    .featured-column-subtitle{display:none}
    .featured-content h1{font-size:28px}
    .featured-content h1.is-long-title{font-size:24px}
    .featured-content p{min-height:auto}
}

/* Give featured copy slightly longer lines without changing the banner structure. */
.featured-kicker-row,
.featured-content h1,
.featured-english-title,
.featured-categories{
    max-width:540px;
}
.featured-content p,
.featured-actions{
    max-width:530px;
}
@media (max-width:1500px) and (min-width:1181px){
    .featured-content{padding-left:46px;padding-right:246px}
    .featured-kicker-row,
    .featured-content h1,
    .featured-english-title,
    .featured-categories{max-width:458px}
    .featured-content p,
    .featured-actions{max-width:450px}
}


/* Refine the featured call to action without changing the content structure. */
.featured-actions{
    padding-left:clamp(235px,56%,300px);
}
.featured-content button,
html[data-theme="light"] .featured-content button{
    height:40px;
    padding:0 21px;
    border:0;
    border-radius:999px;
    background:rgba(241,246,249,.92);
    color:#285f7f;
    box-shadow:
        inset 0 0 0 1px rgba(86,114,136,.13),
        0 7px 18px rgba(42,72,94,.09);
}
.featured-content button:hover,
html[data-theme="light"] .featured-content button:hover{
    background:#f7fafc;
    color:#174f72;
    box-shadow:
        inset 0 0 0 1px rgba(69,105,132,.18),
        0 9px 22px rgba(42,72,94,.13);
}
@media(max-width:1180px){
    .featured-actions{padding-left:0}
}


/* Homepage banner CTA: right-aligned, quiet surface with a compact arrow cue. */
.featured-actions{
    padding-left:clamp(320px,68%,355px);
}
.featured-content button{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:132px;
    height:42px;
    padding:0 10px 0 17px;
    border:1px solid rgba(128,157,177,.20);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(45,58,67,.96),rgba(35,47,56,.96));
    color:#dce8ef;
    box-shadow:0 8px 20px rgba(3,12,18,.14);
}
.featured-content button::after{
    content:"→";
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:rgba(255,255,255,.09);
    color:#9fc7de;
    font-size:14px;
    transition:transform .18s ease,background .18s ease;
}
.featured-content button:hover{
    border-color:rgba(130,178,205,.35);
    background:linear-gradient(135deg,#354650,#293943);
    color:#f2f7fa;
    box-shadow:0 10px 22px rgba(3,12,18,.18);
}
.featured-content button:hover::after{transform:translateX(2px);background:rgba(255,255,255,.14)}
html[data-theme="light"] .featured-content button{
    border-color:rgba(91,126,149,.16);
    background:linear-gradient(135deg,rgba(250,252,253,.98),rgba(235,242,246,.98));
    color:#264d66;
    box-shadow:0 8px 20px rgba(42,72,94,.10);
}
html[data-theme="light"] .featured-content button::after{
    background:rgba(81,139,174,.10);
    color:#397da4;
}
html[data-theme="light"] .featured-content button:hover{
    border-color:rgba(75,130,164,.24);
    background:linear-gradient(135deg,#fff,#eaf2f6);
    color:#173f59;
    box-shadow:0 10px 24px rgba(42,72,94,.14);
}
@media(max-width:1500px) and (min-width:1181px){
    .featured-actions{padding-left:clamp(285px,66%,315px)}
    .featured-content button{height:38px}
}
@media(max-width:1180px){
    .featured-actions{padding-left:0}
}


/* Preserve one-line CTA text while keeping it close to the thumbnail rail. */
.featured-actions{
    display:flex;
    justify-content:flex-end;
    max-width:530px;
    padding-left:0;
}
.featured-content button{
    width:140px;
    flex:0 0 140px;
    white-space:nowrap;
}
@media(max-width:1500px) and (min-width:1181px){
    .featured-actions{max-width:450px;padding-left:0}
}
@media(max-width:1180px){
    .featured-actions{justify-content:flex-start;padding-left:0}
}


/* Standard reading rhythm for the two-line homepage promotion copy. */
.featured-content p{
    font-size:15px;
    line-height:1.78;
    letter-spacing:.018em;
    -webkit-line-clamp:2;
}
@media (max-width:1500px) and (min-width:1181px){.featured-content p{font-size:14px;line-height:1.76;letter-spacing:.016em}}

/* Homepage promotion copy and primary call to action. */
html[data-theme="light"] #recommendDesc{color:#111}
.featured-actions{transform:translateX(28px)}
.featured-content button,
html[data-theme="light"] .featured-content button{
    border:1px solid rgba(18,132,194,.30);
    background:linear-gradient(135deg,#2aa6df,#168fcb);
    color:#fff;
    font-weight:650;
    box-shadow:0 8px 20px rgba(27,135,190,.22);
}
.featured-content button::after,
html[data-theme="light"] .featured-content button::after{
    background:rgba(255,255,255,.18);
    color:#fff;
}
.featured-content button:hover,
html[data-theme="light"] .featured-content button:hover{
    border-color:rgba(13,116,174,.38);
    background:linear-gradient(135deg,#249bd3,#0d83bd);
    color:#fff;
    box-shadow:0 10px 24px rgba(27,135,190,.30);
}
@media(max-width:1500px) and (min-width:1181px){.featured-actions{transform:translateX(18px)}}
@media(max-width:1180px){.featured-actions{transform:none}}

/* Shared frontend visual rhythm */
.pagination button{min-height:38px;border-radius:var(--radius-tag);transition:background .18s ease,color .18s ease,transform .18s ease}
html[data-theme="light"] .navbar{background:rgba(255,255,255,.94);border-bottom-color:var(--border-light);box-shadow:var(--shadow-sm)}
html[data-theme="light"] .ranking-box,html[data-theme="light"] .category-box,html[data-theme="light"] .sidebar-random{border-radius:var(--radius-panel);box-shadow:var(--shadow-md)}
html[data-theme="light"] .featured{box-shadow:var(--shadow-lg)}
/* Homepage precision polish: visual-only overrides for the existing structure. */
.home-page .nav-inner{height:75px}
.home-page .navbar nav{gap:24px}
.home-page .navbar nav a{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 10px;border-radius:8px;color:var(--text-primary);transition:background .18s ease,color .18s ease}
.home-page .navbar nav a:hover{background:rgba(33,151,221,.06);color:var(--accent-hover)}
.home-page .navbar nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.home-page .search-box input{height:40px;padding-top:0;padding-bottom:0;border-color:var(--border-normal);background:#f3f6f8;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.home-page .search-box input:hover{border-color:rgba(33,151,221,.18);background:#f7f9fb}
.home-page .search-box input:focus{border-color:var(--accent-border);background:#fff;box-shadow:0 0 0 3px rgba(33,151,221,.07)}

.home-page .featured{margin:28px auto 32px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--shadow-lg)}
.home-page .featured-cover,.home-page .featured-content{height:100%}
.home-page .featured-content,html[data-theme="light"] .home-page .featured-content{justify-content:center;padding:20px 250px 22px 46px;background:var(--card-bg)}
.home-page .featured-content h1{margin-top:9px;color:var(--hero-title);line-height:1.18}
.home-page .featured-english-title{margin-top:4px;color:var(--hero-english)}
.home-page .featured-categories,html[data-theme="light"] .home-page .featured-categories{margin-top:8px;gap:5px;color:#536b82}
.home-page .featured-categories span{padding:3px 8px;border-color:rgba(69,105,132,.11);border-radius:var(--radius-tag);background:#edf4f8}
.home-page .featured-content p,html[data-theme="light"] .home-page #recommendDesc{max-width:510px;margin-top:10px;color:#4f6377;font-size:14px;line-height:1.72;letter-spacing:.01em;-webkit-line-clamp:2}
.home-page .featured-actions{max-width:510px;margin-top:14px;transform:none}
.home-page .featured-content button,html[data-theme="light"] .home-page .featured-content button{width:140px;height:40px;padding:0 11px 0 17px;border:1px solid rgba(34,155,214,.22);border-radius:9px;background:#229bd6;color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(34,155,214,.14);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.home-page .featured-content button::after,html[data-theme="light"] .home-page .featured-content button::after{background:rgba(255,255,255,.14);color:#fff}
.home-page .featured-content button:hover,html[data-theme="light"] .home-page .featured-content button:hover{transform:none;border-color:rgba(23,136,205,.28);background:#1788cd;color:#fff;box-shadow:0 6px 16px rgba(34,155,214,.18)}
.home-page .featured-thumbnails{top:50%;bottom:auto;height:266px;overflow:hidden;border-radius:12px;transform:translateY(-50%);-webkit-mask-image:none;mask-image:none}
.home-page .featured-thumb-track{gap:10px}
.home-page .featured-thumb{border:1px solid transparent;border-radius:10px;opacity:.72;box-shadow:none;transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease}
.home-page .featured-thumb:hover{opacity:.9}
.home-page .featured-thumb.active{border-color:var(--accent-border);opacity:1;box-shadow:0 3px 10px rgba(30,50,70,.08)}

.home-page .content-layout{gap:24px}
.home-page .section-title h2{margin-bottom:16px;font-size:21px}
.home-page .game-grid{gap:18px}
.home-page .shared-game-cards .game-card{display:flex;height:100%;min-height:0;flex-direction:column;border-radius:var(--radius-card);box-shadow:var(--shadow-sm);transform:none}
.home-page .shared-game-cards .game-card:hover{transform:none;border-color:var(--accent-border);box-shadow:var(--shadow-md)}
.home-page .shared-game-cards .game-card img{flex:0 0 auto;object-fit:contain;transform:none}
.home-page .shared-game-cards .game-card h3{display:-webkit-box;min-height:0;padding:11px 13px 0;overflow:hidden;font-size:16px;font-weight:700;line-height:21px;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.home-page .shared-game-cards .game-card-categories{height:auto;padding:8px 13px 11px}
.home-page .shared-game-cards .game-card-category{font-size:11.5px}
.home-page .shared-game-cards .game-card-divider{margin-top:auto;background:var(--border-light)}
.home-page .shared-game-cards .game-card-meta{min-height:38px;padding:8px 13px 10px;color:var(--text-muted);font-size:11.5px}
.home-page .shared-game-cards .game-storage{color:var(--text-secondary)}

.home-page .sidebar-random,.home-page .ranking-box,.home-page .category-box{border:1px solid var(--card-border);border-radius:var(--radius-panel);background:var(--card-bg);box-shadow:var(--shadow-md)}
.home-page .sidebar-random{margin-top:41px;margin-bottom:16px;padding:14px}
.home-page .sidebar-random-heading,.home-page .ranking-heading{gap:10px}
.home-page .sidebar-random-heading h2,.home-page .ranking-heading h2{font-size:18px}
.home-page .sidebar-random-heading p,.home-page .ranking-heading p{margin-top:3px;color:var(--text-muted)}
.home-page .sidebar-random-heading>button{height:30px;padding:0 10px;border-color:var(--border-normal);border-radius:var(--radius-tag);background:#f3f6f8;color:var(--text-secondary);transition:background .18s ease,border-color .18s ease,color .18s ease}
.home-page .sidebar-random-heading>button:hover{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent-hover)}
.home-page .sidebar-random-result{min-height:62px;margin-top:10px;border:1px solid transparent;border-radius:9px;background:#f3f6f8;transition:background .18s ease,border-color .18s ease}
.home-page .sidebar-random-result:hover{border-color:var(--accent-border);background:#f7fbfd}
.home-page .sidebar-random-result a{min-height:62px;padding:6px}
.home-page .sidebar-random-result img{width:88px;flex:0 0 88px}
.home-page .ranking-box{padding:14px 16px 12px}
.home-page .ranking-heading{margin-bottom:8px}
.home-page .ranking-heading .rank-tabs{gap:2px;padding:2px;border-radius:9px;background:#f1f5f8}
.home-page .ranking-heading .rank-tabs span{min-width:28px;height:28px;border-radius:7px;background:transparent;color:var(--text-muted)}
.home-page .ranking-heading .rank-tabs .active{background:var(--accent);color:#fff}
.home-page .rank-item{height:50px;gap:8px;border-color:var(--border-light)}
.home-page .rank-item:hover{background:rgba(33,151,221,.035)}
.home-page .rank-item b{background:#eef2f5;color:#6c8092}
.home-page .rank-item:nth-child(1) b{background:#e8f4fb;color:#1788cd}
.home-page .rank-item:nth-child(2) b{background:#eef2f5;color:#708599}
.home-page .rank-item:nth-child(3) b{background:#f5eee8;color:#a87550}
.home-page .rank-item img{width:46px;flex-basis:46px;border-radius:5px}
.home-page .rank-item span{font-size:13px}

@media(max-width:1500px) and (min-width:1181px){
    .home-page .featured-content,html[data-theme="light"] .home-page .featured-content{padding:15px 246px 16px 42px}
    .home-page .featured-content h1{margin-top:7px}
    .home-page .featured-categories{margin-top:6px}
    .home-page .featured-content p,html[data-theme="light"] .home-page #recommendDesc{max-width:450px;margin-top:7px;font-size:13.5px;line-height:1.65}
    .home-page .featured-actions{max-width:450px;margin-top:9px}
    .home-page .featured-content button,html[data-theme="light"] .home-page .featured-content button{height:38px}
    .home-page .featured-thumb-track{gap:8px}
    .home-page .featured-thumbnails{height:220px}
    .home-page .featured-thumb{height:68px}
}
@media(max-width:1180px){
    .home-page .featured-content,html[data-theme="light"] .home-page .featured-content{padding:20px 34px}
    .home-page .featured-actions{justify-content:flex-start}
}
/* Dark theme refinement: layered surfaces and shared frontend hierarchy. */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:linear-gradient(180deg,#0a1017 0%,#0b1118 35%,#091018 100%);background-attachment:fixed;color:var(--text-primary)}
html[data-theme="dark"] .navbar{background:rgba(10,16,24,.88);border-bottom:1px solid var(--border-normal);box-shadow:0 4px 18px rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme="dark"] .logo-title{color:#62baf6;text-shadow:0 0 14px rgba(58,167,242,.14)}
html[data-theme="dark"] .logo small{color:#a9b8c9}
html[data-theme="dark"] .navbar nav a{color:#b7c5d4}
html[data-theme="dark"] .navbar nav a:hover{background:rgba(58,167,242,.07);color:#eaf2fb}
html[data-theme="dark"] .navbar nav a[aria-current="page"]{background:rgba(58,167,242,.10);color:#62baf6}
html[data-theme="dark"] .navbar nav a[aria-current="page"]::after{background:#3aa7f2}
html[data-theme="dark"] .search-box input{background:#111a24;border-color:var(--border-normal);color:#eaf2fb}
html[data-theme="dark"] .search-box input:hover{background:#131e2a;border-color:rgba(58,167,242,.18)}
html[data-theme="dark"] .search-box input:focus{background:#111a24;border-color:rgba(58,167,242,.30);box-shadow:0 0 0 3px rgba(58,167,242,.07)}
html[data-theme="dark"] .search-box input::placeholder{color:#7f90a4}
html[data-theme="dark"] .search-box .header-search-icon{stroke:#7f90a4}
html[data-theme="dark"] .search-results{background:#101925;border-color:var(--border-normal);box-shadow:0 18px 44px rgba(0,0,0,.38)}
html[data-theme="dark"] .theme-toggle{background:#111a24;border-color:var(--border-normal);color:#8dccf7}
html[data-theme="dark"] .theme-toggle:hover{background:#162131;border-color:var(--accent-border);color:#b4ddfa;transform:none}
html[data-theme="dark"] .theme-toggle span{display:block;width:15px;height:15px;border-radius:50%;font-size:0;box-shadow:-4px 2px 0 0 currentColor;transform:translate(2px,-1px)}
html[data-theme="dark"] footer{background:#070b10;color:#637488}

html[data-theme="dark"] .home-page .featured{background:linear-gradient(180deg,#0f1722 0%,#0d1620 100%);border-color:var(--border-normal);box-shadow:0 12px 28px rgba(0,0,0,.28)}
html[data-theme="dark"] .home-page .featured-cover{background:#080e15}
html[data-theme="dark"] .home-page .featured-content{background:linear-gradient(180deg,#0f1722 0%,#0d1620 100%)}
html[data-theme="dark"] .home-page .featured-content h1{color:#f2f7fd}
html[data-theme="dark"] .home-page .featured-english-title{color:#7e8ea3}
html[data-theme="dark"] .home-page .featured-categories{color:#9dcdf1}
html[data-theme="dark"] .home-page .featured-categories span{background:rgba(58,167,242,.10);border-color:rgba(58,167,242,.18)}
html[data-theme="dark"] .home-page .featured-content p{color:#a9b8c9}
html[data-theme="dark"] .home-page .featured-tag{background:rgba(58,167,242,.10);border-color:rgba(58,167,242,.20);color:#d9edfc}
html[data-theme="dark"] .home-page .featured-content button{background:#3aa7f2;border-color:rgba(58,167,242,.30);color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.18)}
html[data-theme="dark"] .home-page .featured-content button:hover{background:#2197dd;border-color:rgba(58,167,242,.35);box-shadow:0 7px 18px rgba(0,0,0,.22)}
html[data-theme="dark"] .home-page .featured-thumb{background:#0b121a;opacity:.62}
html[data-theme="dark"] .home-page .featured-thumb:hover{opacity:.82}
html[data-theme="dark"] .home-page .featured-thumb.active{border-color:rgba(58,167,242,.28);opacity:.92;box-shadow:0 4px 12px rgba(0,0,0,.20)}

html[data-theme="dark"] .home-page .sidebar-random,
html[data-theme="dark"] .home-page .ranking-box,
html[data-theme="dark"] .home-page .category-box{background:#101925;border-color:var(--border-normal);box-shadow:0 10px 24px rgba(0,0,0,.22)}
html[data-theme="dark"] .home-page .sidebar-random-heading h2,
html[data-theme="dark"] .home-page .ranking-heading h2,
html[data-theme="dark"] .home-page .category-box h2,
html[data-theme="dark"] .home-page .section-title h2{color:#f2f7fd}
html[data-theme="dark"] .home-page .sidebar-random-heading p,
html[data-theme="dark"] .home-page .ranking-heading p{color:#91a2b5}
html[data-theme="dark"] .home-page .sidebar-random-heading>button{background:#111a24;border-color:var(--border-normal);color:#a9b8c9}
html[data-theme="dark"] .home-page .sidebar-random-heading>button:hover{background:#162131;border-color:var(--accent-border);color:#9dcdf1}
html[data-theme="dark"] .home-page .sidebar-random-result{background:#0d1620;border-color:transparent}
html[data-theme="dark"] .home-page .sidebar-random-result:hover{background:#162131;border-color:var(--border-normal)}
html[data-theme="dark"] .home-page .sidebar-random-result img,
html[data-theme="dark"] .home-page .rank-item img{background:#090f16}
html[data-theme="dark"] .home-page .sidebar-random-result strong{color:#eaf2fb}
html[data-theme="dark"] .home-page .sidebar-random-result small{color:#7e8ea3}
html[data-theme="dark"] .home-page .ranking-heading .rank-tabs{background:#0d1620}
html[data-theme="dark"] .home-page .ranking-heading .rank-tabs span{color:#7e8ea3}
html[data-theme="dark"] .home-page .ranking-heading .rank-tabs .active{background:#3aa7f2;color:#fff}
html[data-theme="dark"] .home-page .rank-item{border-color:var(--border-light);color:#dce7f2}
html[data-theme="dark"] .home-page .rank-item:hover{background:#162131}
html[data-theme="dark"] .home-page .rank-item b{background:#172231;color:#8ea0b4}
html[data-theme="dark"] .home-page .rank-item:nth-child(1) b{background:rgba(210,163,72,.15);color:#d8b66c}
html[data-theme="dark"] .home-page .rank-item:nth-child(2) b{background:rgba(160,177,194,.12);color:#aebdcb}
html[data-theme="dark"] .home-page .rank-item:nth-child(3) b{background:rgba(184,125,82,.14);color:#c9946f}
html[data-theme="dark"] .home-page .category-grid span{background:#131e2a;color:#a9b8c9}
html[data-theme="dark"] .pagination button{background:#111a24;color:#a9b8c9}
html[data-theme="dark"] .pagination button:not(:disabled):hover{background:#162131;color:#dce7f2}
html[data-theme="dark"] .pagination .active{background:#3aa7f2;color:#fff}
/* Homepage data sections share the existing game-card grid. */
.home-page .home-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.home-page .home-section-heading h2{margin:0}
.home-page .section-more{flex:0 0 auto;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;transition:color .18s ease}
.home-page .section-more:hover{color:var(--accent-hover)}
.home-page .home-release-section{margin-top:34px}
html[data-theme="dark"] .home-page .section-more{color:#75c4f8}
html[data-theme="dark"] .home-page .section-more:hover{color:#a4d9fb}
@media(max-width:620px){.home-page .home-section-heading{gap:12px}.home-page .section-more{font-size:12px}}
/* Empty published recommendation lists must not expose the HTML fallback game. */
.featured[hidden]{display:none!important}
#gameIntroduction video{display:block;max-width:100%;height:auto;margin:16px auto}