/* ========================================
   全局响应式适配 - 所有页面共用
   ======================================== */

/* ========================================
   手机端 (≤768px)
   ======================================== */
@media screen and (max-width: 768px) {

	/* ---- 导航栏 - 垂直排列 ---- */
	.nav {
		flex-direction: column !important;
		padding: 10px !important;
		gap: 10px !important;
	}

	.nav-logo img {
		height: 36px !important;
	}

	.nav-menu {
		width: 100% !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	.nav-menu li a {
		font-size: 14px !important;
		padding: 10px 14px !important;
	}

	/* 旧版 float 导航 - 取消浮动，水平排列 */
	.nav ul {
		width: 100% !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	.nav ul li {
		float: none !important;
		width: auto !important;
	}

	.nav ul li a {
		font-size: 13px !important;
		padding: 10px 12px !important;
	}

	/* ---- 容器 ---- */
	.box {
		width: 100% !important;
		height: auto !important;
		margin: 20px auto !important;
	}

	/* ---- 右侧固定导航 - 隐藏 ---- */
	.table,
	.right {
		display: none !important;
	}

	/* ---- 左侧固定菜单 - 隐藏 ---- */
	.navigation {
		display: none !important;
	}

	/* ---- 音乐按钮 ---- */
	.mini-button {
		right: 10px !important;
		bottom: 20px !important;
		top: auto !important;
		z-index: 1000 !important;
	}

	.mini-button img {
		width: 40px !important;
		height: 40px !important;
	}

	/* ---- 底部信息 ---- */
	footer,
	.copyright,
	hr + p[style*="text-align"] {
		font-size: 11px !important;
		padding: 0 10px !important;
	}

	/* ---- 表格横向滚动 ---- */
	table {
		display: block !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
		width: 100% !important;
	}

	/* ---- 图片自适应 ---- */
	img {
		max-width: 100% !important;
	}

	.carousel-container .carousel-img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.str-role .img-role > img,
	.str-role .img-role > a > img {
		width: 100px !important;
		height: 100px !important;
		max-width: 100px !important;
		flex: 0 0 120px !important;
		object-fit: contain !important;
		object-position: center !important;
		transform: scale(1.3) !important;
		transform-origin: center center !important;
	}

	/* ========================================
	   音乐页 (music.html) 适配
	   ======================================== */

	/* 歌曲容器 - 纵向堆叠代替横向 flex */
	.musicbox {
		flex-direction: column !important;
		overflow: visible !important;
		width: 100% !important;
		height: auto !important;
	}

	.musiccontent {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		flex-shrink: 1 !important;
		padding: 10px !important;
	}

	/* 歌词内容区 - 放上面 */
	.musiccontent .content {
		float: none !important;
		width: 100% !important;
		margin: 10px 0 !important;
		order: 2 !important;
	}

	/* 歌曲标题 - 缩小 */
	.musiccontent span {
		font-size: 22px !important;
		display: block !important;
		text-align: center !important;
	}

	/* 歌词文本框 */
	.musiccontent textarea {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 12px !important;
	}

	/* 唱片图片区 - 放下面 */
	.musiccontent .img {
		float: none !important;
		width: 220px !important;
		max-width: 70% !important;
		margin: 20px auto 10px !important;
		position: relative !important;
		order: 1 !important;
		border-radius: 50% !important;
	}

	/* 唱片底座 */
	.musiccontent .img-c {
		position: static !important;
		text-align: center !important;
	}

	.musiccontent .img-c img {
		width: 180px !important;
		max-width: 80% !important;
	}

	/* 旋转唱片 */
	.musiccontent .img-img {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 160px !important;
		margin: 0 auto !important;
	}

	.musiccontent .img-img img {
		width: 100% !important;
	}

	/* 音频播放器 */
	.audios {
		position: static !important;
		width: 90% !important;
		max-width: 350px !important;
		margin: 15px auto !important;
		left: auto !important;
		top: auto !important;
	}

	/* 歌曲切换导航按钮 */
	.musicnav {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		width: 100% !important;
		height: auto !important;
		gap: 4px !important;
		padding: 5px !important;
	}

	.musicnav a {
		text-decoration: none !important;
	}

	.musicnav button {
		width: auto !important;
		min-width: 55px !important;
		height: 32px !important;
		font-size: 11px !important;
		padding: 4px 8px !important;
		margin: 0 !important;
		border-radius: 16px !important;
	}

	/* 底部信息栏 */
	.clear {
		position: static !important;
		margin-top: 20px !important;
		width: 100% !important;
		height: auto !important;
		padding: 10px !important;
	}

	.clear ul {
		padding-right: 10px !important;
		text-align: center !important;
	}

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

	/* ========================================
	   影视页 (movie.html) 适配
	   ======================================== */

	/* 子导航 */
	.mov-nav ul {
		margin-left: 0 !important;
		text-align: center !important;
		padding: 0 5px !important;
	}

	.mov-nav li {
		margin: 6px 4px !important;
	}

	.mov-nav li a {
		padding: 6px 10px !important;
		font-size: 11px !important;
	}

	/* 电影列表 */
	.mov-list ul {
		height: auto !important;
	}

	.mov-list li {
		width: 44% !important;
		max-width: none !important;
		height: auto !important;
		margin: 10px 3% !important;
		vertical-align: top !important;
	}

	.mov-list img {
		width: 100% !important;
		height: auto !important;
		max-width: 160px !important;
		margin: 0 auto !important;
	}

	.mov-list ul p {
		font-size: 11px !important;
		padding: 4px 2px !important;
	}

	/* ========================================
	   游戏页 (game.html) 适配补充
	   ======================================== */

	/* 游戏区块 - 已由 game.html 内置样式处理，此处补充 */
	.main>div {
		flex: 1 1 33.33% !important;
		min-width: 100px !important;
		padding: 10px 5px !important;
	}

	.main>div img:not(.hover-bg) {
		width: 50px !important;
		height: 50px !important;
		margin-bottom: 8px !important;
	}

	.main>div p {
		font-size: 13px !important;
	}

	.main>div:nth-child(1)::after,
	.main>div:nth-child(2)::after,
	.main>div:nth-child(3)::after,
	.main>div:nth-child(4)::after {
		display: none !important;
	}
}


/* ========================================
   平板端 (769px ~ 1024px)
   ======================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

	.carousel-container .carousel-img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.str-role .img-role > img,
	.str-role .img-role > a > img {
		width: 108px !important;
		height: 108px !important;
		max-width: 108px !important;
		flex: 0 0 128px !important;
		object-fit: contain !important;
		object-position: center !important;
		transform: scale(1.35) !important;
		transform-origin: center center !important;
	}

	/* 导航 */
	.nav {
		gap: 14px !important;
		padding: 0 14px !important;
	}

	.nav-logo img {
		height: 44px !important;
	}

	.nav-menu {
		flex: 1 !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		min-width: 0 !important;
	}

	.nav-menu li a {
		padding: 15px clamp(16px, 3.5vw, 30px) !important;
		font-size: 17px !important;
	}

	.nav ul li a {
		padding: 15px clamp(16px, 3.5vw, 30px) !important;
		font-size: 17px !important;
	}

	/* 容器 */
	.box {
		width: 95% !important;
		height: auto !important;
		max-width: 960px !important;
	}

	/* 隐藏元素 */
	.right,
	.table,
	.navigation {
		display: none !important;
	}

	.mini-button {
		right: 15px !important;
		bottom: 20px !important;
		top: auto !important;
	}

	/* ---- 音乐页 平板 ---- */
	.musicbox {
		width: 100% !important;
	}

	.musiccontent {
		width: 100% !important;
		height: auto !important;
	}

	.musiccontent .content {
		float: right !important;
		width: 45% !important;
		margin-right: 10px !important;
	}

	.musiccontent .img {
		float: left !important;
		width: 45% !important;
		height: 260px !important;
		margin-top: 30px !important;
		position: relative !important;
	}

	.musiccontent .img-c {
		position: absolute !important;
		left: 50% !important;
		top: 60px !important;
		width: 150px !important;
		transform: translateX(-50%) !important;
		z-index: 2 !important;
	}

	.musiccontent .img-c img {
		width: 150px !important;
		max-width: none !important;
		height: 150px !important;
		object-fit: cover !important;
		border-radius: 50% !important;
	}

	.musiccontent .img-img {
		position: absolute !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 220px !important;
		top: 25px !important;
		z-index: 1 !important;
	}

	.musiccontent .img-img img {
		width: 220px !important;
		max-width: none !important;
		height: 220px !important;
	}

	.musiccontent span {
		font-size: 32px !important;
	}

	.audios {
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 280px !important;
		top: 240px !important;
	}

	.musicnav {
		width: 100% !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		height: auto !important;
		gap: 4px !important;
	}

	.musicnav button {
		width: auto !important;
		min-width: 65px !important;
		height: 38px !important;
		font-size: 12px !important;
		padding: 4px 10px !important;
	}

	/* ---- 影视页 平板 ---- */
	.mov-list li {
		width: 180px !important;
		margin-left: 10px !important;
	}

	.mov-nav ul {
		margin-left: 20px !important;
	}

	/* ---- 游戏页 平板 ---- */
	.main>div img:not(.hover-bg) {
		width: 65px !important;
		height: 65px !important;
	}

	.main>div p {
		font-size: 15px !important;
	}
}


/* ========================================
   极小屏 (≤400px) 额外优化
   ======================================== */
@media screen and (max-width: 400px) {

	/* 导航更紧凑 */
	.nav ul li a,
	.nav-menu li a {
		font-size: 11px !important;
		padding: 8px 6px !important;
	}

	/* 歌曲标题更小 */
	.musiccontent span {
		font-size: 18px !important;
	}

	/* 唱片更小 */
	.musiccontent .img {
		width: 160px !important;
	}

	.musiccontent .img-c img {
		width: 130px !important;
	}

	.musiccontent .img-img {
		width: 120px !important;
	}

	/* 电影卡片单列 */
	.mov-list li {
		width: 80% !important;
		margin: 10px auto !important;
	}

	/* 游戏区块两列 */
	.main>div {
		flex: 1 1 50% !important;
	}

	/* 按钮更紧凑 */
	.musicnav button {
		min-width: 45px !important;
		height: 28px !important;
		font-size: 10px !important;
		padding: 2px 6px !important;
	}
}

/* ========================================
   星穹铁道角色页 (StarRailrole.html) 手机端
   ======================================== */
@media screen and (max-width: 768px) {

	/* ---- body 宽度修正 ---- */
	body {
		width: 100% !important;
	}

	/* ---- 标题 ---- */
	h3 {
		margin: 30px auto 15px !important;
	}

	h3 .title {
		font-size: 24px !important;
	}

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

	/* ---- 菜单按钮 ---- */
	#showPopup img {
		width: 32px !important;
		height: auto !important;
	}

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

	/* ---- 顶部筛选栏全显示 ---- */
	.top {
		display: block !important;
	}

	/* ---- 分类导航图标 (classify) ---- */
	.classify {
		flex-wrap: wrap !important;
		height: auto !important;
		gap: 6px !important;
		justify-content: center !important;
	}

	.classify > a > span {
		width: 36px !important;
		height: 36px !important;
		padding: 5px !important;
		margin: 0 2px !important;
	}

	.classify > a > span img {
		width: 26px !important;
		height: 26px !important;
	}

	.classify-search {
		margin-left: 0 !important;
		padding-left: 0 !important;
		width: 100% !important;
		justify-content: center !important;
		position: static !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
	}

	#series-search-button {
		width: 36px !important;
		height: 36px !important;
		padding: 5px !important;
	}

	#series-search-button img {
		width: 24px !important;
		height: 24px !important;
	}

	.classify-search-panel {
		width: min(100%, 320px) !important;
	}

	#series-search-input {
		height: 36px !important;
		font-size: 13px !important;
	}

	/* ---- 稀有度筛选 (rating) ---- */
	.rating {
		flex-wrap: wrap !important;
		gap: 6px !important;
	}

	.rating span {
		width: 55px !important;
		height: 34px !important;
		font-size: 14px !important;
		padding: 3px !important;
	}

	/* ---- 元素筛选 (element) ---- */
	.element {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 4px !important;
	}

	.element span {
		width: 30px !important;
		height: 30px !important;
		padding: 3px !important;
		margin: 0 !important;
	}

	.element span img {
		width: 24px !important;
		height: 24px !important;
	}

	/* ---- 命途筛选 (fate) ---- */
	.fate {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 4px !important;
	}

	.fate span {
		width: 32px !important;
		height: 32px !important;
		padding: 3px !important;
		margin: 0 !important;
	}

	.fate span img {
		width: 26px !important;
		height: 26px !important;
	}

	/* ---- 角色卡片容器 ---- */
	.bottom {
		width: 100% !important;
		justify-content: center !important;
		gap: 6px !important;
	}

	/* ---- 角色卡片 (小卡) ---- */
	.character {
		width: 46% !important;
		max-width: 165px !important;
		height: auto !important;
		padding: 8px 6px 12px !important;
		margin: 2px !important;
	}

	.character img {
		max-width: 100% !important;
		height: auto !important;
	}

	.character .character-favorite {
		top: 8px !important;
		right: 8px !important;
		width: 28px !important;
		height: 28px !important;
	}

	.character .character-favorite img {
		width: 24px !important;
		height: 24px !important;
	}

	.character p {
		font-size: 13px !important;
	}

	.character .Phys,
	.character .Quantum,
	.character .Imaginary,
	.character .Ice,
	.character .wind,
	.character .Fire,
	.character .Elec {
		font-size: 15px !important;
	}

	.character .ValueP {
		font-size: 12px !important;
		line-height: 20px !important;
	}

	.character .HP {
		height: 24px !important;
	}

	.character .HP img {
		width: 18px !important;
		height: 18px !important;
		top: 4px !important;
	}

	/* ---- 角色卡片 (大卡 / 光锥卡) ---- */
	.character1 {
		width: 95% !important;
		max-width: 400px !important;
		height: auto !important;
		padding: 10px !important;
		margin: 5px auto !important;
	}

	.character1 img {
		max-width: 100% !important;
		height: auto !important;
	}

	.character1 .character-favorite {
		top: 8px !important;
		right: 8px !important;
		width: 28px !important;
		height: 28px !important;
	}

	.character1 .character-favorite img {
		width: 24px !important;
		height: 24px !important;
	}

	/* ---- 弹窗 ---- */
	#overlay .popup {
		width: 85% !important;
		max-width: 300px !important;
		height: auto !important;
		min-height: 280px !important;
		margin: 80px auto !important;
	}

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

	.popup_btn button {
		width: 70% !important;
		height: 36px !important;
		font-size: 14px !important;
		margin: 4px 10px !important;
	}

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

	/* ---- 详情页: 光锥/角色布局改为上下排列 ---- */
	.leftlc {
		float: none !important;
		width: 100% !important;
	}

	.leftlc img {
		width: 180px !important;
		height: auto !important;
		margin: 20px auto !important;
	}

	.titlelc {
		float: none !important;
		width: 100% !important;
		margin: 10px auto !important;
		text-align: center !important;
	}

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

	.describe {
		width: 95% !important;
		font-size: 14px !important;
		margin: 0 auto !important;
	}

	.nature span {
		margin: auto 10px !important;
		font-size: 14px !important;
	}

	.nature img {
		width: 24px !important;
		height: 24px !important;
		top: 6px !important;
	}

	/* ---- 详情页: 中部技能区 ---- */
	.illmid,
	.illmid1 {
		padding: 10px !important;
		margin: 5px 2px !important;
	}

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

	.middes,
	.middess {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin: 10px 5px !important;
	}

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

	/* ---- 详情页: 底部素材区 ---- */
	.bottomlc {
		height: auto !important;
		padding: 10px !important;
	}

	.botleft,
	.botleft1,
	.botright,
	.botright1 {
		float: none !important;
		margin: 10px auto !important;
		text-align: center !important;
	}

	.botleft img,
	.botleft1 img,
	.botright img,
	.botright1 img {
		padding: 0 15px !important;
		width: 28px !important;
		height: auto !important;
	}

	.botspan {
		margin-left: 0 !important;
		font-size: 12px !important;
	}

	/* ---- 详情页: 属性数值 ---- */
	.illValueP {
		font-size: 18px !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 8px !important;
	}

	.illHP {
		height: 36px !important;
		font-size: 14px !important;
	}

	.illHP img {
		width: 24px !important;
		height: 24px !important;
		top: 5px !important;
	}

	/* ---- 详情页: 插图 ---- */
	.illustration img {
		max-width: 260px !important;
		width: 100% !important;
		height: auto !important;
	}

	/* ---- 详情页: 技能图标 ---- */
	._50 { width: 40px !important; height: 40px !important; }
	._30 { width: 24px !important; height: 24px !important; }
	._36 { width: 28px !important; height: 28px !important; }
	._200 { width: 80px !important; height: auto !important; }
	._160 { width: 80px !important; height: auto !important; }
	._250349 { width: 160px !important; height: auto !important; }
	._500 { width: 200px !important; height: auto !important; }
	._76 { width: 40px !important; height: 40px !important; }
	._8094 { width: 50px !important; height: auto !important; }
	._6475 { width: 40px !important; height: auto !important; }
	._10790 { width: 60px !important; height: auto !important; }

	/* ---- 详情页: 星魂横向排列改为纵向 ---- */
	.illmid[style*="display: flex"] {
		flex-direction: column !important;
		align-items: center !important;
	}

	/* ---- 详情页: 语音演员 2x2 ---- */
	#voice>div[style*="width: 98%"]>div {
		width: 45% !important;
		margin: 5px !important;
	}

	/* ---- 详情页: 语音按钮 ---- */
	.voice {
		width: 26px !important;
		height: 26px !important;
	}

	.illmid[style*="display: flex"]:has(.voice) {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 8px !important;
		align-items: start !important;
	}

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

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

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

	/* ---- 跃迁/光锥页: 响应式 ---- */
	.one,
	.two {
		width: 95% !important;
		margin: 10px auto !important;
		display: block !important;
	}

	.star5 {
		width: 90% !important;
	}

	.warp {
		width: 100% !important;
	}

	/* ---- name 标签 ---- */
	.name,
	.name1,
	.name2 {
		width: 90% !important;
		max-width: 300px !important;
		margin: 8px auto !important;
		font-size: 12px !important;
	}

	/* ---- 下拉框 ---- */
	.dropdown {
		width: 65px !important;
		height: 300px !important;
	}

	/* ---- 粘性导航 ---- */
	.sticky-nav {
		flex-wrap: wrap !important;
		gap: 6px !important;
		padding: 8px 5px !important;
	}
}

/* ========================================
   星穹铁道角色页 平板端 (769px ~ 1024px)
   ======================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

	body {
		width: 100% !important;
	}

	h3 .title {
		font-size: 32px !important;
	}

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

	.main {
		width: 100% !important;
	}

	/* 分类导航 */
	.classify {
		flex-wrap: wrap !important;
		height: auto !important;
		gap: 6px !important;
	}

	.classify > a > span {
		width: 40px !important;
		height: 40px !important;
		padding: 6px !important;
	}

	/* 筛选按钮 */
	.element,
	.fate {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	/* 角色卡片容器 */
	.bottom {
		width: 100% !important;
		justify-content: center !important;
	}

	/* 角色卡片 - 平板3列 */
	.character {
		width: 30% !important;
		max-width: 220px !important;
		height: auto !important;
		padding: 10px 8px 14px !important;
	}

	.character img {
		max-width: 100% !important;
		height: auto !important;
	}

	.character .character-favorite {
		top: 10px !important;
		right: 10px !important;
		width: 30px !important;
		height: 30px !important;
	}

	.character .character-favorite img {
		width: 25px !important;
		height: 25px !important;
	}

	.character .ValueP {
		font-size: 14px !important;
	}

	/* 大卡片 */
	.character1 {
		width: 70% !important;
		max-width: 500px !important;
		height: auto !important;
	}

	.character1 .character-favorite {
		top: 10px !important;
		right: 10px !important;
		width: 30px !important;
		height: 30px !important;
	}

	.character1 .character-favorite img {
		width: 25px !important;
		height: 25px !important;
	}

	/* 详情页 */
	.leftlc {
		width: 35% !important;
	}

	.leftlc img {
		width: 200px !important;
		height: auto !important;
		margin: 80px auto !important;
	}

	.titlelc {
		width: 65% !important;
	}

	.describe {
		width: 90% !important;
	}

	/* 图标缩放 */
	._250349 { width: 200px !important; height: auto !important; }
	._500 { width: 350px !important; height: auto !important; }
	._160 { width: 120px !important; height: auto !important; }
	._200 { width: 140px !important; height: auto !important; }
}