@charset "utf-8";

@media screen and (max-width:900px) {
	.header {
		display: none
	}

	#vd {
		opacity: .5
	}

	.btn {
		backdrop-filter: unset
	}

	.la,.lb,.li {
		display: none!important
	}

	.lb {
		width: 22px!important;
		height: 22px!important;
		margin: 0 8px!important;
		padding: 0!important
	}

	.sheet-title-bar {
		top: unset;
		position: unset;
		text-align: center;
		line-height: 28px;
		height: 28px
	}

	.login-btn {
		padding: 2px 2px!important;
		border-radius: 4px!important;
		margin: 0 2px!important;
		display: block!important;
		float: unset!important;
		background: rgba(235,235,235,.05)!important
	}

	.custom {
		padding: 0 8px!important;
		width: max-content!important;
		background: rgba(255,255,255,.05)!important;
		height: 18px!important;
		border-radius: 4px!important
	}

	.center {
		top: 0;
		bottom: 80px
	}

	.fotinfo {
		display: none
	}

	.fu1 {
		display: none
	}

	.white_content {
		display: none!important
	}

	.btn[data-action=player] {
		display: flex
	}

	.btn-bar {
		height: 35px;
		right: 0;
		z-index: 999
	}

	.btn-box {
		background-color: rgb(255,255,255,.1);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		backdrop-filter: blur(1000px)
	}

	.active {
		background: rgb(255,255,255,.2)!important
	}

	.gdid {
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 35px;
		float: left;
		margin-left: -5px;
		width: 20%
	}

	.btn {
		margin: 0;
		padding: 0;
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		float: left;
		border: none;
		text-align: center;
		line-height: 35px;
		color: #fff;
		border-radius: 0;
		background: unset
	}

	.login-btn {
		background: unset
	}

	.btn:hover {
		border: none;
		color: #fff
	}

	.btn-box .active:after {
		content: '';
		display: block;
		margin-top: -3px;
		border-radius: 0
	}

	.uidbutton:hover {
		border: 0!important
	}

	.data-box {
		top: 60px
	}

	#sheet {
		top: 6px
	}

	.data-area {
		top: 34px
	}

	.data-area {
		right: 0
	}

	/* 隐藏PC端的图标和按钮 */
	.icon-delete {
		display: none !important;
	}
	
	.list-icon {
		display: none !important;
	}

	.sheetlistname {
		margin-top: -50px
	}

	.music-name-cult {
		padding-right: 0!important
	}

	.music-album {
		margin-right: 30px
	}

	.list-mobile-menu {
		position: absolute;
		display: block !important;
		width: 24px;
		height: 24px;
		right: 8px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 2;
		cursor: pointer;
		opacity: 0.8;
		transition: opacity 0.3s ease;
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3ccircle cx='5' cy='12' r='2'/%3e%3ccircle cx='12' cy='12' r='2'/%3e%3ccircle cx='19' cy='12' r='2'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	
	.list-mobile-menu:hover {
		opacity: 1;
	}

	.list-head {
		max-width: calc(100% - 20px)
	}

	.con-btn {
		width: 120px
	}

	.progress {
		width: auto;
		margin-left: 134px;
		margin-right: 20px;
		height: 100%;
		position: relative
	}

	.vol {
		display: none
	}

	.player {
		display: none;
		width: 100%
	}

	.lyric-name {
		margin-top: 10px
	}

	.cover {
		width: 100px;
		height: 100px;
		margin-top: 45px
	}

	.mc {
		width: 100%;
		height: 100%;
		margin-top: 0
	}

	.mc:after {
		width: 170%;
		height: 170%
	}

	.music-cover {
		width: 90px;
		height: 90px;
		border: 10px solid rgba(255,255,255,.1)
	}

	.full-player .music-cover {
		width: 90px;
		height: 90px
	}

	.full-player .lyric-name {
		margin-top: 10px
	}

	.lyric {
		top: 160px;
		padding: 10px 0
	}

	#lyric .lplaying {
		font-size: 18px!important;
		letter-spacing: 0!important
	}

	#lyric>li {
		line-height: 30px;
		font-size: 14px
	}

	.full-player .lplaying>.tlyric {
		letter-spacing: 0
	}

	/* 逐字歌词行：行本身不用彩色渐变，翻译行恢复原版彩虹渐变（不跟随主行绿色逐字填充）（移动端） */
	#lyric .lrc-item.has-wrc.lplaying {
		background: none;
		color: #fff;
		filter: none
	}

	#lyric .lrc-item.has-wrc.lplaying .tlyric {
		background: linear-gradient(to right,#fff 25%,#37d8ff 40%,#ffdd5b 50%,#ff5151 80%) !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)) !important;
		color: transparent !important
	}

	/* 逐字歌词 - 酷狗式逐字填充（移动端）：每个字独立背景裁剪，跨行天然连续 */
	.lrc-item.has-wrc.lplaying .wrc-word {
		background-image: linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.85));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.lrc-item.has-wrc.lplaying .wrc-word.wrc-done {
		background-image: linear-gradient(90deg,#19f37c,#19f37c);
	}

	.lrc-item.has-wrc.lplaying .wrc-word.wrc-active {
		background-image: linear-gradient(90deg,#19f37c 0,#19f37c var(--wrc-progress, 0%),rgba(255,255,255,.85) var(--wrc-progress, 0%),rgba(255,255,255,.85) 100%);
	}

	#lyric>li .tlyric {
		font-size: 14px
	}

	.sheet-item {
		width: calc(100% / 9 - 16px)
	}

	.wallpaper-container {
		width: 90%;
		border-radius: 10px 0 10px 10px
	}

	.wallpaper-container:before {
		border-radius: 0 0 10px 10px
	}

	.wallbtn {
		width: 100%
	}

	.disabled:before {
		font-size: .55rem
	}

	.cancel-btn,.close-btn {
		margin: 4px 4px;
		padding: 4px 8px
	}

	.wallinfo {
		padding: 4px 10px;
		margin: 4px 0
	}

	.footer {
		bottom: 0
	}

	.btn-bar,.container,.data-area,.footer .container,.player {
		background: unset;
		border-radius: 0
	}

	.active:before {
		background: rgba(255,255,255,.3);
		backdrop-filter: blur(2px)
	}
}

@media screen and (max-width:700px) {
	.sheetlistname {
		left: 0;
		flex-wrap: wrap;
		justify-content: center;
		overflow: hidden;
		padding: 0;
		width: 100%
	}

	.listname {
		margin: 0 4px;
		width: 180px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

	.sheetplay {
		margin: 0 5px
	}

	.sheet-item {
		width: calc(100% / 7 - 16px)
	}
}

@media screen and (max-width:600px) {
	.sheet-item {
		width: calc(100% / 6 - 16px)
	}

	.lyric-name {
		font-size: 14px;
		line-height: 18px
	}

	#search-area {
		padding: 25px 8px
	}

	.layui-layer {
		width: 350px
	}
	/* MV弹窗不锁死宽度，由JS全屏控制 */
	.layui-mv-opened {
		width: auto !important;
		max-width: 100vw !important;
		left: 0 !important;
		border-radius: 0 !important
	}
}

@media screen and (max-width:620px) {
	.music-album {
		display: none
	}

	.auth-name {
		width: 32%;
		box-sizing: border-box;
		padding-right:30px
	}

	.music-name {
		margin-right: 32%;
		margin-left: 30px
	}

	.linkbutton {
		display: none
	}

	body,html {
		background-color: #000
	}
}

@media screen and (max-width:540px) {
	.sheet-item {
		width: calc(100% / 5 - 10px);
		margin: 5px 5px
	}

	.data-box {
		left: 5px;
		right: 5px
	}

	.sheet-name {
		max-width: 100%
	}

	.footer {
		height: 80px
	}

	.footer .container {
		display: flex;
		flex-direction: column-reverse
	}

	.con-btn,.progress {
		height: 50px;
		width: 100%
	}

	.con-btn {
		margin: 0;        
                margin-bottom: 6px;
		width: 100%;
		transform: scale(.9);
	}

	.progress {
		height: 30px;
		margin: 0
	}

	.progress-box {
		height: 30px;
		top: 0;
		right: 50px;
		margin: 0 10px
	}

	.btn-order {
		right: -10px
	}
	.btn-prev{
		left:20%;
	}
    .btn-next {
		right:20%;
	}
	.btn-play {
		left:50%;
	}
	.vol {
		display: block;
		width: 50%;
		height: 50px;
		position: absolute;
		transform: scale(.9);
		left:-26px;
                margin-bottom: 6px;
	}
    .volume {
	    display:none;	
	}
	.mkpgb-ttime,.mkpgb-ztime {
		margin-top: 7px;
                font-size:12px;
	}

	.list-head {
		max-width: calc(100% - 12px)
	}
}

@media screen and (max-width:350px) {
	.sheet-item {
		width: 50%
	}
}

/* 移动端默认弹窗样式适配 - 仅保留按钮样式 */
.info-btn {
    display: inline-block !important;
    padding: 5px 10px !important;
    margin: 5px 5px 5px 0 !important;
    background: #1E9FFF !important;
    color: #fff !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.info-btn:hover {
    opacity: 0.8 !important;
}

/* ===== MV弹窗手机端适配 ===== */
@media screen and (max-width:900px) {
    #mv-player-wrap {
        border-radius: 0 !important
    }

    #mv-title-overlay {
        font-size: 12px !important;
        top: 6px !important;
        left: 10px !important;
        max-width: calc(100% - 50px) !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    #mv-download-btn {
        width: 32px !important;
        height: 32px !important;
        top: 4px !important;
        right: 46px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 11 !important;
        background: rgba(0,0,0,0.4) !important
    }

    #mv-download-btn svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        stroke: #fff !important;
        stroke-width: 2.5 !important;
        fill: none !important;
        opacity: 1 !important
    }

    /* layer自带关闭按钮: 用Unicode×字符，覆盖雪碧图 */
    .layui-layer-setwin {
        display: block !important;
        visibility: visible !important;
        z-index: 9999 !important;
        position: absolute !important;
        right: 8px !important;
        top: 4px !important;
        font-size: 0 !important;
        line-height: 0 !important
    }
    .layui-layer-setwin .layui-layer-close,
    .layui-layer-setwin .layui-layer-close1,
    .layui-layer-setwin .layui-layer-close2 {
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 30px !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        font-family: Arial, "Microsoft YaHei", sans-serif !important;
        text-align: center !important;
        color: #fff !important;
        background: rgba(0,0,0,0.45) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        filter: none !important
    }
    .layui-layer-setwin .layui-layer-close::before {
        content: "×" !important;
        font-size: 22px !important;
        line-height: 30px !important;
        display: inline-block !important
    }
    .layui-layer-setwin .layui-layer-close:hover {
        background: rgba(0,0,0,0.65) !important
    }
}