/* 清除格式 */
			* {
				padding: 0;
				margin: 0;
			}

			a {
				text-decoration: none;
				/* 移除下划线 */
				color: inherit;
				/* 继承父元素颜色 */
				outline: none;
			}

			body {
				background-image: url('../img/SR/bj.png');
				width: 100%;
				max-width: 1900px;
				overflow-x: hidden;
				scroll-behavior: smooth;
			}

			@media (max-width: 768px) {

				/* TOP按钮 */
				.to_top {
					position: fixed !important;
					bottom: 15px !important;
					right: 15px !important;
					width: 40px !important;
					height: 40px !important;
					font-size: 12px !important;
					z-index: 100 !important;
				}

				/* 标题 */
				.title {
					font-size: 20px !important;
					text-align: center;
					display: block;
				}

				.title p {
					font-size: 16px !important;
				}

				/* 菜单按钮图标 */
				#showPopup img {
					width: 35px !important;
					height: auto !important;
				}

				/* 导航按钮区域 - 换行居中 */
				.back>div[style*="display: flex"] {
					flex-wrap: wrap !important;
					justify-content: center !important;
					gap: 8px !important;
				}

				.name1,
				.name2 {
					font-size: 12px !important;
					padding: 5px 12px !important;
				}

				/* 主容器 */
				.main {
					width: 100% !important;
					padding: 10px !important;
					overflow-x: hidden !important;
				}

				/* 角色名 */
				.wind[style*="font-size: 30px"] {
					font-size: 24px !important;
					text-align: center;
				}

				/* 插画图片 */
				.illustration {
					text-align: center;
				}

				.illustration img {
					max-width: 280px !important;
					width: 100% !important;
					height: auto !important;
				}

				/* 属性数值 - 换行居中 */
				.illValueP {
					display: flex !important;
					flex-wrap: wrap !important;
					justify-content: center !important;
					gap: 10px !important;
				}

				.illHP {
					font-size: 12px !important;
					padding: 3px 10px !important;
				}

				.illHP img {
					width: 18px !important;
				}

				/* 底部素材区域 */
				.bottomlc {
					display: flex !important;
					flex-wrap: wrap !important;
					justify-content: center !important;
					gap: 12px !important;
				}

				.botleft img,
				.botleft1 img,
				.botright img,
				.botright1 img {
					width: 30px !important;
				}

				.botspan {
					font-size: 11px !important;
				}

				/* 技能卡片 */
				.illmid {
					padding: 15px !important;
					margin: 15px 0 !important;
				}

				/* 技能图标 */
				._50 {
					width: 40px !important;
					height: auto !important;
				}

				._30 {
					width: 24px !important;
					height: auto !important;
				}

				._36 {
					width: 28px !important;
					height: auto !important;
				}

				._200 {
					width: 70px !important;
					height: auto !important;
				}

				/* 技能文字 */
				.illtext {
					font-size: 18px !important;
				}

				.middes,
				.middess {
					font-size: 13px !important;
					line-height: 1.6 !important;
				}

				.illdes {
					font-size: 12px !important;
				}

				/* 星魂区块 - 改为上下排列 */
				.illmid[style*="display: flex"] {
					flex-direction: column !important;
					align-items: center !important;
					text-align: center;
				}

				.illmid[style*="display: flex"]>div {
					width: 100% !important;
					margin: 5px 0 !important;
				}

				/* 属性强化行迹 */
				.illdess[style*="text-align: center"] {
					display: flex !important;
					flex-direction: column !important;
					gap: 10px !important;
				}

				.illdess span {
					display: inline-block !important;
					margin: 0 !important;
				}

				/* 配音演员 - 2x2排列 */
				#voice>div[style*="width: 98%"] {
					display: flex !important;
					flex-wrap: wrap !important;
					justify-content: center !important;
				}

				#voice>div[style*="width: 98%"]>div {
					width: 45% !important;
					margin: 5px !important;
				}

				/* 语音对话区块 */
				.illmid[style*="display: flex"] .voice {
					width: 30px !important;
				}

				/* 弹窗适配 */
				#overlay .popup {
					width: 85% !important;
					max-width: 280px !important;
					padding: 20px !important;
				}

				.popup_title {
					font-size: 18px !important;
				}

				.confirmBtn {
					padding: 6px 15px !important;
					font-size: 13px !important;
				}

				/* 返回按钮 */
				.back {
					font-size: 12px !important;
				}
			}

			.to_top {
				position: fixed;
				right: 0px;
				top: 50%;
				background-color: aquamarine;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				cursor: pointer;
			}

			h3 {
				margin: 50px auto 20px;
				text-align: center;
				color: rgb(255, 255, 255);
				font-weight: 400;
				line-height: 1.1;
				font-family: 华文琥珀;
			}

			h3 .title {
				font-size: 40px;
				position: relative;
			}

			.title p {
				font-size: 26px;
				margin-top: 30px;
			}

			.main {
				/* min-width: 1200px; */
				padding: 15px 0px;
				margin: 0 auto;
				width: 98%;
				background-color: rgba(255, 255, 255, 1);
				min-height: 600px;
				display: block;

			}

			.classify {
				display: flex;
				width: 98%;
				min-height: 50px;
				/* background-color: aqua; */
				margin: 0 auto;
				position: relative;
				align-items: center;
				gap: 6px;
				justify-content: center;
				flex-wrap: nowrap;
			}

			.top {
				position: relative;
				z-index: 2000;
			}

			.classify > a > span {
				width: 44px;
				height: 44px;
				padding: 8px;
				margin: 0px 5px;
				display: inline-block;
				background-color: #27363E;
				border-radius: 5px;
				border: none;
				/* 光标手势 */
				cursor: pointer;
			}

			.classify-search {
				margin-left: 0;
				display: flex;
				align-items: center;
				gap: 8px;
				padding-left: 8px;
				min-width: 0;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2200;
			}

			#series-search-button {
				width: 44px;
				height: 44px;
				padding: 8px;
				border: none;
				border-radius: 5px;
				background-color: #27363E;
				cursor: pointer;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 auto;
			}

			#series-search-button img {
				width: 28px;
				height: 28px;
				display: block;
			}

			.classify-search-panel {
				width: 260px;
				position: relative;
				z-index: 2300;
			}

			#series-search-input {
				width: 100%;
				height: 44px;
				padding: 0 14px;
				border: 1px solid #cdd5df;
				border-radius: 5px;
				outline: none;
				font-size: 14px;
				color: #27363E;
				box-sizing: border-box;
			}

			#series-search-input:focus {
				border-color: #4f75ff;
				box-shadow: 0 0 0 3px rgba(79, 117, 255, 0.14);
			}

			.classify-search-results {
				position: absolute;
				top: calc(100% + 6px);
				left: 0;
				right: 0;
				display: none;
				max-height: 320px;
				overflow-y: auto;
				background-color: #ffffff;
				border: 1px solid #d9e1ea;
				border-radius: 5px;
				box-shadow: 0 12px 24px rgba(17, 24, 39, 0.18);
				z-index: 2400;
			}

			.classify-search-results.is-open {
				display: block;
			}

			.classify-search-result {
				display: block;
				padding: 10px 12px;
				text-align: left;
				text-decoration: none;
				color: #27363E;
				border-bottom: 1px solid #edf2f7;
				background-color: #ffffff;
			}

			.classify-search-result:last-child {
				border-bottom: none;
			}

			.classify-search-result:hover,
			.classify-search-result.is-active {
				background-color: #eef4ff;
			}

			.classify-search-result-title {
				display: block;
				font-weight: 700;
				font-size: 14px;
				line-height: 1.4;
			}

			.classify-search-result-meta {
				display: block;
				margin-top: 4px;
				font-size: 12px;
				line-height: 1.4;
				color: #718096;
			}

			.rating {
				text-align: center;
				flex-wrap: wrap;
				display: flex;
				justify-content: center;
				/* align-items: center; */
				/* flex-direction:column; */
				/* 光标手势 */
			}

			.rating span {
				border: 1.5px solid #333;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 16px;
				width: 65px;
				height: 40px;
				padding: 5px;
				margin: 0px 3px;
				/* 光标手势 */
				cursor: pointer;
			}

			.element {
				text-align: center;
			}

			.element span {
				width: 36px;
				height: 36px;
				padding: 5px;
				margin: 0px 3px;
				display: inline-block;
				background-color: #27363E;
				border-radius: 5px;
				border: none;
				/* 光标手势 */
				cursor: pointer;
			}

			.fate {
				text-align: center;
			}

			.fate span {
				width: 38px;
				height: 38px;
				padding: 4px;
				margin: 0px 2px;
				display: inline-block;
				background-color: #27363E;
				border-radius: 5px;
				border: none;
				/* 光标手势 */
				cursor: pointer;
			}

			.fate span img {
				object-fit: cover;
				max-width: 100%;
				height: auto;
			}

			.bottom {
				display: flex;
				justify-content: center;
				text-align: center;
				width: 100%;
				max-width: 1900px;
				/* 用于设置弹性容器中的项目是单行显示还是多行显示 */
				flex-wrap: wrap;
				z-index: 99;
			}

			.character {
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				width: 290px;
				height: 445px;
				line-height: 2;
				background-color: #27363E;
				color: #eee;
				position: relative;
				text-align: center;
				cursor: pointer;
				display: inline-block;

			}

			.character-link {
				display: inline-block;
				color: inherit;
				text-decoration: none;
			}

			.character-favorite {
				position: absolute;
				top: 12px;
				right: 12px;
				width: 34px;
				height: 34px;
				padding: 0;
				border: 0;
				background: transparent;
				cursor: pointer;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
				transition: transform 0.2s ease, filter 0.2s ease;
			}

			.character-favorite:hover {
				transform: scale(1.08);
				filter: brightness(1.08);
			}

			.character-favorite img {
				width: 28px;
				height: 28px;
				display: block;
			}

			.character[data-favorite="true"] .character-favorite img {
				filter: drop-shadow(0 0 8px rgba(255, 90, 138, 0.4));
			}

			.character1 {
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				width: 540px;
				height: 350px;
				line-height: 2;
				background-color: #27363E;
				color: #eee;
				position: relative;
				text-align: center;
				cursor: pointer;
				display: inline-block;

			}

			.character1[data-favorite="true"] .character-favorite img {
				filter: drop-shadow(0 0 8px rgba(255, 90, 138, 0.4));
			}

			.p {
				display: block;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				unicode-bidi: isolate;
			}

			.character p {
				font-weight: bold;
			}

			.release {
				margin-top: 5px;
				margin-bottom: 5px;
			}

			.fateelement {
				text-align: center;
				flex-wrap: wrap;
				justify-content: center;
			}

			.ValueP {
				font-size: 17px;
				margin-left: 4px;
				margin-right: 4px;
				line-height: 27px;
			}

			.HP {
				height: 36px;
			}

			.HP img {
				top: 7px;
				position: relative;
			}

			.Phys {
				font-weight: bold;
				color: rgb(255, 255, 255);
				font-size: 20px;
			}

			.Quantum {
				font-weight: bold;
				color: rgb(127, 154, 234);
				font-size: 20px;
			}

			.Imaginary {
				font-weight: bold;
				color: rgb(255, 231, 121);
				font-size: 20px;
			}

			.Ice {
				font-weight: bold;
				color: rgb(138, 221, 255);
				font-size: 20px;
			}

			.wind {
				font-weight: bold;
				color: rgb(151, 255, 183);
				font-size: 20px;
			}

			.Fire {
				font-weight: bold;
				color: rgb(255, 139, 119);
				font-size: 20px;
			}

			.Elec {
				font-weight: bold;
				color: rgb(255, 172, 255);
				font-size: 20px;
			}

			.font {
				color: #f29d38;
			}

			.take {
				word-wrap: break-all;
			}


			button {
				/* 清除默认边框 */
				border: 0;
				outline: none;
				/*清除默认背景 */
				background-color: transparent;
			}

			/* 遮罩层 */
			#overlay {
				position: fixed;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				font-size: 16px;
				z-index: 5000;
				/* IE9以下不支持rgba模式 */
				background-color: rgba(0, 0, 0, 0.5);
				/* 兼容IE8及以下 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
				display: none;
			}

			/* 弹出框主体 */
			.popup {
				background-color: #ffffff;
				max-width: 400px;
				min-width: 200px;
				height: 260px;
				border-radius: 5px;
				margin: 100px auto;
				text-align: center;
				z-index: 9999;
			}

			/* 弹出框的标题 */
			.popup_title {
				height: 60px;
				line-height: 60px;
				border-bottom: solid 1px #cccccc;
				color: #27363E;
				/* z-index: 9999; */
			}

			/* 弹出框的内容 */
			.popup_content {
				height: 50px;
				line-height: 50px;
				padding: 15px 20px;
				/* z-index: 9999; */
			}

			/* 弹出框的按钮栏 */
			.popup_btn {
				padding-bottom: 10px;
				/* z-index: 9999; */
			}

			/* 弹出框的按钮 */
			.popup_btn button {
				color: #778899;
				width: 40%;
				height: 40px;
				cursor: pointer;
				border: solid 1px #cccccc;
				border-radius: 5px;
				margin: 5px 10px;
				color: #ffffff;
				background-color: #337ab7;
				/* z-index: 9999; */
			}

			.musicnav {
				display: flex;
				width: 98%;
				height: 50px;
				/* background-color: aqua; */
				margin: 0 auto;
				/* text-align: center; */
				justify-content: center;
			}

			.musicbox {
				width: 98%;
				overflow: hidden;
				margin: 0 auto;
				display: flex;
				/* justify-content: center; */
				text-align: center;
			}

			.musiccontent {
				width: 98%;
				/* height: 650px; */
				flex-shrink: 0;
				margin: 0 auto;
				/* justify: conte;nt: center; */
				/* text-align: center; */
			}

			/* 切换 */
			.musicnav {
				display: flex;
				width: 98%;
				height: 50px;
				/* background-color: aqua; */
				margin: 0 auto;
				/* text-align: center; */
				justify-content: center;
			}

			.musicbox {
				width: 98%;
				overflow: hidden;
				margin: 0 auto;
				display: flex;
				/* justify-content: center; */
				text-align: center;
			}

			.musiccontent {
				width: 98%;
				/* height: 650px; */
				flex-shrink: 0;
				margin: 0 auto;

				/* justify: conte;nt: center; */
				/* text-align: center; */
			}


			.back {
				font-size: 24px;
				color: red;
				text-align: center;
				margin: 5px auto;
				padding: 5px auto;
				/* 光标手势 */
				cursor: pointer;
				font-family: 华文琥珀;
			}

			.toplc {
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				width: 98%;
				height: 100%;
				line-height: 2;
				background-color: #27363E;
				color: #eee;
				/* position: relative; */
				text-align: center;
				cursor: pointer;
				display: inline-block;
			}

			.illtoplc {
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				width: 98%;
				height: 100%;
				line-height: 2;
				background-color: #27363E;
				color: #eee;
				/* position: relative; */
				text-align: center;
				/* cursor: pointer; */
				display: inline-block;
			}

			.leftlc {
				display: flex;
				float: left;
				justify-content: center;
				flex-direction: column;
				width: 30%;
				position: relative;
				text-align: center;
			}

			.leftlc img {
				/* padding: ; */
				width: 250px;
				height: 348px;
				text-align: center;
				justify-content: center;
				align-items: center;
				margin: 150px auto;
			}

			.rightlc {}

			.rightlc p {}

			.titlelc {
				/* padding-right:  ; */
				font-weight: bold;
				float: right;
				width: 70%;
				margin: 40px auto 10px;
			}

			.titlelc p {
				font-size: 20px;
				font-family: ;

			}

			.describe {
				width: 80%;
				/* margin-top: 10px; */
				word-wrap: break-word;
				font-size: 16px;
			}

			.describe p {
				text-align: left;
				word-wrap: break-word;

			}

			.italic {
				Font-style: italic;
			}

			.nature {
				/* width: 0%; */
				text-align: left;
				margin-top: 10px;
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 20px;
			}

			.nature span {
				margin: auto 130px;
			}

			.nature img {
				top: 11px;
				position: relative;
				width: 36px;
				height: 36px;
			}

			.middlelc {
				width: 98%;
				/* height: 300px; */
				background-color: #27363E;
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				color: #eee;
			}

			.midtit {
				text-align: left;
				font-weight: bold;
				font-size: 25px;
				margin: 10px;
			}

			.middes {
				word-wrap: break-word;
				margin: 20px 10px 10px;
				font-size: 18px;
			}

			.middess {
				word-wrap: break-word;
				margin: 20px 0px 10px;
				font-size: 18px;
			}

			.orange {
				color: #f29e38;
				font-weight: bold;
			}

			.bold {
				font-weight: bold;
			}

			.bottomlc {
				width: 98%;
				/* height: 300px; */
				background-color: #27363E;
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				color: #eee;
				height: 120px;
				justify-content: center;
				align-items: center;
			}

			.botleft {
				/* display: flex; */
				float: left;
				margin: auto 0;/ align-items: center;
				margin-top: 35px;
				margin-left: 300px;
				/* width: 40%; */
			}

			.botleft img {
				padding: 0px 40px;
			}

			.botleft1 {
				/* display: flex; */
				float: left;
				margin: auto 0;/ align-items: center;
				margin-top: 35px;
				margin-left: 30px;
				/* width: 40%; */
			}

			.botleft1 img {
				padding: 0px 40px;
			}

			.botright {
				/* display: flex; */
				float: left;
				margin: auto 0;
				align-items: center;
				margin-top: 35px;
				margin-right: 30px;
				margin-left: 150px;
				/* width: 40%; */
			}

			.botright img {
				padding: 0px 40px;
			}

			.botright1 {
				/* display: flex; */
				float: left;
				margin: auto 0;
				align-items: center;
				margin-top: 35px;
				/* margin-right: px; */
				/* width: 40%; */
			}

			.botright1 img {
				padding: 0px 40px;
			}

			.botspan {
				margin-left: -60px;
				font-weight: bold;
			}

			.natural-position {
				text-align: left;
				margin: 0;
				padding: 20px;
			}

			.illustration {}

			.illValueP {
				font-size: 27px;
				margin-left: 4px;
				margin-right: 4px;
				line-height: 27px;
				width: 98%;
			}

			.illHP {
				height: 50px;
			}

			.illHP img {
				top: 7px;
				position: relative;
				height: 36px;
				width: 36px;
			}

			.illmid {
				width: 98%;
				/* height: 300px; */
				background-color: #27363E;
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				color: #eee;
			}

			.illmid1 {
				width: 98%;
				/* height: 300px; */
				background-color: #27363E;
				border-radius: 5px;
				padding: 12px 14px 17px;
				margin: 3px 5px 3px;
				color: #eee;
				line-height: 2;
			}

			.illtext {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.illdes {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				word-wrap: break-word;
				margin: 0px 10px 10px;
			}

			.illdess {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				word-wrap: break-word;
				margin: 0px 10px 0px;
			}

			.illdes img {
				width: 36px;
				height: 36px;
			}

			._30 {
				width: 30px;
				height: 30px;
			}

			._50 {
				width: 50px;
				height: 50px;
			}

			._36 {
				width: 36px;
				height: 36px;
			}

			._200 {
				width: 200px;
				height: 200px;
			}

			._160 {
				width: 160px;
				height: 160px;
			}

			._250349 {
				width: 250px;
				height: 349px;
			}

			._76 {
				width: 76px;
				height: 76px;
			}

			._500 {
				width: 500px;
				height: 500px;
			}

			._8094 {
				width: 80px;
				height: 94px;
			}

			._6475 {
				width: 64px;
				height: 75px;
			}

			._10790 {
				width: 107px;
				height: 90px;
			}

			.middle {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				word-wrap: break-word;
				margin: 0px 10px 10px;
			}

			.name {
				width: 340px;
				text-align: center;
				margin: 15px;
				border: 1px solid #333;
				padding: 10px 0;
				border-radius: 5px;
				cursor: pointer;
				font-size: 13px;
			}

			.name1 {
				width: 280px;
				text-align: center;
				margin: 15px;
				border: 1px solid #333;
				padding: 10px 0;
				border-radius: 5px;
				cursor: pointer;
				font-size: 13px;
			}

			.name2 {
				width: 280px;
				text-align: center;
				margin: 15px;
				border: 1px solid #333;
				padding: 10px 0;
				border-radius: 5px;
				cursor: pointer;
				font-size: 13px;
				font-style: italic;
				font-weight: bolder;
				/* font-family: YEFONT Color Fonts0831 Color1; */
				/* 设置背景颜色从左到右蓝色到金黄色 */
				background: linear-gradient(to right, blue, goldenrod);
				/* 渐变颜色裁剪为文本形状 */
				-webkit-background-clip: text;
				/* 文字颜色为透明 */
				color: transparent;
			}

			.italic {
				font-style: italic;
			}

			.voice {
				cursor: pointer;
				margin-top: 10px;
				width: 30px;
				height: 30px;
			}

			.illmid[style*="display: flex"]:has(.voice) {
				display: grid !important;
				grid-template-columns: minmax(260px, 40%) repeat(4, minmax(90px, 1fr));
				align-items: center;
				column-gap: 24px;
				row-gap: 12px;
			}

			.illmid[style*="display: flex"]:has(.voice)>div {
				width: auto !important;
				margin: 0 !important;
			}

			.illmid[style*="display: flex"]:has(.voice)>div:first-child {
				text-align: left;
			}

			.illmid[style*="display: flex"]:has(.voice)>div:not(:first-child) {
				text-align: center;
			}

			.warp {
				width: 96%;
				margin: 0 auto;
				text-align: center;
			}

			.one {
				background-color: #27363E;
				display: inline-block;
				width: 48%;
				margin: 15px 15px;
			}

			.two {
				background-color: #27363E;
				display: inline-block;
				width: 75%;
				margin: 15px 15px;
			}

			.star5 {
				width: 40%;
				display: inline-block;
			}

			.star5 p {
				color: white;
				margin: 10px;
				font-size: 17px;
				font-weight: bold;
			}

			.dropbtn {
				background-color: #4CAF50;
				color: white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
			}

			.dropdown {
				position: relative;
				display: inline-block;
				overflow: auto;
				height: 400px;
				width: 85px;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 60px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
				z-index: 1;
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}

			.dropdown-content a:hover {
				background-color: #f1f1f1
			}

			.show {
				display: block;
			}

			/* 粘性导航栏 */
			.sticky-nav {
				position: sticky;
				top: 0;
				z-index: 1000;
				background-color: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(10px);
				padding: 10px 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				gap: 10px;
			}
/* === Enhanced hover effects for filter buttons === */
.rating span {
	transition: all 0.2s ease;
}
.rating span:hover {
	border-color: #f29e38;
	color: #f29e38;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(242, 158, 56, 0.3);
}
.element span {
	transition: all 0.2s ease;
}
.element span:hover {
	background-color: #3a5068;
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.fate span {
	transition: all 0.2s ease;
}
.fate span:hover {
	background-color: #3a5068;
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* === Enhanced character card hover effects === */
.character {
	transition: all 0.25s ease;
}
.character:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}