/* ==========================================================
 * 自定义音频播放器 - 答案音乐
 * Apple + 微信小程序风格 / PC 横向卡片 · 移动端紧凑纵向
 *
 * 布局(纯 CSS Grid，PC 与移动端共用同一份 DOM，无嵌套容器)：
 *   PC(>=1024px)   左:主图 200px | 中:标题·播放·进度 | 右:音量·倍速·循环
 *   平板/手机(<1024) 上:主图+标题 / 中:进度 / 下:循环·播放·倍速
 *
 * ⚠️ 优先级说明：主题 style.css / wap.css 各有一条
 *      .article button:not([style]) { background:none; padding:0; border:none; font:inherit }
 *    优先级为 (0,2,1)，会冲掉普通的 .custom-audio-player .cap-xxx (0,2,0)。
 *    故本文件所有按钮相关声明一律使用「双类名」写法 .cap-x.cap-x → (0,3,0) 反制。
 *    改动本文件时请勿把双类名简化回单类名，否则 PC/移动端按钮会集体变透明。
 * ========================================================== */

.custom-audio-player {
    /* ---- 主题变量 ---- */
    --cap-primary: #0066ff;              /* 品牌蓝 #0066FF */
    --cap-primary-dark: #0052cc;
    --cap-primary-soft: rgba(0, 102, 255, 0.10);
    --cap-text: #1d1d1f;                 /* Apple 近黑 */
    --cap-text-2: #86868b;               /* Apple 辅助灰 */
    --cap-track: #e5e5ea;                /* iOS 进度槽灰 */
    --cap-line: rgba(0, 0, 0, 0.05);
    --cap-surface: #fff;

    /* 默认 = 紧凑布局（窄容器 / 移动端）。
       宽布局由 JS 按「卡片自身宽度」加 .cap-wide 触发，不用媒体查询：
       本主题文章容器只有 ~577px，按视口判断会在 PC 上错误地套用三栏，
       把标题和进度条挤没。容器宽度才是决定布局的正确依据。 */
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "cover    info     info"
        "progress progress progress"
        "ctl      ctl      ctl";
    column-gap: 14px;
    row-gap: 16px;
    align-items: center;

    background: var(--cap-surface);
    border-radius: 20px;
    border: 1px solid var(--cap-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.07);
    padding: 24px;
    margin: 20px 0;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
                 "Helvetica Neue", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;                    /* 抵消 .article 可能的居中继承 */
    transition: box-shadow 0.25s;
    -webkit-tap-highlight-color: transparent;
}
.custom-audio-player:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 36px rgba(0, 0, 0, 0.10);
}
.custom-audio-player *,
.custom-audio-player *::before,
.custom-audio-player *::after { box-sizing: border-box; }

/* 按钮基线(双类名提权，反制 .article button:not([style])) */
.custom-audio-player button.cap-btn {
    margin: 0;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
}
.custom-audio-player button.cap-btn:focus-visible {
    outline: 2px solid var(--cap-primary);
    outline-offset: 2px;
}

/* ---------------- 主图 ---------------- */
.custom-audio-player .cap-cover.cap-cover {
    grid-area: cover;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 14px;
    background-color: #f2f3f5;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.custom-audio-player .cap-cover-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.2s;
}
.custom-audio-player .cap-cover:hover .cap-cover-mask { opacity: 1; }
.custom-audio-player .cap-cover-mask span {
    display: none;
    width: 44px;
    height: 44px;
    color: #fff;
}
.custom-audio-player .cap-cover-mask span svg { width: 100%; height: 100%; }
.custom-audio-player .cap-cover-mask .cap-cm-play { display: block; }
.custom-audio-player.is-playing .cap-cover-mask .cap-cm-play { display: none; }
.custom-audio-player.is-playing .cap-cover-mask .cap-cm-pause { display: block; }

/* ---------------- 标题区 ---------------- */
.custom-audio-player .cap-info {
    grid-area: info;
    min-width: 0;
    text-align: left;
    align-self: end;
}
.custom-audio-player .cap-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cap-text);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}
.custom-audio-player .cap-artist {
    font-size: 13px;
    color: var(--cap-text-2);
    line-height: 1.4;
    margin: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}
.custom-audio-player .cap-artist.cap-error { color: #e64340; }

/* 播放中：标题下方的呼吸绿点(明确状态反馈) */
.custom-audio-player.is-playing .cap-artist::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cap-primary);
    animation: cap-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes cap-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ---------------- 主按钮：播放 / 暂停 ---------------- */
.custom-audio-player .cap-play.cap-play {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--cap-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.35);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.custom-audio-player .cap-play.cap-play:hover {
    background: var(--cap-primary-dark);
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.45);
}
.custom-audio-player .cap-play.cap-play:active { transform: scale(0.94); }

/* 主按钮内四态图标：播放 / 暂停 / 加载 / 重播 */
.custom-audio-player .cap-pi {
    display: none;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.custom-audio-player .cap-pi svg { width: 100%; height: 100%; }
.custom-audio-player.is-paused  .cap-pi-play    { display: flex; }
.custom-audio-player.is-playing .cap-pi-pause   { display: flex; }
.custom-audio-player.is-loading .cap-pi-loading { display: flex; }
.custom-audio-player.is-ended   .cap-pi-replay  { display: flex; }
/* 加载转圈：与图标同尺寸，避免按钮尺寸跳动 */
.custom-audio-player .cap-pi-loading {
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cap-spin 0.8s linear infinite;
}
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* ---------------- 进度行 ---------------- */
.custom-audio-player .cap-progress {
    grid-area: progress;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.custom-audio-player .cap-time {
    font-size: 13px;
    color: var(--cap-text-2);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    flex-shrink: 0;
}
.custom-audio-player .cap-time-total { text-align: right; }
/* 触控区做高，视觉槽做细 */
.custom-audio-player .cap-bar {
    position: relative;
    flex: 1;
    height: 34px;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 0;
    touch-action: none;
}
.custom-audio-player .cap-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--cap-track);
    overflow: visible;
}
.custom-audio-player .cap-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 3px;
    background: var(--cap-primary);
}
.custom-audio-player .cap-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--cap-primary);
    transform: translateY(-50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}
.custom-audio-player.is-dragging .cap-thumb { transform: translateY(-50%) scale(1.25); }


/* ---------------- 控制行容器 ---------------- */
/* 紧凑布局：循环 · 播放 · 倍速 一行。
   用 1fr auto 1fr 三列而非 flex：flex 下要让中间元素精确居中，
   必须两侧等宽，按钮内容宽度天然不等，grid 的 auto 中列才稳。 */
.custom-audio-player .cap-ctl-row {
    grid-area: ctl;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.custom-audio-player .cap-ctl-row > .cap-loop-btn { justify-self: start; }
.custom-audio-player .cap-ctl-row > .cap-play     { justify-self: center; }
.custom-audio-player .cap-ctl-row > .cap-speed    { justify-self: end; }

/* ---------------- 胶囊按钮：循环 / 倍速 ---------------- */
.custom-audio-player .cap-pill.cap-pill {
    height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    border: none;
    background: #f2f3f5;
    color: var(--cap-text);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
}
.custom-audio-player .cap-pill.cap-pill svg { width: 17px; height: 17px; flex-shrink: 0; }
.custom-audio-player .cap-pill.cap-pill:hover { background: #e8e9eb; }

/* 循环开启：明显的主色反馈 */
.custom-audio-player .cap-loop-btn.cap-loop-btn {
    flex-shrink: 0;
}
.custom-audio-player .cap-loop-btn.cap-loop-btn.active {
    background: var(--cap-primary-soft);
    color: var(--cap-primary-dark);
}
.custom-audio-player .cap-loop-btn.cap-loop-btn.active:hover {
    background: rgba(0, 102, 255, 0.16);
}

/* ---------------- 倍速下拉 ---------------- */
.custom-audio-player .cap-speed {
    position: relative;
}
.custom-audio-player .cap-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.5;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.custom-audio-player .cap-speed.open .cap-caret { transform: rotate(180deg); }
.custom-audio-player .cap-speed-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 108px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 14px;
    border: 1px solid var(--cap-line);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    padding: 6px;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.custom-audio-player .cap-speed.open .cap-speed-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.custom-audio-player .cap-speed-item.cap-speed-item {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 15px;
    color: var(--cap-text);
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.custom-audio-player .cap-speed-item.cap-speed-item:hover { background: #f2f3f5; }
.custom-audio-player .cap-speed-item.cap-speed-item.active {
    color: var(--cap-primary-dark);
    font-weight: 600;
    background: var(--cap-primary-soft);
}

/* ---------------- 音量（仅宽布局显示，窄布局交给系统音量键） ---------------- */
.custom-audio-player .cap-volume {
    grid-area: vol;
    display: none;
    align-items: center;
    gap: 8px;
    justify-self: end;
    align-self: end;
}
.custom-audio-player .cap-volume-icon.cap-volume-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--cap-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s;
}
.custom-audio-player .cap-volume-icon.cap-volume-icon:hover {
    background: #f2f3f5;
    color: var(--cap-text);
}
.custom-audio-player .cap-volume-icon.cap-volume-icon svg { width: 21px; height: 21px; }
.custom-audio-player .cap-volume-slider {
    width: 92px;
    height: 4px;
    border-radius: 2px;
    background: var(--cap-track);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.custom-audio-player .cap-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--cap-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.custom-audio-player .cap-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--cap-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border-width: 2px;
}

/* ==========================================================
 * 平板 / 手机(<1024px)：纵向紧凑
 *   行1 主图 + 标题
 *   行2 时间 + 进度条(通栏)
 *   行3 循环 · 播放 · 倍速
 * ========================================================== */



/* ==========================================================
 * 宽布局：卡片自身 >= 720px 时由 JS 加 .cap-wide
 *   左 主图 200px | 中 标题·播放·进度 | 右 音量·倍速·循环
 * ========================================================== */
.custom-audio-player.cap-wide {
    grid-template-columns: 200px 64px minmax(0, 1fr) auto auto;
    grid-template-areas:
        "cover info info     vol vol"
        "cover play progress spd loop";
    column-gap: 20px;
    row-gap: 18px;
    padding: 24px;
    border-radius: 20px;
}
.custom-audio-player.cap-wide .cap-cover.cap-cover {
    width: 200px;
    height: 200px;
    border-radius: 16px;
}
.custom-audio-player.cap-wide .cap-info { align-self: end; }
.custom-audio-player.cap-wide .cap-title { font-size: 20px; }
.custom-audio-player.cap-wide .cap-artist { font-size: 13px; }
.custom-audio-player.cap-wide .cap-volume { display: flex; }
.custom-audio-player.cap-wide .cap-play.cap-play { width: 64px; height: 64px; }
.custom-audio-player.cap-wide .cap-pi { width: 30px; height: 30px; }
.custom-audio-player.cap-wide .cap-pill.cap-pill { height: 40px; border-radius: 20px; }
/* 宽布局：容器透明化，loop / play / spd 直接参与父 grid 各归其位 */
@supports (display: contents) {
    .custom-audio-player.cap-wide .cap-ctl-row { display: contents; }
}
/* 老内核不支持 display:contents 时，退化为右侧一条 flex 行，不会错乱 */
@supports not (display: contents) {
    .custom-audio-player.cap-wide .cap-ctl-row {
        grid-area: ctl;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    .custom-audio-player.cap-wide { grid-template-areas:
        "cover info info     vol"
        "cover play progress ctl"; }
}
.custom-audio-player.cap-wide .cap-ctl-row > .cap-loop-btn.cap-loop-btn { grid-area: loop; justify-self: end; }
.custom-audio-player.cap-wide .cap-ctl-row > .cap-play.cap-play { grid-area: play; justify-self: center; }
.custom-audio-player.cap-wide .cap-ctl-row > .cap-speed { grid-area: spd; justify-self: end; }
.custom-audio-player.cap-wide .cap-bar { height: 34px; }
/* 宽布局空间充足，菜单回到向上弹，避免遮住下方正文 */
.custom-audio-player.cap-wide .cap-speed-menu {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom right;
    transform: translateY(6px) scale(0.96);
}
.custom-audio-player.cap-wide .cap-speed.open .cap-speed-menu { transform: translateY(0) scale(1); }

/* 窄手机(<=414px)：文字让位，保图标 */


/* 超小屏(<=359px)：进一步压缩，保证不横向溢出 */


/* ==========================================================
 * 窄卡片：卡片自身 < 340px 时由 JS 加 .cap-tight
 * 同样按容器而非视口——微信里视口 375 而文章容器可能只有 335，
 * 视口断点会漏判，导致控制行文字挤成两行或溢出。
 * ========================================================== */
.custom-audio-player.cap-tight {
    grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 14px;
    padding: 14px;
    border-radius: 14px;
}
.custom-audio-player.cap-tight .cap-cover.cap-cover {
    width: 80px;
    height: 80px;
    border-radius: 12px;
}
.custom-audio-player.cap-tight .cap-title { font-size: 15px; }
.custom-audio-player.cap-tight .cap-artist { font-size: 11px; }
.custom-audio-player.cap-tight .cap-play.cap-play { width: 54px; height: 54px; }
.custom-audio-player.cap-tight .cap-pi { width: 25px; height: 25px; }
.custom-audio-player.cap-tight .cap-pi-loading { width: 25px; height: 25px; }
.custom-audio-player.cap-tight .cap-time { min-width: 36px; font-size: 11px; }
.custom-audio-player.cap-tight .cap-ctl-row { gap: 8px; }
/* 文字让位保图标：循环只留图标，倍速去掉"倍速"二字，但触控高度不缩 */
.custom-audio-player.cap-tight .cap-pill.cap-pill {
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
}
.custom-audio-player.cap-tight .cap-loop-btn.cap-loop-btn {
    padding: 0;
    width: 44px;
    min-width: 44px;
}
.custom-audio-player.cap-tight .cap-loop-btn.cap-loop-btn span { display: none; }
.custom-audio-player.cap-tight .cap-speed-word { display: none; }

@media (prefers-reduced-motion: reduce) {
    .custom-audio-player,
    .custom-audio-player * {
        transition: none !important;
        animation: none !important;
    }
}