/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #E89CAE;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    position: relative;
}

/* ========== 顶部区域 ========== */
.top-section {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 100;
}

.top-nav-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========== 唱片播放区域 ========== */
.vinyl-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    margin-top: 20px;
}

/* 左侧竖排文字图片 */
.vertical-text-img {
    position: absolute;
    left: 90px;
    top: 50%;
    transform: translateY(-50%);
    height: 180px;
    width: auto;
    z-index: 15;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

/* 唱片容器 */
.vinyl-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
}

/* 唱片 */
.vinyl-disc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 10;
    transition: transform 0.3s ease;
}

.vinyl-disc.rotating {
    animation: vinyl-spin 8s linear infinite;
}

@keyframes vinyl-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vinyl-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
}

/* 唱片臂容器 */
.tonearm-container {
    position: absolute;
    top: calc(12% - 40px);
    left: calc(50% + 80px);
    transform: translateX(-50%);
    z-index: 20;
}

.tonearm-img {
    width: auto;
    height: 240px;
    display: block;
    transform-origin: 14px 14px;
    transform: translateX(-14px) translateY(-14px) rotate(-30deg);
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.tonearm-img.active {
    transform: translateX(-14px) translateY(-14px) rotate(0deg);
}

/* ========== 底部控制栏 ========== */
.controls-area {
    position: absolute;
    bottom: 120px;
    left: 0;
    right: 0;
    padding: 0 40px;
    z-index: 50;
}

/* 状态栏图片 */
.status-bar-img {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

/* 进度条区域 */
.progress-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.time-label {
    font-size: 14px;
    color: white;
    min-width: 42px;
    text-align: center;
}

.progress-track {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: white;
    border-radius: 2px;
    transition: width 0.1s linear;
}

.progress-dot {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: left 0.1s linear;
}

.hidden {
    display: none;
}

/* ========== 底部状态栏 ========== */
.bottom-section {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    z-index: 100;
}

.bottom-bar-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 播放/暂停按钮覆盖层 */
.overlay-play-button {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 101;
}

.overlay-play-button:hover {
    transform: translate(-50%, 50%) scale(1.05);
}

.overlay-play-button:active {
    transform: translate(-50%, 50%) scale(0.98);
}

.overlay-play-button svg {
    width: 70px;
    height: 70px;
    stroke: none;
    position: absolute;
}

/* ========== 响应式设计 ========== */

/* 手机端 (max-width: 767px) */
@media screen and (max-width: 767px) {
    body {
        padding: 0;
    }

    .music-card {
        width: 90vw;
        height: calc(90vw * 1.5);
        max-width: 600px;
        max-height: 900px;
    }

    /* 唱片区域 - 放大1.3倍 */
    .vinyl-section {
        width: calc(90vw * 0.833);
        height: calc(90vw * 0.833);
        margin-top: calc(-90vw * 0.083 + 10px);
        transform: translate(-50%, -50%) scale(1.3);
    }

    .vertical-text-img {
        height: calc(90vw * 0.3);
        left: calc(90vw * 0.083 + 40px);
    }

    .vinyl-wrapper {
        width: calc(90vw * 0.75);
        height: calc(90vw * 0.75);
    }

    .vinyl-disc {
        width: 100%;
        height: 100%;
    }

    /* 唱片臂 - 手机端额外向左20px，向上10px */
    .tonearm-container {
        top: calc(90vw * 0.12 - 45px - 10px);
        left: calc(50% + 85px - 20px);
    }

    .tonearm-img {
        height: calc(90vw * 0.4);
        transform-origin: calc(90vw * 0.028) calc(90vw * 0.028);
        transform: translateX(calc(-90vw * 0.028 - 2px)) translateY(calc(-90vw * 0.028)) rotate(-20deg);
    }

    .tonearm-img.active {
        transform: translateX(calc(-90vw * 0.028 - 2px)) translateY(calc(-90vw * 0.028)) rotate(0deg);
    }

    /* 控制栏 - 向上移动20px */
    .controls-area {
        bottom: calc(90vw * 0.2 + 50px);
        padding: 0 calc(90vw * 0.067);
    }

    .status-bar-img {
        margin-bottom: calc(90vw * 0.033);
    }

    .progress-area {
        gap: calc(90vw * 0.02);
        margin-bottom: calc(90vw * 0.06);
    }

    .time-label {
        font-size: calc(90vw * 0.023);
        min-width: calc(90vw * 0.07);
    }

    .progress-track {
        height: calc(90vw * 0.005);
    }

    .progress-dot {
        width: calc(90vw * 0.02);
        height: calc(90vw * 0.02);
    }

    .overlay-play-button {
        width: calc(90vw * 0.117);
        height: calc(90vw * 0.117);
    }

    .overlay-play-button svg {
        width: calc(90vw * 0.117);
        height: calc(90vw * 0.117);
    }

    /* 底部状态栏 - 向上移动20px */
    .bottom-section {
        bottom: calc(50px + 50px);
    }
}

/* 平板端 (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 唱片区域 - 放大1.5倍 */
    .vinyl-section {
        margin-top: calc(90vw * 0.017);
        transform: translate(-50%, -50%) scale(1.5);
    }

    /* 控制栏 - 平板端向下移动20px */
    .controls-area {
        bottom: calc(120px - 20px);
    }

    /* 唱片臂容器 - 平板端位置调整 */
    .tonearm-container {
        top: calc(12% - 80px);
        left: calc(50% + 95px);
    }

    /* 唱片臂 - 平板端向左平移2px */
    .tonearm-img {
        transform: translateX(calc(-14px - 2px)) translateY(-14px) rotate(-30deg);
    }

    .tonearm-img.active {
        transform: translateX(calc(-14px - 2px)) translateY(-14px) rotate(0deg);
    }
}

/* 桌面端 (min-width: 1025px) */
@media screen and (min-width: 1025px) {
    .vinyl-section {
        margin-top: 20px;
    }
}