body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
    background:#000;
    color:#fff;
}

/* ================= 顶部 ================= */

.player-area{
    padding:16px;
    background:#111;
    position:sticky;
    top:0;
}

audio{
    width:100%;
}

.controls{
    margin-top:10px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;   /* 防止手机挤爆 */
}

button{
    padding:8px 14px;
    border:none;
    border-radius:10px;
    background:#1c1c1e;
    color:white;
}

/* ================= 图片 ================= */

.image-area{
    padding:16px;
    text-align:center;
}

.image-controls{
    margin-bottom:10px;
    display:flex;
    gap:10px;
    justify-content:center;
}

.score-img{
    width:100%;           /* 默认最大宽 */
    max-width:1000px;
    height:auto;           /* 保持比例 */
    border-radius:20px;
}

/* ================= 文件列表 ================= */

.list-area{
    padding:16px;
}

.song-item{
    padding:12px;
    margin-bottom:8px;
    background:#1c1c1e;
    border-radius:10px;
    cursor:pointer;
}

.song-item.active{
    background:#333;
}

/* ================= 图标按钮 ================= */

.icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#1c1c1e;
    color:white;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all 0.15s ease;
}

.icon-btn:active{
    transform:scale(0.85);
    background:#333;
}

/* ================= 文字按钮 ================= */

.text-btn{
    padding:10px 16px;
    border-radius:12px;
    border:none;
    background:#1c1c1e;
    color:white;
    font-size:14px;
    cursor:pointer;
    transition:all 0.15s ease;
}

.text-btn:active{
    transform:scale(0.95);
    background:#333;
}

/* ================= 循环按钮点击闪动 ================= */

.loop-animate{
    animation: pulse 0.25s ease;
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}

/* ================= 图片切换动画 ================= */

.image-animate{
    animation: imageFade 0.4s ease;
}

@keyframes imageFade{
    0%{
        opacity:0;
        transform: scale(0.9) translateY(10px);
    }

    100%{
        opacity:1;
        transform: scale(1) translateY(0);
    }
}

/* =========================
   Mobile Optimization
========================= */

@media (max-width:768px){

    .controls{
        display:flex;
        justify-content:space-between;
        padding:6px 8px;
        gap:8px;
    }

    .icon-btn{
        min-width:56px;
        min-height:56px;
        font-size:22px;
        border-radius:12px;
    }

    .text-btn{
        min-height:56px;
        padding:0 14px;
        font-size:16px;
        border-radius:12px;
    }

    #score{
		display:block;
        margin-bottom:8px;
    }

    audio{
        width:100%;
        height:40px;
    }
}