/* Styles for the Music Lab. */
.mu-piano { position: relative; display: flex; height: clamp(150px, calc(30 * var(--vw)), 230px); user-select: none; -webkit-user-select: none; touch-action: none; border-radius: 0 0 14px 14px; overflow: hidden; border: 3px solid #23263a; background: #23263a; }
.mu-key { flex: 1; position: relative; background: linear-gradient(180deg, #fff, #e6ebf5); border: 0; border-right: 2px solid #23263a; border-radius: 0 0 8px 8px; cursor: pointer; padding: 0; color: #14204a; font-weight: 700; font-size: 12px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding-bottom: 8px; min-width: 0; }
.mu-key:last-child { border-right: 0; } .mu-key small { color: #7a86a8; font-weight: 600; font-size: 10px; }
.mu-key.on, .mu-key.hint { background: linear-gradient(180deg, #ffe27f, #ffcb3d); } .mu-key.hint { box-shadow: inset 0 0 0 4px #ff8a3d; }
.mu-black { position: absolute; top: 0; width: 0; height: 60%; z-index: 2; pointer-events: none; }
.mu-black button { position: absolute; left: 0; top: 0; transform: translateX(-50%); width: clamp(16px, calc(4.2 * var(--vw)), 34px); height: 100%; background: linear-gradient(180deg, #3b4266, #14182c); border: 0; border-radius: 0 0 6px 6px; cursor: pointer; pointer-events: auto; color: #cfd8f5; font-size: 9px; padding: 0 0 6px; display: flex; align-items: flex-end; justify-content: center; }
.mu-black button.on, .mu-black button.hint { background: linear-gradient(180deg, #ffb020, #d48a00); color: #2a1a00; }
.mu-fret { display: grid; gap: 0; background: linear-gradient(180deg, #8a5a2b, #6b4220); border-radius: 12px; padding: 10px 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mu-string { display: grid; grid-template-columns: 54px repeat(5, 1fr); align-items: center; height: clamp(34px, calc(7 * var(--vw)), 46px); position: relative; }
.mu-string::after { content: ""; position: absolute; left: 54px; right: 0; top: 50%; height: var(--th, 2px); background: linear-gradient(180deg, #f5f0e0, #a89a78); transform: translateY(-50%); pointer-events: none; }
.mu-string.vib::after { animation: mu-vib .25s linear 3; } @keyframes mu-vib { 25% { transform: translateY(-80%); } 75% { transform: translateY(-20%); } }
.mu-string button { height: 100%; border: 0; border-right: 3px solid #d9c9a0; background: transparent; cursor: pointer; position: relative; z-index: 1; color: #fff; font-weight: 700; padding: 0; }
.mu-string button:first-child { border-right: 6px solid #f4f0e6; background: rgba(0,0,0,.25); border-radius: 8px 0 0 8px; font-size: 13px; }
.mu-string button.dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.mu-pads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.mu-pad { aspect-ratio: 1.25; border-radius: 22px; border: 0; cursor: pointer; color: #fff; font-weight: 800; font-size: calc(15px * var(--k)); box-shadow: 0 6px 0 rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: manipulation; }
.mu-pad .e { font-size: calc(30px * var(--k)); } .mu-pad small { opacity: .8; font-weight: 600; } .mu-pad.hit { transform: translateY(4px) scale(.97); box-shadow: 0 2px 0 rgba(0,0,0,.35); filter: brightness(1.3); }
.mu-seq { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.mu-row { display: grid; grid-template-columns: 62px repeat(var(--steps, 16), minmax(22px, 1fr)); gap: 3px; align-items: center; }
.mu-row > span { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.mu-cell { height: calc(26px * var(--k)); border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; padding: 0; }
.mu-cell.b4 { border-left: 3px solid var(--line2); } .mu-cell.on { background: var(--c, var(--c-music)); border-color: #fff; } .mu-cell.play { outline: 2px solid var(--gold); }
.mu-staff { display: block; width: min(100%, 420px); margin: 0 auto; background: #fff; border-radius: 14px; }
.mu-path { display: flex; flex-wrap: wrap; gap: 8px; } .mu-path span { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line2); font-weight: 700; font-size: 13px; } .mu-path span.done { background: var(--c-music); border-color: var(--c-music); color: #fff; }
.mu-vis { position: fixed; inset: 0; z-index: 160; background: radial-gradient(circle at 50% 100%, #5b3bd1, #050a24 70%); display: grid; place-items: center; text-align: center; color: #fff; }
.mu-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .mu-vis .front { position: relative; z-index: 1; }
.mu-meter { height: 26px; border-radius: 999px; background: linear-gradient(90deg, #ef4a63, #ffcb3d 40%, #1fb863 50%, #ffcb3d 60%, #ef4a63); position: relative; max-width: 420px; margin: 10px auto; }
.mu-meter i { position: absolute; top: -6px; width: 6px; height: 38px; background: #fff; border-radius: 3px; left: 50%; transition: left .1s; box-shadow: 0 0 6px #000; }
@media (max-width: 700px) { .mu-songs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .mu-songs .kchip { flex: none; } .mu-row { grid-template-columns: 48px repeat(var(--steps, 16), minmax(26px, 1fr)); } }
.mu-row > span { background: transparent; }