/* ═══════════════════════════════════════════════════════════════════
   短语动词配对 Phrasal Verb Match (E5) — /chs/English/PhrasalVerbs
   主色：藏青 #1e3a8a → #2b4bb5。英语学习中心里蓝色不少，但都是中亮度的
   （#0d6efd、#2563eb、#0284c7），这一档深藏青在卡片网格里仍然分得出来。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 等级选择 ─────────────────────────────────────────────────────── */
.pv-level-btn {
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pv-level-btn:hover {
    border-color: #2b4bb5;
}

.pv-level-btn.active {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

/* ── 牌面 ─────────────────────────────────────────────────────────── */
.pv-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 40rem;
    margin: 0 auto;
}

.pv-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pv-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0.6rem 1.4rem 0.6rem 0.7rem;
    border: 2px solid #c7d2fe;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 0.6rem;
    cursor: pointer;
    text-align: center;
    line-height: 1.25;
    transition: transform 0.1s, background-color 0.15s, border-color 0.15s, opacity 0.2s;
}

.pv-tile:hover:not(:disabled) {
    border-color: #2b4bb5;
    transform: translateY(-2px);
}

.pv-tile:disabled {
    cursor: default;
}

.pv-tile-text {
    font-size: clamp(0.92rem, 3.4vw, 1.08rem);
    font-weight: 600;
}

.pv-tile-verb .pv-tile-text {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pv-tile-num {
    position: absolute;
    top: 0.2rem;
    right: 0.4rem;
    font-size: 0.65rem;
    opacity: 0.4;
}

.pv-tile-selected {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

.pv-tile-wrong {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* 配对成功的牌留在原位变淡——整版清空之后才发下一版，
   所以这里要看得出「已经消掉」，但不能空出格子。 */
.pv-tile-done {
    background: #198754;
    border-color: #198754;
    color: #fff;
    opacity: 0.45;
}

/* ── 例句 ─────────────────────────────────────────────────────────── */
.pv-example {
    background: rgba(43, 75, 181, 0.09);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
    text-align: center;
}

.pv-example-verb {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e3a8a;
}

.pv-example-meaning {
    opacity: 0.85;
}

.pv-example-sentence {
    margin-top: 0.15rem;
    font-size: 1rem;
}

.pv-example-note {
    opacity: 0.8;
    margin-top: 0.15rem;
}

/* ── 结算 ─────────────────────────────────────────────────────────── */
.pv-review-verb {
    font-weight: 700;
    color: #1e3a8a;
}

.pv-review-sentence {
    opacity: 0.85;
}

/* ── 深色模式 ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .pv-tile { border-color: #3b4a7a; }
[data-bs-theme="dark"] .pv-tile:hover:not(:disabled) { border-color: #93a9f5; }
[data-bs-theme="dark"] .pv-tile-selected { background: #2b4bb5; border-color: #2b4bb5; }
[data-bs-theme="dark"] .pv-level-btn.active { background: #2b4bb5; border-color: #2b4bb5; }
[data-bs-theme="dark"] .pv-example { background: rgba(147, 169, 245, 0.14); }
[data-bs-theme="dark"] .pv-example-verb { color: #93a9f5; }
[data-bs-theme="dark"] .pv-review-verb { color: #93a9f5; }