/* public/assets/css/audio/online-piano.css */

.piano-wrapper { padding: 32px; border-radius: var(--radius-lg); position: relative; }
.piano-header { text-align: center; margin-bottom: 32px; }
.piano-title { font-size: 2rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; letter-spacing: -0.5px; }
.piano-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* 🌟 核心主界面：正常状态 (内嵌在网页中) */
.synth-panel { max-width: 1200px; margin: 0 auto 32px auto; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 2px solid #334155; border-radius: 16px; padding: 24px; box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 20px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; transition: all 0.3s ease; }

/* 🌟 核心主界面：全屏状态 (动态追加此类即可瞬间全屏) */
.synth-panel.is-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; max-width: none; border-radius: 0; margin: 0; padding: 32px; z-index: 9999; box-sizing: border-box; }

/* 顶部操作面板 */
.synth-top-panel { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.piano-controls { flex: 1; display: flex; justify-content: flex-start; align-items: center; gap: 20px; background: rgba(0,0,0,0.2); padding: 12px 20px; border-radius: 8px; border: 1px solid #1e293b; box-shadow: inset 0 4px 10px rgba(0,0,0,0.3); }

/* 全屏切换按钮 */
.piano-btn-full { padding: 8px 16px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border: none; color: #fff; border-radius: 6px; font-weight: 800; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); text-transform: uppercase; font-size: 0.85rem; }
.piano-btn-full:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(59, 130, 246, 0.6); }
.piano-divider { width: 1px; height: 30px; background: #334155; margin: 0 8px; }

.piano-control-group { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.piano-control-group label { font-size: 0.75rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }

.piano-slider { -webkit-appearance: none; width: 100px; height: 6px; background: #0f172a; border-radius: 3px; outline: none; border: 1px solid #334155; }
.piano-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 24px; border-radius: 4px; background: linear-gradient(to bottom, #94a3b8, #475569); cursor: pointer; border: 1px solid #cbd5e1; }
.piano-select { background: #0f172a; color: #38bdf8; border: 1px solid #334155; padding: 6px 12px; border-radius: 4px; font-weight: 700; font-family: monospace; outline: none; cursor: pointer; }

/* 录音台 */
.piano-recording-deck { background: #18181b; padding: 12px; border-radius: 8px; border: 1px solid #27272a; border-top: 1px solid #3f3f46; display: flex; flex-direction: column; align-items: center; width: 280px; }
.deck-led-screen { background: #09090b; border: 2px solid #27272a; border-radius: 6px; padding: 8px 16px; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); box-sizing: border-box; }
.led-status { color: #10b981; font-family: 'Courier New', Courier, monospace; font-size: 0.8rem; font-weight: 700; }
.led-status.recording { color: #ef4444; animation: blink 1s infinite; }
.led-timer { color: #ef4444; font-family: 'Courier New', Courier, monospace; font-size: 1.2rem; font-weight: 800; }
@keyframes blink { 50% { opacity: 0.5; } }
.deck-actions { display: flex; gap: 8px; width: 100%; }
.deck-btn { flex: 1; padding: 6px 0; font-size: 0.75rem; font-weight: 800; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: 0.1s; }
.deck-btn:active:not([disabled]) { transform: translateY(2px); }
.deck-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-rec { background: #dc2626; } .btn-stop { background: #52525b; } .btn-save { background: #2563eb; }

/* 演示条 */
.piano-demo-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; background: rgba(0,0,0,0.2); padding: 10px 16px; border-radius: 8px; border: 1px solid #1e293b; }
.demo-label { font-size: 0.8rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.demo-btn { padding: 6px 16px; background: #334155; color: #f8fafc; border: 1px solid #475569; border-radius: 4px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: 0.2s; }
.demo-btn:hover { background: #10b981; border-color: #059669; }
.demo-btn.btn-danger { background: #ef4444; }

/* 🎹 100% 自适应键盘底座 */
/* 普通模式下给个固定高度 280px，全屏模式下 flex:1 撑满剩余高度 */
.piano-keyboard-base { background: #000; padding: 12px 12px 32px 12px; border-radius: 8px; border: 1px solid #334155; position: relative; box-shadow: inset 0 10px 20px rgba(0,0,0,0.8); height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.synth-panel.is-fullscreen .piano-keyboard-base { height: auto; flex: 1; }

.piano-brand-logo { position: absolute; bottom: 8px; right: 20px; font-family: 'Times New Roman', Times, serif; font-style: italic; font-weight: 800; color: #334155; font-size: 1.2rem; letter-spacing: 2px; z-index: 10; }

.piano-keyboard-container { width: 100%; height: 100%; position: relative; }
.piano-keyboard { display: flex; width: 100%; height: 100%; list-style: none; padding: 0; margin: 0; user-select: none; position: relative; }

/* 白键自适应 */
.key-white { flex: 1; position: relative; background: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%); border: 1px solid #94a3b8; border-bottom: 4px solid #cbd5e1; border-radius: 0 0 6px 6px; cursor: pointer; transition: background 0.1s, transform 0.1s, border-bottom 0.1s; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.key-white.active, .key-white.demo-active { background: linear-gradient(to bottom, #f1f5f9 0%, #cbd5e1 100%); transform: translateY(2px) rotateX(2deg); border-bottom: 2px solid #94a3b8; box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.key-white.demo-active { background: linear-gradient(to bottom, #dbeafe 0%, #bfdbfe 100%); border-color: #3b82f6; }
.key-white .key-label { color: #64748b; font-weight: 800; font-size: 0.9rem; font-family: monospace; pointer-events: none; }
.key-white .key-note { color: #94a3b8; font-size: 0.65rem; margin-top: 4px; pointer-events: none; }

/* 黑键完美吸附 */
.key-black { position: absolute; top: 0; height: 60%; background: linear-gradient(to bottom, #334155 0%, #000000 100%); border: 1px solid #000; border-bottom: 6px solid #0f172a; border-radius: 0 0 4px 4px; z-index: 2; cursor: pointer; transition: background 0.1s, transform 0.1s, border-bottom 0.1s; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.8); transform: translateX(-50%); }
.key-black.active, .key-black.demo-active { background: linear-gradient(to bottom, #1e293b 0%, #000000 100%); border-bottom: 2px solid #000; transform: translateX(-50%) translateY(2px) scale(0.98); }
.key-black.demo-active { background: linear-gradient(to bottom, #1e3a8a 0%, #000000 100%); border-bottom-color: #3b82f6; }
.key-black .key-label { color: #64748b; font-weight: 700; font-size: 0.75rem; font-family: monospace; pointer-events: none; }

/* 🎛️ 延音踏板设计 */
.piano-pedal-zone { margin-top: 20px; display: flex; justify-content: center; }
.piano-pedal-btn { width: 60%; max-width: 500px; padding: 16px; font-size: 1rem; font-weight: 800; color: #94a3b8; background: linear-gradient(to bottom, #1e293b, #0f172a); border: 2px solid #334155; border-radius: 12px; border-bottom: 6px solid #020617; cursor: pointer; transition: 0.1s; box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.5); text-transform: uppercase; letter-spacing: 2px; }
.piano-pedal-btn.active { background: linear-gradient(to bottom, #3b82f6, #1d4ed8); color: #fff; border-color: #60a5fa; border-bottom: 2px solid #1e3a8a; transform: translateY(4px); box-shadow: inset 0 4px 8px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.5); }

/* 🎼 简谱展示板 */
.piano-sheet-board { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.sheet-title { font-size: 1.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; }
.sheet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sheet-list li { font-family: 'Courier New', Courier, monospace; font-size: 1.15rem; color: var(--text-muted); font-weight: 600; letter-spacing: 2px; }

.piano-info-card { background: var(--bg-surface); padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); max-width: 1200px; margin: 0 auto; box-sizing: border-box; }

@media (max-width: 768px) {
    .synth-top-panel { flex-direction: column; align-items: stretch; }
    .piano-controls, .piano-recording-deck { width: 100%; min-width: auto; justify-content: center; }
    .piano-slider { width: 80px; }
    .piano-keyboard-base { height: 220px; }
}