/* 当菜单拥有 .show-menu 类时，强制显示 */
#nav.show-menu {
    display: block !important;
}

/* 统一控制下拉菜单项的颜色，解决点击变白问题 */
    .custom-nav-item {
        color: rgba(255,255,255,.75) !important;
        font-size: 13px !important;
        background-color: transparent !important; /* 初始背景透明 */
    }

    /* 鼠标悬停：背景变深 */
    .custom-nav-item:hover {
        color: #ffffff !important;
        background-color: #495057 !important;
    }

    /* 核心修复：点击瞬间（active）和点击后（focus）保持背景不切白 */
    .custom-nav-item:active, 
    .custom-nav-item:focus {
        color: #ffffff !important;
        background-color: #495057 !important; /* 保持和 hover 一致的深灰色 */
    }

	/* 移动端下拉菜单悬浮效果 */
	.dropdown-item:hover {
		background-color: #495057;
		color: #ffffff !important;
	}
	/* 确保移动端ico图标垂直居中 */
	.hidden-lg.dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 大屏设备隐藏移动端下拉组件（核心：强制隐藏，优先级最高） */
	@media (min-width: 992px) {
		.mobile-login-dropdown-container,
		.hidden-lg {
			display: none !important;
		}
		/* 大屏下只强制关闭【移动端登录】的下拉菜单，防止残留显示，不误伤其他菜单 */
		.mobile-login-dropdown-container .dropdown-menu {
			display: none !important;
		}
	}
	/* 小屏设备适配：确保下拉菜单跟随触发按钮，不固定在左侧 */
	@media (max-width: 991px) {
		/* 给移动端下拉触发容器添加相对定位，作为下拉菜单的定位参考 */
		.mobile-login-dropdown-container {
			position: relative;
			z-index: 1000; /* 确保下拉菜单在最上层 */
		}
		/* 下拉菜单固定跟随右侧触发按钮，不随窗口缩放偏移 */
		.mobile-login-dropdown-container .dropdown-menu {
			right: 0 !important;
			left: auto !important;
			top: 100% !important;
			margin-top: 0.5rem !important;
			transform: none !important;
			float: none !important;
			position: absolute !important;
		}
		/* 避免导航折叠时下拉菜单样式错乱 */
		.navbar-collapse {
			position: relative;
			z-index: 999;
		}
	}
	
	/* --- 手机端：导航内下拉菜单样式优化 --- */
@media (max-width: 991.98px) {
    #game-dropdown-container .dropdown-menu {
        /* 去掉原本的黑底和边框，融入背景 */
        background-color: transparent !important; 
        border: none !important;
        box-shadow: none !important;
        /* 往右缩进一点，做出“二级菜单”的视觉层级感 */
        padding-left: 1.5rem !important; 
        margin-top: 0 !important;
    }
    #game-dropdown-container .dropdown-item {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
	
	/* 皇冠图标特效 */
.vip-crown i {
    transition: transform 0.2s ease-in-out; /* 平滑过渡时间 */
    display: inline-block; /* 必须设置，否则 transform 可能失效 */
}

.vip-crown:hover i {
    transform: scale(1.1); /* 鼠标经过时放大 1.3 倍 */
    color: #ffc107; /* 悬停时颜色稍微加深一点点（可选） */
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* 加一点点发光感 */
}

/* --- 修复手机版皇冠跟随名字 --- */
@media (max-width: 991.98px) {
    /* 1. 强制让用户名这一行不撑开，并去掉下边框防止视觉干扰 */
    .navbar-collapse#nav .nav-item.username {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        border-bottom: 1px solid #4a5158 !important; /* 把边框从链接移到这一行上 */
    }

    /* 2. 核心修正：取消宽度100%，让名字链接宽度自适应 */
    .navbar-collapse#nav .nav-item.username .nav-link.v-name {
        width: auto !important; 
        padding-right: 5px !important;
        border-bottom: none !important; /* 去掉名字单独的边框 */
    }

    /* 3. 皇冠样式微调 */
    .vip-crown {
        padding: 7px 5px !important; /* 保持与链接一致的点击感 */
        display: inline-flex !important;
        align-items: center;
    }
}

/* --- 皇冠特效：鼠标经过放大 --- */
.vip-crown i {
    transition: transform 0.2s ease-in-out;
    display: inline-block !important;
    font-size: 0.85rem;
}

.vip-crown:hover i {
    transform: scale(1.3) !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
}

/* 确保导航栏层级最高，足以盖住页面内的按钮和遮罩 */
#header {
    position: relative; /* 或者 sticky / fixed，取决于你的布局需求 */
    z-index: 1050 !important; /* Bootstrap 4 模态框通常在 1050，导航栏设为此值最稳妥 */
}

/* 如果你希望导航栏在滚动时固定在顶部，请确保它有这个类 */
.navbar.fixed-top {
    z-index: 1060 !important;
}

/* --- 全屏现代搜索遮罩层样式 (完全替换之前的 versions) --- */
/* --- 轻量级搜索框样式 (深邃灰统一配色版) --- */
.compact-search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: flex; justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* 稍微加深一点背景，让白底卡片更凸显 */
    opacity: 0; transition: opacity 0.2s; padding-top: 15vh;
}
.compact-search-overlay.show { opacity: 1; }
.compact-search-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

.compact-search-card {
    position: relative; width: 100%; max-width: 550px; margin: 0 20px;
    background: #fff; border-radius: 12px; padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    transform: translateY(-20px); transition: transform 0.2s ease;
    height: max-content;
}
.compact-search-overlay.show .compact-search-card { transform: translateY(0); }

/* 极简 Tab */
.compact-search-tabs {
    display: flex; gap: 20px; margin-bottom: 20px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.c-tab {
    font-size: 15px; color: #888; cursor: pointer; transition: color 0.2s;
    position: relative;
}
.c-tab:hover { color: #343a40; }
.c-tab.active { color: #343a40; font-weight: bold; }
.c-tab.active::after {
    content: ''; position: absolute; bottom: -11px; left: 0;
    width: 100%; height: 2px; background: #343a40; /* 底部指示条换成深灰 */
}

/* 搜索框 (彻底解决错位和半截问题) */
.compact-search-form {
    display: flex; align-items: center; position: relative;
    border: 2px solid #343a40; /* 边框换成深灰 */
    border-radius: 8px; overflow: hidden;
    height: 48px; /* 核心修复：强制统一高度 */
    box-sizing: border-box;
}
.c-search-icon {
    position: absolute; left: 15px; color: #999; font-size: 16px;
    z-index: 2;
}
.c-search-input {
    flex-grow: 1; border: none; padding: 0 15px 0 40px;
    font-size: 16px; outline: none; background: transparent;
    height: 100%; /* 撑满 48px 高度 */
    line-height: normal; box-sizing: border-box;
}
.c-search-btn {
    background: #343a40; /* 按钮底色深灰 */
    color: #fff; border: none; padding: 0 25px;
    height: 100%; /* 完美贴合父容器高度 */
    font-size: 15px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.c-search-btn:hover { background: #23272b; /* 悬停时稍微加黑一点 */ }

/* 文字版历史记录 */
.compact-search-history {
    margin-top: 15px; font-size: 13px; color: #999;
    display: flex; align-items: center; flex-wrap: wrap;
}
.history-label { margin-right: 5px; }
.history-list-text { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.h-item { color: #666; cursor: pointer; transition: color 0.2s; }
.h-item:hover { color: #343a40; text-decoration: underline; }
.history-clear { color: #ccc; text-decoration: none; margin-left: auto; }
.history-clear:hover { color: #ff4d4f; }

/* 明确的关闭按钮 */
.c-close-btn {
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: none; 
    border: none; 
    font-size: 26px; 
    color: #bbb; 
    cursor: pointer; 
    line-height: 1; 
    padding: 0 5px; 
    transition: color 0.2s;
    z-index: 10; /* 确保不被别的元素挡住 */
    outline: none;
}
.c-close-btn:hover {
    color: #343a40; /* 悬停时变成和主题一致的深灰色 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .compact-search-overlay { padding-top: 15px; align-items: flex-start; }
    .compact-search-card { padding: 20px 15px; }
    .compact-search-tabs { gap: 15px; }
    .compact-search-form { height: 44px; /* 手机上稍微矮一点，更精致 */ }
}