/* 重置浏览器默认样式 */
*{ margin: 0; padding: 0; box-sizing: border-box; }
a{ color: #000; text-decoration: none;}

body{
	width:1200px;
	min-width:360px;
	margin: 0 auto;
	display: grid;
	gap:10px 0;
	grid-template-columns:1fr 300px;
	grid-template-areas:
		"navbar navbar"
		"intro intro"
		"main sidebar"
		"footer footer";
	grid-template-rows: 150px 250px minmax(80vh, 1fr) 200px;
	min-height: 100vh;
	font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
	display: -ms-grid;
	-ms-grid-columns: 1fr 300px;
	-ms-grid-rows: 150px 250px 1fr 50px;
}

/* 通用样式类 */
.sticky-top{ position: sticky; top: 0; z-index: 10; }
.grid-center{ display: grid; align-items: center; }
.flex-center{ display: flex; align-items: center; }
.scroll-hidden{ overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; }
.scroll-hidden::-webkit-scrollbar{ display: none; }

nav{
	grid-area:navbar;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px; 
	background:linear-gradient(to right bottom, #fff 10%,#fa9360);
	-webkit-mask: 
		radial-gradient(circle at left 100px, #0000 5px, red 0), 
		radial-gradient(circle at right 100px, #0000 5px, red 0);
	-webkit-mask-size:51%;
	-webkit-mask-position:0, 100%;
	-webkit-mask-repeat: no-repeat;
}

.top {
	width:100%;
	height:100px;
	padding:0 10px;
	display:grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.top_main{ border-radius: 0 0 10px 0; display: flex; }
.top_main_info{ display: block; }
.top_main_info > a{ display: block; margin-left:10px; font-weight: bold; }
.top_main_info > a:nth-child(1){ font-size:24px; }
.top_main_info > a:nth-child(2){ border-radius: 4px; }

.top_site{ text-align:right; }
.top_site > a{
	display:inline-block;
	height: 35px;
	line-height: 30px;
	padding:3px 8px;
	font-weight: bold;
	color:#d74b4b;
}
.top_site > span{ color:#fff; }
.top_site > span:nth-child(1){ display: none; }
.top_motto{ display: none; padding-top:28px; text-align:right; vertical-align:middle; }

.navbar {
	grid-area:navbar;
	height:50px;
	line-height:50px;
	padding:0 10px;
	border-top:dashed 1px #fff;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
	position: sticky;
	top: 0;
	z-index: 10;
}

.navbar>.nav_smalll{ display:none; }
.navbar>.navbar_left { display:flex; align-items:center; }	
.navbar>.navbar_left>a {
	margin:0 10px;
	color:#222;
	height:30px;
	line-height:30px;
	display: inline-flex;
	font-weight:bold;
}
.navbar>.navbar_left>.navbar_left_search { display: none; }
.navbar>.navbar_right { display:flex; align-items:center; justify-content:center; }

.navbar_input{
	height:35px;
	border:solid 1px #d8511c;
	min-width:500px;
	padding:0 10px;
	outline:0;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}
.navbar_input:hover{ border-color:#6366f1; }
.navbar_input:focus{ border-color:#4f46e5; }

.navbar_button{
	display:flex;
	align-items:center;
	height:35px;
	border:none;
	padding:0 10px;
	background-color:#d8511c;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	color:#fff;
}

#toggle_sidebar{ display:none; }

main{
	grid-area:main;
	min-height:80vh;
	width:100%;
	padding-right: 10px;
}

.game{ min-height:200px; position:relative; }
.intro{ grid-area:intro; height: 250px; }

/* ===== 主题网格样式 ===== */
.themes{
	max-width: 100%;
	display: grid;
	gap: 5px;
}

.themes_item{
	border:1px solid #ddd;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border-radius:10px;
	overflow-x: hidden;
	position: relative;
}

.themes_item ~ .current{ border:2px solid #00994d; }

.themes_item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
	z-index: 0;
}

.themes_item h2,
.themes_item div{
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.themes_item h2{
	position: absolute;
	left:10px;
	bottom: 30px;
	z-index: 2;
}

.themes_item div{
	position: absolute;
	left:10px;
	bottom: 10px;
	z-index: 2;
}

/* 第一个.themes_item的特殊样式 */
.themes_item:first-child h2 {
	left:20px;
	bottom: 40px;
}

.themes_item:first-child div {
	left:20px;
	bottom: 20px;
}

.themes_item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%);
	z-index: 1;
	pointer-events: none;
	border-radius: 10px;
}

.themes_item h2 > a{
	text-decoration:none;
	font-size:20px;
	font-weight: bold;
	border-radius: 4px;
	color: #fff;
	text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666;
}
.themes_item div > a{
	text-decoration:none;
	font-size:14px;
	color: #fff;
	text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666;
}

.algorithm{
	height:250px;
	padding-left:10px;
	background:linear-gradient(to right bottom, #a7f3d0,#fff);
	display:grid;
	grid-gap:10px;
	grid-template-columns:auto 80px;
	border-radius:10px;
	margin-bottom:10px;
}

.algorithm_content{ display:grid; }
.algorithm_content::-webkit-scrollbar{ display:none; }

.algorithm_quote{
	max-height:250px;
	align-self:end;
	padding-left:10px;
	line-height:30px;
	overflow-y:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

.algorithm_quote > .algorithm_text{ font-size:18px; }
.algorithm_quote >.algorithm_explain{
	width:100%;
	border-top:dashed 1px #e1deb7;
	color:#ea580c;
	margin-top:5px;
	padding-top:5px;
}

.algorithm_quote >.algorithm_explain:empty{ border-top:none; }

.algorithm_info{
	margin-top:10px;
	align-self:start;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.algorithm_info > .line {
	width:100px;
	height:1px;
	background-color:#e2e8f0;
	margin-right:10px;
}

.algorithm_info > .avatar {
	width:40px;
	height:40px;
	border-radius:50%;
	margin-right:10px;
}

.algorithm_info > .alias,
.algorithm_info > .brief { margin-right:20px; }

.algorithm_more{
	background-color:#fff;
	border-top:solid 1px #e2e8f0;
	border-right:solid 1px #e2e8f0;
	display:grid;
	grid-template-rows:1fr 1fr 1fr;
	grid-gap:10px;
	justify-content:flex-end;
	align-items:center;
	padding:15px 10px 15px 0;
	border-radius:55% 10px 10px 55%;
} 

.algorithm_more > svg{ width:40px; height:40px; cursor: pointer; }

.info{
	min-height:100px;
	padding:10px;
	border-radius:10px;
	display:grid;
	grid-template-columns:100px auto;
	background:linear-gradient(to left bottom, #fb923c 4%,#fff);
}

.info > .info_avatar{
	height:80px;
	width:80px;
	border-radius:5px;
}

.info > .info_content{
	overflow-y:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

.info > .info_content::-webkit-scrollbar{ display:none; }
.info .info_name{ font-weight:bold; font-size:1.2em; margin-right:20px; }
.info .info_word{ display:inline-block; }

.info .info_brief{
	margin-top:10px;
	padding-top:10px;
	border-top:dashed 1px #a8a29e;
}

.search{
	position:relative;
	border-radius:10px;
	border:solid 1px #065f46;
}

.search_list{
	padding-bottom:35px;
	max-height:200px;
	margin-bottom:35px;
	padding:10px;
	overflow-y:auto;
	-ms-overflow-style:none;
	scrollbar-width:none;
}

.search_list::-webkit-scrollbar{ display:none; }

.search_item{
	display:inline-flex;
	margin-right:10px;
	margin-bottom:10px;
	align-items:center;
}

.search_item > img { width:30px; height:30px; border-radius:50%; }
.search_item > a { line-height:35px; padding:0 10px 0 5px; }
.search_warning{ color:red; }

.search_notice{
	position:absolute;
	right:0;
	bottom:0;
	background:linear-gradient(to left top,#059669 20%, rgba(255,255,255,0.1)); 
	width:200px;
	height:30px;
	line-height:30px;
	color:#fff;
	text-align:center;
	vertical-align:middle;
	border-radius:20px 0 10px 0;
}

.search_tags{ border:solid 1px #0369a1; margin-top:10px; }
.search_tags .search_notice{ background:linear-gradient(to left top,#0ea5e9 20%, rgba(255,255,255,0.1)); }

.category_info{
	margin-bottom:10px;
	display:flex;
	align-items:center;
}

.category_info > .category_name{
	white-space:nowrap;
	border-radius:20px;
	padding:1px 12px;
	background-color:rgb(255, 165, 111);
	color:#ffffff;
}

.category_info > .category_line{
	flex-grow:1;
	height:1px;
	background-color:#e2e8f0;
	margin-left:10px;
}

.posts{
	background:linear-gradient(to right bottom, #fff, #ecfccb);
	border-radius:10px;
}

.posts>.post{ padding:10px; }
.post_quote_list{ margin:20px 0; }

.pictures{
	display:flex;
	flex-wrap:wrap;
	height:auto;
}

.pictures_item{
	width:calc(33.33% - 5px);
	height:auto;
	margin-right:5px;
	margin-bottom:5px;
	text-align:left;
	padding:5px 5px 10px 5px;
	background:linear-gradient(to right bottom, #e9d5ff, #fff);
	border-radius:10px;
}

.pictures_item > .pictures_img{
	width:100%;
	height:auto;
	border-radius:5px;
	border:solid 1px #e9d5ff;
}

.pictures_item > .pictures_name{
	display:block;
	min-height:16px;
	max-height:42px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;
	overflow-y:auto;
	word-break:break-all;
}

.pictures_item > .pictures_name::-webkit-scrollbar{ width:0; }
.pictures_item > .pictures_name > a{ display:block; font-weight:bold; }
.pictures_item > .pictures_name > span{ display:block; color:#64748b; font-size:0.8em; }

/* 分页样式 */
.pagination{
	margin-top:10px;
	list-style:none;
	display:grid;
	grid-template-columns:40px auto 40px;
}
.pages{ display:flex; overflow-x:auto; }
.pages::-webkit-scrollbar{ display:none; }

.pagination .page-item {
	min-width:34px;
	height:34px;
	line-height:34px;
	flex:0 0 auto;
	text-align:center;
	margin: 0 4px;
	border-radius:50px;
	background:#bae6fd;
	padding:0 6px;
}
.pagination .page-item:hover { background-color: #60a5fa; }
.pagination .page-item:hover > .page-link { color:#fff; }
.pagination .page-link { color: #007bff; text-decoration: none; display: inline-block; }
.pagination .active{ background:#a78bfa; }
.pagination .active .page-link { color: #fff; }
.pagination .disabled .page-link { color: #ccc; pointer-events: none; }

#load{
	margin-top:10px;
	width:100%;
	height:40px;
	border-radius:10px;
	border:none;
	background-color:#fef9c3;
	letter-spacing:10px;
}

/* 侧边栏固定优化 */
aside {
	grid-area: sidebar;
	position: sticky;
	top: 0;
	align-self: start;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.sidebar_item{
	width:100%;
	min-height:200px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-webkit-mask:
		radial-gradient(circle at left 40px, #0000 5px, red 0), 
		radial-gradient(circle at right 40px, #0000 5px, red 0);
	-webkit-mask-size:51%;
	-webkit-mask-position:0, 100%;
	-webkit-mask-repeat:no-repeat;
}

.sidebar_authors{background:linear-gradient(to bottom,#dbeafe,rgba(10,10,10,0));}
.sidebar_types{background:linear-gradient(to bottom,#ffffd7,rgba(10,10,10,0));}
.sidebar_categories{background:linear-gradient(to bottom,#fce7f3,rgba(10,10,10,0));}
.sidebar_qr{background:linear-gradient(to bottom,#e0f2fe,rgba(10,10,10,0));}
.sidebar_qr_info{background:linear-gradient(to bottom,#f0f9ff,rgba(10,10,10,0));}
.sidebar_user{
	display: flex;
	flex-direction:row;
	justify-content:space-between;
	padding:0 10px;
	min-height:3em;
	line-height:3em;
	margin-bottom:10px;
	border-radius:10px;
	text-align: center;
	background:linear-gradient(to left bottom,#baffe5,rgba(10,10,10,0));
}
.sidebar_user a {
	font-weight: bold;
	color:#e6519b;
}
.sidebar_user svg.icon {
	display: inline-block;
	vertical-align: middle;
}

.sidebar_item > .title{
	height:40px;
	padding-left:15px;
	line-height:40px;
	border-bottom:dashed 1px #fff;
}

.sidebar_item > .list{ padding:10px; }
.sidebar_item > .list div{
	display:inline-flex;
	min-height:30px;
	line-height:30px;
}

.sidebar_item > .list img{
	width:30px;
	height:30px;
	border-radius:50%;
}

.sidebar_item > .list a{ margin:0 5px; }
.sidebar_categories a{ margin-right:10px; }

/* 二维码图片样式 */
.sidebar_qr .list{
	padding: 5px;
}
.sidebar_qr .qr_image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2px;
}

.sidebar_qr .qr_image img {
	width: 100%;
	height: 100%;
	border-radius:5px;
    /* width: 150px;
    height: 150px;
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    object-fit: contain;
    background-color: white; */
}



.sidebar_push{ 
	display:flex;
	align-items: center;
	justify-content:center;
	text-align:center;
	width:100%;
	height:40px;
	line-height:40px;
	border-radius:20px;
	color:#fff; 
	background: linear-gradient(to right bottom, #e66465, #9198e5);
}

.tips {
	position: fixed;
	bottom: 20px;
	right: calc(50% - 620px);
	width: 40px;
	height: 40px;
	padding-top:5px;
	background-color: rgb(185, 185, 185);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(20px);
	transition: all 0.3s ease;
	overflow: hidden;
}
.tips:hover{ background-color: rgb(129, 129, 129); }

footer{
	grid-area:footer;
	-ms-grid-row: 4;
	-webkit-align-self: end;
	min-height:100px;
	padding:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	background:linear-gradient(#d6d3d1,#fff);
	display:grid;
	/* grid-template-columns:220px auto; */
    grid-template-columns: 120px auto;
	grid-template-rows:1fr 50px;
	background-color: #ff3d3d;
}

.footer_push{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:10px;
}
.footer_push_item{ display:flex; flex-direction:column; align-items:center; }
.footer_push_item > div{ color:red; display:none; }
.footer_push_item > img{
	width:100px;
	height:100px;
	border-radius:5px;
}

.footer_links_title{
	color:#504e4e;
	padding-left:4px;
	height:30px;
	border-bottom:1px solid #f1f5f9;
	display: flex;
	justify-content: space-between;
}
.footer_links_title > span{
	display: inline-block;
}

.footer_links_list{
	max-height:60px;
	display:flex;
	flex-wrap:wrap;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.footer_links_list::-webkit-scrollbar {
	display: none;
}

.footer_links_list > a{
	text-decoration:none;
	color:#6d727c;
	font-size:0.8em;
	line-height: 1.6em;
	display:inline-block;
	margin:0 5px;
}

.footer_info{
	grid-column:1/3;
	margin-top:10px;
	text-align:center;
	color:#b4b4b4;
}
.footer_info a{
	display:inline-block;
	color:#b4b4b4;
}

.footer_info_rights , .footer_info_licence{
	display: inline-flex;
	align-items: center;
}
.footer_info_rights > a{
	padding: 0 10px;
}
.footer_info_licence > div{
	display: inline-flex;
	align-items:center;
	padding-right:10px;
}
.footer_info_licence img{
	width:14px;
	height: 14px;
}
.footer_info_licence a{
	font-size: 13px;
}

/* ===== 大屏：≥801px ===== */
@media (min-width: 801px){
    .themes_item:nth-child(n+10){ display:none; }
    .themes{ grid-template-columns: repeat(6,1fr); grid-auto-rows: 1fr; }
    .themes_item:first-child{ grid-column: span 2; grid-row: span 2; }
}

/* ===== 中小屏：≤800px ===== */
@media (max-width: 800px){
	body{
		width:100%;
		padding:0 10px;
		grid-template-columns:1fr;
		grid-template-rows:120px auto;
	}
	
	nav, nav{ -webkit-mask:none; }
	.top, .top_main{ display:none; }
	
	.navbar{
		border:none;
		height:100%;
		display:grid;
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr 1fr;
		align-content:center;
		justify-content:start;
	}
	
	.navbar>.nav_smalll{ 
		margin-top:20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:60px;
		overflow-x: hidden;
		border-bottom:dashed 1px #fff;
	}
	
	/* 上方小屏幕搜索 */
	.navbar_find{ display: flex; }
	.navbar_find > .navbar_input{ 
		flex-grow: 1;
		overflow: hidden;
		min-width: 0;
	}
	.navbar_find > button { flex: 0 0 40px; overflow: hidden; }
	
	.navbar_slogan{ display: flex; font-weight: bold; align-items: center; }
	.navbar_slogan_info > a{ 
		display: block;
		margin-left:10px;
		font-weight: bold;
		line-height: 20px;
	}
	.navbar_slogan_info > a:nth-child(1){
		font-size:1.2em;
		color:#cf5757;
	}
	.navbar_slogan_info > a:nth-child(2){
		border-radius: 4px;
		font-size:0.6em;
		color:#cf5757;
	}
	
	.navbar_site { display:none; }
	.navbar>.top_small{ display: flex; }
	.navbar>.navbar_left{
		justify-content:space-between;
		flex-wrap:wrap;
		margin-top: 5px;
	}
	.navbar>.navbar_left > a { display: inline-flex; align-items: center; }
	.navbar>.navbar_left>.navbar_left_search {
		display:flex;
		align-items:center;
		height:30px;
		border:none;
		padding:0 10px;
		background-color:#d8511c;
		border-radius:10px;
		color:#fff;
	}
	.navbar>.navbar_right{ display:none; }
	.navbar .navbar_input{ min-width:auto; }
	
	.themes_item:nth-child(n+6){ display:none; }
    .themes{ grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; }
    .themes_item:first-child{ grid-column: span 2; grid-row: span 2; }
	
	.author-image{ display:none; }
	.algorithm{ grid-template-columns:auto 60px; }
	.algorithm_info > .line { display:none; }
	.algorithm_info > .avatar{ width:30px; height:30px; }
	.algorithm_more{ padding:15px 5px 15px 0; }
	.pictures_item{ width:calc(50% - 5px); }
	main{ padding-right: 0; }
	
	aside{
		position:fixed;
		width:200px;
		height:100%;
		background-color:grey;
		display:none;
		top:0;
		right:0;
		z-index:100;
	}
	.show{ display:block; }
	#toggle_sidebar{ display:block; }
	
	footer{
		grid-template-columns:1fr;
		grid-template-rows:auto;
	}
	.footer_push{ display:none; }
}

/* ===== 更小屏幕：≤500px ===== */
@media(max-width:500px){
	body{ grid-template-columns:1fr; }
	.game, .author-image{ display:none; }
	.navbar>.nav_smalll{ display:flex; }
	.navbar > .navbar_left > a > svg{ display: none; }
	.nav_smalll .navbar_slogan > svg,
	.nav_smalll .navbar_slogan_url,
	.navbar_site{ display: none; }
	
	.footer_info{ margin-top:20px; text-align:left; font-size:14px; }
	.footer_links_title > span:last-of-type{ display: none; }
	.footer_info_licence{ display: flex; flex-direction: column; align-items: flex-start; }
	.footer_info_licence > div{ display: flex; align-items: center; margin-bottom: 5px; }
	
	.tips {right: 30px;}
	
	.themes_item:nth-child(n+6){ display:none; }
	.themes_item h2:not(:first-child) { padding-left:5px; padding: top 4px; }
	.themes_item div:not(:first-child) { padding-left:5px; }

    .themes{
		grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 1fr;
        width: 100%;
        box-sizing: border-box;
    }
    .themes_item{ min-width: 0; border-radius:5px;}
    .themes_item h2, .themes_item div{ left: 0; }
}