/* ===== PK 模式 CSS - 精致化重写 ===== */
/* 复用 dp-themes.css 变量 + PK 暖色令牌, 0 写死颜色 */
/* 三主题全覆盖 | 毛玻璃+流光+微光氛围 */

/* ============ 全局 PK 氛围 ============ */
.dp-pk-ambient {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}
[data-theme=dark] .dp-pk-ambient {
    background: radial-gradient(ellipse at 50% 20%, rgba(249,115,22,0.18) 0%, rgba(239,68,68,0.08) 35%, transparent 70%);
}
[data-theme=light] .dp-pk-ambient {
    background: radial-gradient(ellipse at 50% 20%, rgba(234,88,12,0.12) 0%, rgba(220,38,38,0.05) 35%, transparent 70%);
}
[data-theme=eye] .dp-pk-ambient {
    background: radial-gradient(ellipse at 50% 20%, rgba(196,136,58,0.15) 0%, rgba(196,113,94,0.06) 35%, transparent 70%);
}

/* PK 页面解除 dp-main 480px 限制 */
main.dp-main.dp-main--pk {
    max-width: none !important;
    padding: 0;
}

/* ============ 入口按钮 ============ */
.dp-pk-entry-btn-b {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, border-color .2s;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
.dp-pk-entry-btn-b::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: dp-pk-shimmer 3s infinite;
}
@keyframes dp-pk-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.dp-pk-entry-btn-b:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(249,115,22,0.25);
    border-color: var(--pk-warm);
}
.dp-pk-entry-btn-b svg { color: var(--pk-warm); }

.dp-pk-entry-btn-c {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1.5px solid var(--pk-warm);
    border-radius: 14px;
    background: transparent;
    color: var(--pk-warm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
    position: relative;
    overflow: hidden;
}
.dp-pk-entry-btn-c:hover {
    background: var(--pk-warm);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(249,115,22,0.3);
}

/* ============ 模式选择 Modal ============ */
.dp-pk-modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dp-pk-fade-in .25s ease-out;
}
[data-theme=light] .dp-pk-modal-backdrop { background: rgba(50,50,80,.35); }
[data-theme=eye] .dp-pk-modal-backdrop { background: rgba(91,70,54,.3); }

.dp-pk-modal {
    width: min(420px, 92vw);
    border-radius: 20px;
    background: var(--card-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border);
    padding: 28px 24px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(249,115,22,0.08);
    animation: dp-pk-pop-in .4s cubic-bezier(.34,1.56,.64,1);
}
.dp-pk-modal-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}
.dp-pk-modal-sub {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.dp-pk-modal-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.dp-pk-modal-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    color: var(--text);
    position: relative;
    overflow: hidden;
}
.dp-pk-modal-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(249,115,22,0.05));
    opacity: 0;
    transition: opacity .2s;
}
.dp-pk-modal-option:hover::before { opacity: 1; }
.dp-pk-modal-option:hover {
    border-color: var(--pk-warm);
    transform: translateY(-1px);
}
.dp-pk-modal-option.active {
    border-color: var(--pk-warm);
    background: rgba(249,115,22,0.08);
}
.dp-pk-modal-option.active::before { opacity: 1; }
.dp-pk-modal-option-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.dp-pk-modal-option-icon.a { background: linear-gradient(135deg, var(--pk-fire), var(--pk-warm)); }
.dp-pk-modal-option-icon.b { background: linear-gradient(135deg, var(--accent-blue), var(--accent-teal)); }
.dp-pk-modal-option-icon.c { background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); }
.dp-pk-modal-option-icon svg { color: white; }
.dp-pk-modal-option-text { flex: 1; }
.dp-pk-modal-option-title { font-size: 15px; font-weight: 800; }
.dp-pk-modal-option-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dp-pk-modal-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.dp-pk-modal-option.active .dp-pk-modal-check {
    border-color: var(--pk-warm);
    background: var(--pk-warm);
}
.dp-pk-modal-option.active .dp-pk-modal-check::after {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: white;
}
.dp-pk-modal-actions { display: flex; gap: 8px; }
.dp-pk-modal-btn {
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.dp-pk-modal-btn.primary {
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(249,115,22,0.3);
}
.dp-pk-modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(249,115,22,0.4);
}
.dp-pk-modal-btn.secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.dp-pk-modal-btn.secondary:hover { color: var(--text); border-color: var(--text-muted); }

/* ============ 匹配页 ============ */
.dp-pk-match-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
}

/* VS 分屏 */
.dp-pk-vs-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 480px;
}
.dp-pk-player-card {
    flex: 1;
    max-width: 180px;
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.dp-pk-player-card.me {
    background: linear-gradient(90deg, rgba(108,92,231,0.06) 0%, var(--card-bg) 30%);
}
.dp-pk-player-card.opp {
    background: linear-gradient(270deg, rgba(249,115,22,0.06) 0%, var(--card-bg) 30%);
}
.dp-pk-player-card.me {
    box-shadow: 0 4px 20px rgba(108,92,231,0.15);
}
.dp-pk-player-card.opp {
    box-shadow: 0 4px 20px rgba(249,115,22,0.15);
}
.dp-pk-player-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px; font-weight: 900;
    margin-bottom: 10px;
}
.dp-pk-player-card.me .dp-pk-player-avatar {
    background: linear-gradient(135deg, var(--pk-score-me), var(--accent-blue));
}
.dp-pk-player-card.opp .dp-pk-player-avatar {
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
}
.dp-pk-player-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.dp-pk-player-level {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(108,92,231,0.1);
}
.dp-pk-player-card.opp .dp-pk-player-level {
    background: rgba(249,115,22,0.1);
}

/* VS 徽章 */
.dp-pk-vs-badge {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    box-shadow: 0 0 24px rgba(249,115,22,0.35);
    animation: dp-pk-vs-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dp-pk-vs-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(249,115,22,0.35); }
    50% { transform: scale(1.1); box-shadow: 0 0 36px rgba(249,115,22,0.5); }
}

/* 神秘对手 - 问号 */
.dp-pk-mystery-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 2px dashed var(--pk-warm);
    display: flex; align-items: center; justify-content: center;
    color: var(--pk-warm);
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 10px;
    animation: dp-pk-mystery-pulse 2s ease-in-out infinite;
}
@keyframes dp-pk-mystery-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.3); }
    50% { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}

/* 匹配脉冲波纹 */
.dp-pk-match-ripple {
    position: relative;
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
}
.dp-pk-match-ripple::before,
.dp-pk-match-ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--pk-warm);
    animation: dp-pk-ripple-expand 2s ease-out infinite;
}
.dp-pk-match-ripple::before { animation-delay: 0s; }
.dp-pk-match-ripple::after { animation-delay: 0.7s; }
@keyframes dp-pk-ripple-expand {
    0% { width: 40px; height: 40px; opacity: 0.8; }
    100% { width: 120px; height: 120px; opacity: 0; }
}
.dp-pk-ripple-core {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(249,115,22,0.4);
    z-index: 1;
}
.dp-pk-ripple-core svg { color: white; }

/* 匹配页标题 */
.dp-pk-match-title {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}
.dp-pk-match-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 32px;
}

/* 倒计时圆环 */
.dp-pk-countdown-ring {
    width: 64px; height: 64px;
    margin-bottom: 20px;
    position: relative;
}
.dp-pk-countdown-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.dp-pk-countdown-ring .ring-bg {
    fill: none;
    stroke: rgba(160,160,180,0.15);
    stroke-width: 3;
}
.dp-pk-countdown-ring .ring-fg {
    fill: none;
    stroke: var(--pk-warm);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 164;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}
.dp-pk-countdown-ring .ring-text {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}

/* 匹配成功闪屏 */
.dp-pk-match-flash {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
}
.dp-pk-match-flash.active {
    animation: dp-pk-flash .4s ease-out;
}
@keyframes dp-pk-flash {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

/* 旧版三跳点 (兼容) */
.dp-pk-match-dots { display: flex; gap: 14px; margin-bottom: 32px; }
.dp-pk-match-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--pk-warm);
    animation: dp-pk-dot-bounce 1.4s ease-in-out infinite;
}
.dp-pk-match-dot:nth-child(2) { animation-delay: .2s; background: var(--pk-fire); }
.dp-pk-match-dot:nth-child(3) { animation-delay: .4s; background: var(--pk-gold); }
@keyframes dp-pk-dot-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .5; }
    40% { transform: scale(1.1); opacity: 1; }
}
.dp-pk-match-timer { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; }
.dp-pk-match-cancel {
    padding: 12px 28px;
    border-radius: 12px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.dp-pk-match-cancel:hover { color: var(--text); border-color: var(--text-muted); transform: translateY(-1px); }

/* ============ 战斗页 ============ */
.dp-pk-battle-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

/* 双人分数条 (拔河式) */
.dp-pk-score-tug {
    display: flex;
    align-items: center;
    border-radius: 14px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin-bottom: 10px;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.dp-pk-score-tug::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(249,115,22,0.04), transparent 40%, transparent 60%, rgba(108,92,231,0.04));
    pointer-events: none;
}
.dp-pk-tug-side {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.dp-pk-tug-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px; font-weight: 800;
}
.dp-pk-tug-side.opp .dp-pk-tug-avatar { background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire)); }
.dp-pk-tug-side.me .dp-pk-tug-avatar { background: linear-gradient(135deg, var(--pk-score-me), var(--accent-blue)); }
.dp-pk-tug-score { font-size: 16px; font-weight: 900; }
.dp-pk-tug-side.opp .dp-pk-tug-score { color: var(--pk-warm); }
.dp-pk-tug-side.me .dp-pk-tug-score { color: var(--pk-score-me); }
.dp-pk-tug-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(160,160,180,0.12);
    overflow: hidden;
    position: relative;
}
.dp-pk-tug-fill-opp {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--pk-warm), var(--pk-fire));
    border-radius: 4px;
    transition: width .6s cubic-bezier(.25,.46,.45,.94);
}
.dp-pk-tug-fill-me {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--accent-blue), var(--pk-score-me));
    border-radius: 4px;
    transition: width .6s cubic-bezier(.25,.46,.45,.94);
}

/* 战斗状态栏 (第二行: 计时 + 进度 + 连击) */
.dp-pk-battle-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.dp-pk-meta-item { display: flex; align-items: center; gap: 5px; }
.dp-pk-meta-item svg { color: var(--pk-warm); }
.dp-pk-combo {
    display: flex; align-items: center; gap: 4px;
    font-weight: 800;
    color: var(--pk-gold);
}
.dp-pk-combo.fire {
    animation: dp-pk-combo-fire .5s ease;
}
@keyframes dp-pk-combo-fire {
    0% { box-shadow: none; }
    50% { text-shadow: 0 0 12px rgba(251,191,36,0.6); }
    100% { box-shadow: none; }
}

/* 题目限时圆环 (小型, 状态栏内嵌) */
.dp-pk-timer-ring {
    width: 28px; height: 28px;
    position: relative;
}
.dp-pk-timer-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.dp-pk-timer-ring .ring-bg { fill: none; stroke: rgba(160,160,180,0.12); stroke-width: 2.5; }
.dp-pk-timer-ring .ring-fg {
    fill: none;
    stroke: var(--pk-warm);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 72;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}
.dp-pk-timer-ring.urgent .ring-fg {
    stroke: var(--pk-fire);
    animation: dp-pk-timer-urgent .5s ease infinite;
}
@keyframes dp-pk-timer-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 对方区域 (精简, 内嵌分数条) */
.dp-pk-battle-opponent {
    border-radius: 16px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.dp-pk-battle-opponent {
    /* 对手区靠内容和颜色区分，顶线已移除 */
}
.dp-pk-opp-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px; font-weight: 800;
    flex-shrink: 0;
}
.dp-pk-opp-info { flex: 1; }
.dp-pk-opp-name { font-size: 13px; font-weight: 700; color: var(--text); }
.dp-pk-opp-state {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(249,115,22,0.1);
    color: var(--pk-warm);
    font-weight: 600;
    display: inline-block;
    margin-top: 2px;
}
.dp-pk-opp-state.thinking { animation: dp-pk-pulse 1.2s infinite; }
.dp-pk-opp-state.answered { background: rgba(34,197,94,.15); color: var(--accent-green); }
.dp-pk-opp-state.idle { background: rgba(160,160,180,.12); color: var(--text-muted); }
.dp-pk-opp-state.error { background: rgba(239,68,68,.15); color: var(--accent-red); }
/* 对手状态指示灯 */
.dp-pk-opp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pk-warm);
    animation: dp-pk-dot-blink 1.5s ease infinite;
    flex-shrink: 0;
}
@keyframes dp-pk-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 题干卡片 (核心视觉) */
.dp-pk-battle-question {
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 24px 20px;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .2s;
}
/* 流光已移除 - 减少视觉噪音 */
/* 顶部渐变雾 */
.dp-pk-battle-question::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(108,92,231,0.06) 0%, transparent 100%);
    pointer-events: none;
}
.dp-pk-q-progress { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.dp-pk-q-chinese {
    font-size: 18px;
    color: var(--text);
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.5;
}
.dp-pk-q-hint { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* 半引导叠加层 */
.dp-pk-guided-overlay {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(108,92,231,0.08);
    border: 1px dashed rgba(108,92,231,0.2);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.8;
    letter-spacing: 0.5px;
}
.dp-pk-blank-word {
    color: var(--accent-purple);
    border-bottom: none;
    padding: 0 4px 2px;
    box-shadow: 0 3px 10px rgba(168,85,247,0.25);
    border-radius: 2px;
}
.dp-pk-visible-word { color: var(--text); }
.dp-pk-follow-sentence {
    color: var(--accent-blue);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

/* 词汇提示卡片 */
.dp-pk-vocab-popup {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    animation: dp-pk-pop-in .3s ease;
}
.dp-pk-vocab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.dp-pk-vocab-item + .dp-pk-vocab-item { border-top: 1px solid var(--border); }
.dp-pk-vocab-word { font-weight: 800; color: var(--pk-gold); font-size: 14px; }
.dp-pk-vocab-phonetic { font-size: 12px; color: var(--text-muted); }
.dp-pk-vocab-meaning { font-size: 12px; color: var(--text-secondary); flex: 1; }

/* ============ 技能栏 ============ */
.dp-pk-skill-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.dp-pk-skill-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border-radius: 14px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
    color: var(--text);
}
.dp-pk-skill-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(249,115,22,0.06));
    opacity: 0;
    transition: opacity .2s;
}
.dp-pk-skill-btn:hover::before { opacity: 1; }
.dp-pk-skill-btn:hover {
    border-color: var(--pk-warm);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(249,115,22,0.15);
}
.dp-pk-skill-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.dp-pk-skill-btn:nth-child(1) .dp-pk-skill-icon { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: white; }
.dp-pk-skill-btn:nth-child(2) .dp-pk-skill-icon { background: linear-gradient(135deg, var(--accent-teal), var(--accent-green)); color: white; }
.dp-pk-skill-btn:nth-child(3) .dp-pk-skill-icon { background: linear-gradient(135deg, var(--pk-gold), var(--pk-warm)); color: white; }
.dp-pk-skill-label { font-size: 11px; font-weight: 700; white-space: nowrap; }
/* 脉冲引诱 */
.dp-pk-skill-btn.available .dp-pk-skill-icon {
    animation: dp-pk-skill-pulse 2.5s ease-in-out infinite;
}
@keyframes dp-pk-skill-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(249,115,22,0); }
}
/* 已用 */
.dp-pk-skill-btn.used {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
}
.dp-pk-skill-btn.used::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(160,160,180,0.08) 6px,
        rgba(160,160,180,0.08) 12px
    );
}
.dp-pk-skill-btn.used:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}
/* 激活动效 */
.dp-pk-skill-btn.activating {
    animation: dp-pk-skill-activate .5s ease;
}
@keyframes dp-pk-skill-activate {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ============ 录音区 ============ */
.dp-pk-battle-recorder {
    flex: 1;
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 20px 16px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* 录音按钮+脉冲环定位容器 */
.dp-pk-rec-btn-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}
/* 录音脉冲环 */
.dp-pk-rec-btn {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    border: none;
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(249,115,22,0.35);
    transition: all .2s;
    position: relative;
    z-index: 1;
}
.dp-pk-rec-btn:hover { transform: scale(1.06); }
.dp-pk-rec-btn.recording {
    background: linear-gradient(135deg, var(--accent-red), var(--pk-warm));
    animation: dp-pk-rec-pulse 1s ease infinite;
}
@keyframes dp-pk-rec-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 28px rgba(249,115,22,0.35); }
    50% { transform: scale(1.06); box-shadow: 0 6px 40px rgba(249,115,22,0.5); }
}
/* 录音脉冲环 (3圈) */
.dp-pk-rec-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2px solid var(--pk-warm);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: dp-pk-ring-expand 1.5s ease-out infinite;
}
.dp-pk-rec-ring:nth-child(2) { animation-delay: .5s; }
.dp-pk-rec-ring:nth-child(3) { animation-delay: 1s; }
@keyframes dp-pk-ring-expand {
    0% { width: 72px; height: 72px; opacity: 0.6; transform: translate(-50%, -50%); }
    100% { width: 130px; height: 130px; opacity: 0; transform: translate(-50%, -50%); }
}
.dp-pk-rec-label { margin-top: 14px; font-size: 14px; color: var(--text-muted); font-weight: 600; }
.dp-pk-rec-tip { margin-top: 4px; font-size: 12px; color: var(--text-muted); opacity: .7; }
.dp-pk-rec-actions { margin-top: 14px; display: flex; gap: 10px; }
.dp-pk-rec-actions button {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .15s;
}
.dp-pk-rec-submit {
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    color: white;
    box-shadow: 0 4px 16px rgba(249,115,22,0.25);
}
.dp-pk-rec-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,0.35); }
.dp-pk-rec-replay {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.dp-pk-rec-replay:hover { color: var(--text); }

/* 我方底栏 */
.dp-pk-battle-self {
    border-radius: 16px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.dp-pk-battle-self {
    /* 底线已移除，布局本身已区分答题区 */
}
.dp-pk-self-info { display: flex; align-items: center; gap: 10px; }
.dp-pk-self-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-score-me), var(--accent-blue));
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 12px; font-weight: 800;
}
.dp-pk-self-name { font-size: 13px; color: var(--text); font-weight: 700; }
.dp-pk-self-score { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.dp-pk-self-progress { display: flex; gap: 5px; }
.dp-pk-self-progress-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(160,160,180,0.15);
    transition: all .3s;
}
.dp-pk-self-progress-dot.done { background: var(--accent-green); box-shadow: 0 0 6px rgba(34,197,94,0.3); }
.dp-pk-self-progress-dot.current { background: var(--pk-warm); box-shadow: 0 0 8px rgba(249,115,22,0.4); animation: dp-pk-pulse 1.2s infinite; }

@keyframes dp-pk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ============ 结算页 ============ */
.dp-pk-result-page {
    min-height: 100vh;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
}

/* 胜负大字 */
.dp-pk-verdict {
    text-align: center;
    margin-bottom: 24px;
    animation: dp-pk-verdict-in .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dp-pk-verdict-in {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.dp-pk-verdict-text {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2;
}
.dp-pk-verdict-text.win {
    background: linear-gradient(135deg, var(--pk-gold), var(--pk-warm));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 12px rgba(251,191,36,0.3));
}
.dp-pk-verdict-text.lose {
    background: linear-gradient(135deg, var(--text-muted), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dp-pk-verdict-text.draw {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* 胜利光弧 */
.dp-pk-verdict.win .dp-pk-verdict-glow {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.2), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: dp-pk-win-glow 2s ease-in-out infinite;
}
@keyframes dp-pk-win-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* 双方对比卡 */
.dp-pk-duel-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 20px;
}
.dp-pk-duel-card {
    flex: 1;
    border-radius: 16px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 16px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dp-pk-duel-card.me::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 6px;
    background: linear-gradient(90deg, rgba(108,92,231,0.08) 0%, transparent 100%);
}
.dp-pk-duel-card.opp::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 6px;
    background: linear-gradient(270deg, rgba(249,115,22,0.08) 0%, transparent 100%);
}
.dp-pk-duel-card.winner { border-color: var(--pk-gold); box-shadow: 0 0 20px rgba(251,191,36,0.15); }
.dp-pk-duel-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 16px; font-weight: 900;
    margin: 0 auto 8px;
}
.dp-pk-duel-card.me .dp-pk-duel-avatar { background: linear-gradient(135deg, var(--pk-score-me), var(--accent-blue)); }
.dp-pk-duel-card.opp .dp-pk-duel-avatar { background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire)); }
.dp-pk-duel-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dp-pk-duel-total { font-size: 28px; font-weight: 900; }
.dp-pk-duel-card.me .dp-pk-duel-total { color: var(--pk-score-me); }
.dp-pk-duel-card.opp .dp-pk-duel-total { color: var(--pk-warm); }
.dp-pk-duel-vs {
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* 4维诊断 + 雷达图区 */
.dp-pk-diagnosis {
    width: 100%;
    max-width: 480px;
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 20px 16px;
    margin-bottom: 14px;
}
.dp-pk-diagnosis-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.dp-pk-dim-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dp-pk-dim-label { font-size: 12px; color: var(--text-muted); width: 56px; flex-shrink: 0; }
.dp-pk-dim-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(160,160,180,0.12);
    overflow: hidden;
}
.dp-pk-dim-fill { height: 100%; border-radius: 3px; transition: width .8s cubic-bezier(.25,.46,.45,.94); }
.dp-pk-dim-fill.good { background: linear-gradient(90deg, var(--accent-green), var(--accent-teal)); }
.dp-pk-dim-fill.mid { background: linear-gradient(90deg, var(--pk-gold), var(--pk-warm)); }
.dp-pk-dim-fill.bad { background: linear-gradient(90deg, var(--pk-warm), var(--pk-fire)); }
.dp-pk-dim-score { font-size: 12px; color: var(--text); font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }

/* 每题柱状图 */
.dp-pk-question-chart {
    width: 100%;
    max-width: 480px;
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 18px 16px;
    margin-bottom: 14px;
}
.dp-pk-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 120px;
    padding: 0 8px;
}
.dp-pk-chart-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.dp-pk-chart-pair {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 80px;
}
.dp-pk-chart-bar {
    width: 14px;
    border-radius: 4px 4px 0 0;
    transition: height .6s cubic-bezier(.25,.46,.45,.94);
}
.dp-pk-chart-bar.me { background: linear-gradient(180deg, var(--pk-score-me), var(--accent-blue)); }
.dp-pk-chart-bar.opp { background: linear-gradient(180deg, var(--pk-warm), var(--pk-fire)); }
.dp-pk-chart-label { font-size: 10px; color: var(--text-muted); font-weight: 700; }

/* XP 获得 */
.dp-pk-xp-gain {
    font-size: 18px;
    font-weight: 900;
    color: var(--pk-gold);
    text-align: center;
    margin-bottom: 20px;
    animation: dp-pk-xp-float 1.5s ease forwards;
}
@keyframes dp-pk-xp-float {
    0% { transform: translateY(10px); opacity: 0; }
    30% { transform: translateY(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateY(-10px); opacity: 0.7; }
}

/* 练习建议 */
.dp-pk-tips {
    width: 100%;
    max-width: 480px;
    border-radius: 18px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 20px;
}
.dp-pk-tip-item {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.dp-pk-tip-item:last-child { margin-bottom: 0; }
.dp-pk-tip-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pk-warm);
    margin-top: 7px;
    flex-shrink: 0;
}

/* 结算按钮组 */
.dp-pk-result-actions { display: flex; gap: 10px; width: 100%; max-width: 480px; }
.dp-pk-result-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .2s;
}
.dp-pk-result-btn.primary {
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    color: white;
    box-shadow: 0 4px 16px rgba(249,115,22,0.25);
}
.dp-pk-result-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(249,115,22,0.35); }
.dp-pk-result-btn.secondary {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    color: var(--text);
    border: 1px solid var(--border);
}
.dp-pk-result-btn.secondary:hover { border-color: var(--pk-warm); color: var(--pk-warm); }

/* 旧版兼容 (result-header, result-emoji) */
.dp-pk-result-header { text-align: center; margin-bottom: 24px; }
.dp-pk-result-emoji { font-size: 56px; margin-bottom: 8px; }
.dp-pk-result-title { font-size: 26px; font-weight: 900; color: var(--text); margin-bottom: 6px; }
.dp-pk-result-sub { font-size: 14px; color: var(--text-muted); }

/* ============ 温馨提示页 ============ */
.dp-pk-warm-page {
    min-height: 100vh;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
}
.dp-pk-warm-card {
    width: 100%;
    border-radius: 20px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border);
    padding: 32px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dp-pk-warm-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(249,115,22,0.06) 0%, transparent 100%);
    pointer-events: none;
}
.dp-pk-warm-title {
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--pk-warm), var(--pk-fire));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.dp-pk-warm-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }

/* ============ 通用动画 ============ */
@keyframes dp-pk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dp-pk-pop-in {
    from { opacity: 0; transform: scale(.85); }
    to { opacity: 1; transform: scale(1); }
}


/* ===== 亮色/护眼模式 - 全链路颜色修正 ===== */

/* --- 入口页 (首页PK按钮) --- */
/* .dp-pk-entry-btn-b: bg=card-bg, color=var(--text) -> OK */
/* .dp-pk-entry-btn-c: bg=transparent, color=pk-warm -> OK */
/* .dp-pk-entry-btn-c:hover: bg=pk-warm, color=white -> OK, warm is dark */

/* --- 模式选择 Modal --- */
/* modal bg = card-bg (light: rgba(255,255,255,0.85), eye: rgba(238,230,208,0.65)) */
/* modal-title = gradient text -> OK */
/* modal-option = color: var(--text) -> OK */
/* modal-option-icon svg = white on gradient -> OK */
/* modal-option.active check dot = white on pk-warm bg -> OK */
/* modal-btn.primary = white on gradient -> OK */
/* modal-btn.secondary = text-muted, transparent bg -> OK */
/* Shimmer line too subtle on light bg */
[data-theme=light] .dp-pk-entry-btn-b::after,
[data-theme=eye] .dp-pk-entry-btn-b::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
}

/* --- 匹配页 --- */
/* player-name = var(--text) -> OK */
/* player-level bg = rgba(108,92,231,0.1) -> too subtle on light */
[data-theme=light] .dp-pk-player-level,
[data-theme=eye] .dp-pk-player-level {
    background: rgba(108,92,231,0.12);
}
[data-theme=light] .dp-pk-player-card.opp .dp-pk-player-level,
[data-theme=eye] .dp-pk-player-card.opp .dp-pk-player-level {
    background: rgba(249,115,22,0.12);
}
/* match-cancel = text-muted on card-bg -> OK but needs more contrast */
[data-theme=light] .dp-pk-match-cancel,
[data-theme=eye] .dp-pk-match-cancel {
    color: var(--text-secondary);
    border-color: var(--border);
}
[data-theme=light] .dp-pk-match-cancel:hover,
[data-theme=eye] .dp-pk-match-cancel:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
/* countdown ring-bg too faint on light bg */
[data-theme=light] .dp-pk-countdown-ring .ring-bg,
[data-theme=eye] .dp-pk-countdown-ring .ring-bg {
    stroke: rgba(120,120,150,0.2);
}
/* mystery-avatar dashed border too faint */
[data-theme=light] .dp-pk-mystery-avatar,
[data-theme=eye] .dp-pk-mystery-avatar {
    border-color: var(--pk-warm);
    color: var(--pk-warm);
}

/* --- 战斗页 --- */
/* score tug bar bg too faint */
[data-theme=light] .dp-pk-tug-bar,
[data-theme=eye] .dp-pk-tug-bar {
    background: rgba(120,120,150,0.15);
}
/* progress dots too faint */
[data-theme=light] .dp-pk-self-progress-dot,
[data-theme=eye] .dp-pk-self-progress-dot {
    background: rgba(120,120,150,0.2);
}
/* skill label = no color set, inherits from btn which has no color -> needs fix */
[data-theme=light] .dp-pk-skill-label,
[data-theme=eye] .dp-pk-skill-label {
    color: var(--text-primary);
}
/* meta item svg icons */
[data-theme=light] .dp-pk-meta-item svg,
[data-theme=eye] .dp-pk-meta-item svg {
    color: var(--accent-orange);
}
/* combo */
[data-theme=light] .dp-pk-combo,
[data-theme=eye] .dp-pk-combo {
    color: var(--pk-warm);
}
/* rec label/tip */
[data-theme=light] .dp-pk-rec-label,
[data-theme=eye] .dp-pk-rec-label {
    color: var(--text-primary);
}
[data-theme=light] .dp-pk-rec-tip,
[data-theme=eye] .dp-pk-rec-tip {
    color: var(--text-secondary);
}
/* battle timer ring bg */
[data-theme=light] .dp-pk-timer-ring .ring-bg,
[data-theme=eye] .dp-pk-timer-ring .ring-bg {
    stroke: rgba(120,120,150,0.2);
}
/* opp state backgrounds too faint */
[data-theme=light] .dp-pk-opp-state.idle,
[data-theme=eye] .dp-pk-opp-state.idle {
    background: rgba(120,120,150,0.12);
}
/* question card border */
[data-theme=light] .dp-pk-battle-question,
[data-theme=eye] .dp-pk-battle-question {
    border-color: var(--border);
}
/* guided overlay / vocab popup - dark bg in all themes -> OK */

/* --- 结算页 --- */
/* diagnosis dim bar bg */
[data-theme=light] .dp-pk-dim-bar,
[data-theme=eye] .dp-pk-dim-bar {
    background: rgba(120,120,150,0.15);
}
/* chart bar bg */
[data-theme=light] .dp-pk-chart-bars,
[data-theme=eye] .dp-pk-chart-bars {
    background: transparent;
}

/* --- 温馨提示页 --- */
/* warm-card uses card-bg, text/text-muted -> OK */

/* --- 通用: 亮色/护眼模式下所有 rgba(160,160,180,0.12) 背景太浅 --- */
[data-theme=light] .dp-pk-tug-bar,
[data-theme=eye] .dp-pk-tug-bar {
    background: rgba(120,120,150,0.15);
}
[data-theme=light] .dp-pk-self-progress-dot,
[data-theme=eye] .dp-pk-self-progress-dot {
    background: rgba(120,120,150,0.2);
}

/* ============ 桌面端适配 ============ */
@media (min-width: 768px) {
    .dp-pk-match-page { padding: 60px 40px; }
    .dp-pk-vs-section { max-width: 600px; gap: 24px; }
    .dp-pk-player-card { max-width: 220px; padding: 28px 18px; }
    .dp-pk-player-avatar { width: 64px; height: 64px; font-size: 24px; }
    .dp-pk-mystery-avatar { width: 64px; height: 64px; font-size: 32px; }
    .dp-pk-vs-badge { width: 56px; height: 56px; font-size: 18px; }
    .dp-pk-match-title { font-size: 30px; }

    .dp-pk-battle-page { max-width: 700px; padding: 16px 24px; }
    .dp-pk-q-chinese { font-size: 22px; }
    .dp-pk-rec-btn { width: 80px; height: 80px; }
    .dp-pk-skill-btn { padding: 12px 8px 10px; }

    .dp-pk-result-page { max-width: 700px; }
    .dp-pk-duel-summary { max-width: 560px; }
    .dp-pk-diagnosis, .dp-pk-question-chart, .dp-pk-tips { max-width: 560px; }
    .dp-pk-result-actions { max-width: 560px; }
    .dp-pk-verdict-text { font-size: 52px; }
}

@media (min-width: 1024px) {
    .dp-pk-match-page { padding: 80px 60px; }
    .dp-pk-vs-section { max-width: 700px; }
    .dp-pk-player-card { max-width: 260px; padding: 32px 22px; }

    .dp-pk-battle-page { max-width: 800px; }
    .dp-pk-result-page { max-width: 800px; }
}

/* ============ 移动端适配 (按钮 ≥44px) ============ */
@media (max-width: 480px) {
    .dp-pk-battle-opponent { padding: 10px 12px; }
    .dp-pk-opp-avatar { width: 32px; height: 32px; font-size: 12px; }
    .dp-pk-rec-btn { width: 64px; height: 64px; }
    .dp-pk-battle-page { padding: 10px 12px; }
    .dp-pk-modal-option { padding: 12px; }
    .dp-pk-skill-btn { padding: 8px 4px 6px; }
    .dp-pk-skill-icon { width: 28px; height: 28px; font-size: 14px; }
    .dp-pk-skill-label { font-size: 10px; }
    .dp-pk-player-card { padding: 16px 10px; }
    .dp-pk-player-avatar { width: 44px; height: 44px; font-size: 18px; }
    .dp-pk-mystery-avatar { width: 44px; height: 44px; }
    .dp-pk-vs-badge { width: 40px; height: 40px; font-size: 14px; }
    .dp-pk-verdict-text { font-size: 32px; }
}

/* ============ 每题详情 + 教练建议 ============ */
.dp-pk-questions-section,
.dp-pk-coach-section {
    max-width: 640px;
    margin: 0 auto 16px;
    padding: 16px;
}
.dp-pk-q-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.dp-pk-q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.dp-pk-q-num {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}
.dp-pk-q-score {
    font-size: 14px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 8px;
}
.dp-pk-q-score.high { background: rgba(52,211,153,0.15); color: #34d399; }
.dp-pk-q-score.mid { background: rgba(251,191,36,0.15); color: var(--pk-gold); }
.dp-pk-q-score.low { background: rgba(239,68,68,0.15); color: var(--pk-fire); }

.dp-pk-q-chinese {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.dp-pk-q-standard {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.dp-pk-q-user {
    font-size: 13px;
    color: var(--pk-warm);
    margin-bottom: 6px;
    padding: 6px 10px;
    background: rgba(249,115,22,0.08);
    border-radius: 8px;
}
.dp-pk-q-errors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dp-pk-q-err-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(239,68,68,0.12);
    color: var(--pk-fire);
}
.dp-pk-q-missing-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(251,191,36,0.12);
    color: var(--pk-gold);
}

/* 教练建议 */
.dp-pk-coach-loading {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 12px;
}
.dp-pk-coach-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}
.dp-pk-coach-item:last-child { border-bottom: none; }
.dp-pk-coach-wrong {
    font-size: 13px;
    color: var(--pk-fire);
    text-decoration: line-through;
    min-width: 60px;
}
.dp-pk-coach-right {
    font-size: 13px;
    color: #34d399;
    font-weight: 600;
    min-width: 60px;
}
.dp-pk-coach-why {
    font-size: 12px;
    color: var(--text-secondary);
}
.dp-pk-coach-how {
    font-size: 12px;
    color: var(--pk-warm);
}
.dp-pk-coach-tip {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 12px;
    padding: 10px;
    background: rgba(249,115,22,0.12);
    border-radius: 8px;
}
.dp-pk-coach-cheer {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin-top: 8px;
    color: var(--pk-gold);
}

/* ============ 护眼模式动画降级 ============ */
[data-theme="eye"] .dp-pk-rec-btn.recording { animation: none; }
[data-theme="eye"] .dp-pk-opp-state.thinking { animation: none; }
[data-theme="eye"] .dp-pk-match-dot { animation: none; opacity: 0.6; }
[data-theme="eye"] .dp-pk-mystery-avatar { animation: none; }
[data-theme="eye"] .dp-pk-skill-btn.available .dp-pk-skill-icon { animation: none; }
[data-theme="eye"] .dp-pk-vs-badge { animation: none; }
[data-theme="eye"] .dp-pk-match-ripple::before,
[data-theme="eye"] .dp-pk-match-ripple::after { animation: none; opacity: 0.3; }
[data-theme="eye"] .dp-pk-entry-btn-b::after { animation: none; display: none; }
[data-theme="eye"] .dp-pk-battle-question::after { animation: none; display: none; }

/* ===== 去AI感 - PK区亮色/护眼主题适配 ===== */
[data-theme=light] .dp-pk-player-card.me { background: linear-gradient(90deg, rgba(108,92,231,0.03) 0%, var(--card-bg) 30%); }
[data-theme=eye] .dp-pk-player-card.me { background: linear-gradient(90deg, rgba(108,92,231,0.02) 0%, var(--card-bg) 30%); }
[data-theme=light] .dp-pk-player-card.opp { background: linear-gradient(270deg, rgba(249,115,22,0.03) 0%, var(--card-bg) 30%); }
[data-theme=eye] .dp-pk-player-card.opp { background: linear-gradient(270deg, rgba(249,115,22,0.02) 0%, var(--card-bg) 30%); }
[data-theme=light] .dp-pk-battle-question::before { background: linear-gradient(180deg, rgba(108,92,231,0.03) 0%, transparent 100%); }
[data-theme=eye] .dp-pk-battle-question::before { background: linear-gradient(180deg, rgba(108,92,231,0.02) 0%, transparent 100%); }
[data-theme=light] .dp-pk-blank-word { box-shadow: 0 2px 6px rgba(168,85,247,0.12); }
[data-theme=eye] .dp-pk-blank-word { box-shadow: 0 2px 6px rgba(168,85,247,0.08); }
[data-theme=light] .dp-pk-duel-card.me::before { background: linear-gradient(90deg, rgba(108,92,231,0.04) 0%, transparent 100%); }
[data-theme=eye] .dp-pk-duel-card.me::before { background: linear-gradient(90deg, rgba(108,92,231,0.03) 0%, transparent 100%); }
[data-theme=light] .dp-pk-duel-card.opp::before { background: linear-gradient(270deg, rgba(249,115,22,0.04) 0%, transparent 100%); }
[data-theme=eye] .dp-pk-duel-card.opp::before { background: linear-gradient(270deg, rgba(249,115,22,0.03) 0%, transparent 100%); }
[data-theme=light] .dp-pk-warm-card::before { background: linear-gradient(180deg, rgba(249,115,22,0.03) 0%, transparent 100%); }
[data-theme=eye] .dp-pk-warm-card::before { background: linear-gradient(180deg, rgba(249,115,22,0.02) 0%, transparent 100%); }
[data-theme=light] .dp-pk-coach-tip { background: rgba(249,115,22,0.08); }
[data-theme=eye] .dp-pk-coach-tip { background: rgba(249,115,22,0.06); }