.circle-container {
    position: relative;
    width: clamp(280px, 85vw, 360px);
    aspect-ratio: 1 / 1;
}

.outer-circle,
.inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.outer-circle {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85em;
    font-weight: bold;
}

.note-label {
    width: 42px;
    height: 42px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.note[data-is-black-key="true"] .note-label {
    background-color: #333;
    color: #fff;
    border-color: #000;
}

.inner-circle {
    width: 60%;
    height: 60%;
    background-color: #e9eef2;
    border: 1px solid #ccc;
    transition: transform 0.5s cubic-bezier(0.68, -0.15, 0.27, 1.15);
}

.degree {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px;
    font-size: 1.1em;
    background-color: #ff9800;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.current-key-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.key-name {
    font-size: 1.6em;
    font-weight: bold;
    display: block;
    color: #2c3e50;
}

.key-mode {
    font-size: 1.1em;
    color: #7f8c8d;
}

/* ================================== */
/* 钢琴键盘 (移动设备优先)         */
/* ================================== */

/* --- 主音指示器 (Tonic Indicator) --- */
.tonic-indicator {
    display: none;
    position: absolute;
    top: -42px;
    /* 保持在琴键上方 42px (由 .piano 的 margin-top 腾出空间) */
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.tonic-indicator.show {
    display: flex;
}

.tonic-text {
    background-color: #2c3e50;
    color: white;
    font-size: 0.8em;
    /* 0.8em 在小屏幕上已经很合适了 */
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.tonic-triangle {
    color: #2c3e50;
    font-size: 1.2em;
    line-height: 0.8;
    margin-top: -1px;
}

/* --- 钢琴 (Mobile Base Styles) --- */
.piano-container {
    padding-bottom: 20px;
    overflow-y: hidden;
}

.piano {
    display: flex;
    flex-wrap: nowrap;
    /* 关键：强制单行 */
    padding: 0;
    margin: 42px auto 20px;
    /* 保持 42px 顶部空间给指示器, 20px 底部空间给阴影和位移 */
    list-style: none;
    height: 180px;
    /* 移动端高度减小 */
    width: fit-content;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Create stacking context for keys */
    position: relative;
    z-index: 0;
}

.piano .white {
    width: 35px;
    /* 移动端宽度减小 */
    position: relative;
    height: 100%;
    background-color: #fff;
    border: 1px solid #b3b3b3;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.05s ease-out, background-color 0.2s ease, border-color 0.2s ease;
}

.piano .black {
    width: 22px;
    /* 移动端宽度减小 */
    height: 60%;
    position: absolute;
    top: 0;
    left: 100%;
    transform: translateX(-50%);
    background-color: #2c3e50;
    border: 2px solid #2c3e50;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.05s ease-out, background-color 0.2s ease, border-color 0.2s ease;
}

/* --- 1. [!! 修复 !!] --- */
/* * 白键“按下”规则：
 * 只有在它自己被按下 (:active)，
 * 并且 (NOT) 它的子元素中没有黑键是 :active 状态时，才应用此样式。
 */
.piano .white:active:not(:has(.black:active)),
.piano .white.active:not(:has(.black:active)) {
    background-color: #ffd700;
    /* Bright Yellow for obvious press */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transform: translateY(2px);
}

/* --- 2. (不变) --- */
/* 黑键的 "按下" 规则保持不变 */
.piano .black:active,
.piano .black.active {
    background-color: #ffc107;
    /* Amber for black keys */
    transform: translateX(-50%) translateY(2px);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

/* --- 3. (可选，但推荐) --- */
/* * 同样，防止高亮的白键在黑键被按下时也改变颜色
 */
.piano .white.highlight:active:not(:has(.black:active)),
.piano .white.highlight.active:not(:has(.black:active)) {
    background-color: #5a8fbb;
    /* 或者一个比 #6ba5d7 稍暗的颜色 */
}

.piano .white.select-highlight:active:not(:has(.black:active)),
.piano .white.select-highlight.active:not(:has(.black:active)) {
    background-color: #ffc446;
    /* 或者一个比 #ffc446 稍暗的颜色 */
}

/* (黑键高亮的 :active 规则不需要变，因为它们没有子元素) */
.piano .black.highlight:active,
.piano .black.select-highlight:active,
.piano .black.highlight.active,
.piano .black.select-highlight.active {
    background-color: #495057;
    /* 保持一致的”按下”颜色 */
}

/* --- Keyboard Focus Styles (Accessibility) --- */
.piano .white:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: -3px;
    z-index: 3;
}

.piano .black:focus-visible {
    outline: 3px solid #0dcaf0;
    outline-offset: -3px;
    z-index: 4;
}

/* --- 琴键文字 (Mobile Base Styles) --- */
.note-name {
    font-size: 0.8em;
    /* 移动端字体减小 */
    position: absolute;
    bottom: 8px;
    /* 调整位置 */
    width: 100%;
    left: 0;
    text-align: center;
    color: #a0a0a0;
    pointer-events: none;
}

.black .note-name {
    color: #d0d0d0;
    font-size: 0.75em;
}

.scale-degree {
    font-size: 1em;
    /* 移动端字体减小 */
    position: absolute;
    top: 65%;
    width: 100%;
    left: 0;
    text-align: center;
    font-weight: bold;
    color: #2c3e50;
    pointer-events: none;
    display: none;
}

.black .scale-degree {
    top: 50%;
    color: #ffffff;
}

.piano .highlight .scale-degree {
    display: block;
}

/* --- 黑键指示器 (不变) --- */
.black .tonic-text {
    background-color: #f8f9fa;
    color: #2c3e50;
    border: 1px solid #ccc;
}

.black .tonic-triangle {
    color: #f8f9fa;
}

/* ================================== */
/* 桌面端 (平板及以上) 样式覆盖    */
/* ================================== */
@media (min-width: 768px) {
    .piano {
        height: 240px;
        /* 恢复桌面端高度 */
    }

    .piano .white {
        width: 45px;
        /* 恢复桌面端白键宽度 */
    }

    .piano .black {
        width: 28px;
        /* 恢复桌面端黑键宽度 */
    }

    .note-name {
        font-size: 1em;
        /* 恢复桌面端字体 */
        bottom: 10px;
    }

    .black .note-name {
        font-size: 0.9em;
    }

    .scale-degree {
        font-size: 1.3em;
        /* 恢复桌面端字体 */
    }
}

/* --- 五线谱 (缩小) --- */
@font-face {
    font-family: 'Bravura';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(/fonts/bravura-latin-400-normal.woff2) format('woff2'), url(/fonts/bravura-latin-400-normal.woff) format('woff');
}

.staff-wrapper {
    position: relative;
    width: 400px; /* 固定宽度确保高低音谱表有足够的呼吸空间 */
    height: 5em;
    font-size: 20px;
    color: #000;
    margin: 40px auto; /* 居中显示 */

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.staff-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #000;
}

.note-line {
    position: absolute;
    left: 10px;
    bottom: 8px;
    width: 40px;
    height: 2px;
    background-color: #000;
}

.clef,
.accidental {
    font-family: 'Bravura', serif !important;
    position: absolute;
    line-height: 1;
    display: flex;
    align-items: center;
    transform: translateY(-1.7em);
}

.music-staff-note {
    font-family: 'Bravura', serif !important;
    position: absolute;
    line-height: 1;
    display: flex;
    align-items: center;
    transform: translateY(-3.4em); /* 恢复音符的正确偏移 */
    z-index: 20;
}

.music-staff-accidental {
    font-family: 'Bravura', serif !important;
    position: absolute;
    line-height: 1;
    display: flex;
    align-items: center;
    transform: translateY(-2.9em); /* 恢复音符升降号的正确偏移 */
    z-index: 20;
}

.key-signature-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.select-highlight {
    background-color: #ffc446 !important;
    border-color: #5a8fbb;
}

.exam-answer {
    padding: 4rem 0 0 0;
    border: 1px solid transparent !important;
    transition: border-color 0.3s ease;
    cursor: pointer;
}

.exam-answer:hover {
    border-color: var(--bs-primary) !important;
}

/* ================================== */
/* 音乐五线谱控件 (MusicStaff.js) 样式 */
/* ================================== */

/* 调号、谱号、音符、升降号均共享 .clef, .accidental, .music-staff-note, .music-staff-accidental 类并统一偏移 */

/* =================================================================
 * == MusicStaff.js 控件样式
 * ================================================================= */

/* ... 你现有的 .staff-wrapper, .staff-line, .clef 等样式 ... */

/* [新添加] 用于 C4 或 A5 等音符的加线 */
.music-staff-ledger-line {
    position: absolute;

    /* * 符头的宽度大约是 1em。
     */
    width: 2.2em;

    /* * 关键：加线的 top 是由 JS (style.top) 设置的。
     * 我们需要将它 Y 轴居中，因为它的 top 是线的中心。
     * 假设线高 2px。
     */
    height: 2px;
    margin-top: -1px;
    /* 垂直居中 */

    background-color: black;

    /* * 确保它显示在谱号/调号的后面，
     * 但在音符的前面 (如果需要)。
     * Note: .music-staff-note 默认 z-index 是 20。
     */
    z-index: 10;
}

/* [修改] 确保音符和升降号在加线 *之上* */
.music-staff-note {
    position: absolute;
    /* ... (来自 site.css) transform: translateY(-1.7em); */
    z-index: 20;
    /* 确保在加线 (10) 之上 */
}

.music-staff-accidental {
    position: absolute;
    /* ... (来自 site.css) transform: translateY(-1.7em); */
    z-index: 20;
    /* 确保在加线 (10) 之上 */
}

/*
 Exam
 */

.exam-answer {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.exam-answer:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}