/* Music Room: Learn mode */
.mu-lpath[hidden], .mu-lesson[hidden] { display: none !important; }
.mu.mu-cons[data-mode="learn"] > #learn { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 10px; }
@media (min-width: 761px) { .mu.mu-cons[data-mode="learn"] > #learn { display: block; } }
.mu-learn .mu-lpath, .mu-learn .mu-lesson { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.mu-ltrack { justify-content: center; }
.mu-lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.mu-lt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 4px 8px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 20px; background: var(--s2, #FBF9F4); color: var(--tx, #16202C); font: 600 12px/1.15 Inter, system-ui, sans-serif; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, transform .12s; }
.mu-lt:hover { background: #fff; }
.mu-lt:active { transform: scale(.97); }
.mu-li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.mu-ln { min-width: 0; overflow-wrap: anywhere; }
.mu-ls { display: flex; gap: 2px; color: #D9D3C6; min-height: 13px; }
.mu-st.on { color: #E0A21E; } .mu-st.on svg { fill: currentColor; }
.mu-lt.done { background: #fff; }
.mu-lt.next { border-color: var(--acc, #145C63); background: var(--acc-d, rgba(20,92,99,.07)); }
.mu-lhead { display: flex; align-items: center; gap: 10px; }
.mu-lhead h3 { flex: 1 1 auto; margin: 0; font-size: 19px; font-weight: 400; min-width: 0; }
.mu-lback { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 999px; background: #fff; color: var(--tx, #16202C); cursor: pointer; flex: none; }
.mu-ldots { display: flex; gap: 4px; }
.mu-ldots i { width: 7px; height: 7px; border-radius: 50%; background: #E4DFD3; transition: background .2s, transform .2s; }
.mu-ldots i.done { background: var(--acc, #145C63); } .mu-ldots i.cur { background: #E0A21E; transform: scale(1.35); }
.mu-lstage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.mu-lsay { margin: 0; min-height: 24px; font: 400 20px/1.25 Fraunces, Georgia, serif; color: var(--tx, #16202C); }
.mu-lact { display: flex; justify-content: center; gap: 10px; flex: none; }
.mu-lact .mu-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.mu-lact .mu-btn[disabled] { opacity: .4; }
.mu-rib { display: grid; grid-template-columns: repeat(var(--rc, 5), minmax(48px, 56px)); justify-content: center; gap: 8px; }
.mu-note { height: 52px; padding: 0 4px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 16px; background: #fff; color: var(--tx, #16202C); font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .1s, border-color .1s, transform .1s; }
.mu-note.on { background: var(--acc-d, rgba(20,92,99,.1)); border-color: var(--acc, #145C63); color: var(--acc, #145C63); transform: scale(1.06); }
.mu-note.bad { border-color: #D6456B; background: #FCE9EE; animation: muShake .3s; }
.mu-note.hint { border-color: #E0A21E; box-shadow: 0 0 0 4px rgba(224,162,30,.25); }
.mu-note.vadi { border-color: #D6456B; } .mu-note.samv { border-color: #0E7C86; }
.mu-pdots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.mu-pdots i { width: 9px; height: 9px; border-radius: 50%; background: #E4DFD3; transition: background .15s, transform .15s; }
.mu-pdots i.done { background: #2E9E6B; transform: scale(1.15); }
.mu-info { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mu-itime { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--s3, #F3EFE6); font: 600 13px/1 Inter, system-ui, sans-serif; color: #C77B1E; }
.mu-itime span { color: var(--tx, #16202C); }
.mu-ikey { display: flex; gap: 14px; font: 600 12px/1 Inter, system-ui, sans-serif; }
.mu-ikey span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.mu-ikey .vadi::before { background: #D6456B; } .mu-ikey .samv::before { background: #0E7C86; }
.mu-cmp { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }
.mu-cmpb { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 999px; background: #fff; font: 700 16px/1 Inter, system-ui, sans-serif; color: var(--tx, #16202C); cursor: pointer; }
.mu-cmpb i { color: #B9B2A2; display: grid; } .mu-cmpb.on { border-color: var(--acc, #145C63); background: var(--acc-d, rgba(20,92,99,.07)); }
.mu-qa { display: flex; gap: 12px; }
.mu-big { min-width: 116px; min-height: 56px; font-size: 16px; }
.mu-opt.good { background: #E3F5EC; border-color: #2E9E6B; color: #1E7A50; } .mu-opt.bad { background: #FCE9EE; border-color: #D6456B; animation: muShake .3s; }
.mu-lgridbeats { display: grid; grid-template-columns: repeat(var(--tcols, 4), minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 380px; }
.mu-lgridbeats .mu-beat { padding: 6px 2px; min-height: 58px; }
.mu-lgridbeats .mu-beat b { font-size: 14px; } .mu-beat.long b { font-size: 11px; }
.mu-clapbtn { background: #D6456B !important; } .mu-clapbtn.on { transform: scale(.94); filter: brightness(1.1); }
.mu-setup { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.mu-row3 { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mu-sa { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 84px; border: 1px solid var(--acc, #145C63); border-radius: 26px; background: var(--acc-d, rgba(20,92,99,.07)); font: 400 34px/1 Fraunces, Georgia, serif; color: var(--acc, #145C63); cursor: pointer; }
.mu-sa small { font: 600 10px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; color: #6B7480; }
.mu-round { width: 46px; min-width: 0 !important; padding: 0 !important; }
.mu-live { display: grid; grid-auto-flow: column; align-items: baseline; gap: 6px; min-height: 40px; font: 700 28px/1 Fraunces, Georgia, serif; color: var(--acc, #145C63); } .mu-live small { font-size: 16px; color: #E0A21E; }
.mu.mu-cons .mu-lact .mu-btn.ghost { background: var(--s1, #fff) !important; color: var(--tx, #16202C) !important; }
@keyframes muShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* mode tab, six tabs, taal grid columns */
.mu.mu-cons .mu-mode[data-m="learn"] svg { color: #2E9E6B; }
@media (max-width: 760px) { .mu.mu-cons .mu-modes { grid-template-columns: repeat(6, 1fr); } .mu.mu-cons .mu-mode span { font-size: 11px; } }
.mu.mu-cons .mu-taal { grid-template-columns: repeat(var(--tcols, 4), minmax(0, 1fr)); }
.mu.mu-cons .mu-beat.long b { font-size: 11px; }
.mu.mu-cons #tsel { flex-wrap: wrap; justify-content: center; gap: 5px; }
.mu.mu-cons #tsel .mu-opt { min-height: 32px; padding: 0 11px; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) { .mu.mu-cons[data-mode="learn"] > #learn { animation: muIn .28s cubic-bezier(.2,.7,.2,1) both; } .mu-bigstars .mu-st.on { animation: muPop .4s cubic-bezier(.3,1.5,.5,1) both; } .mu-lt.next .mu-li { animation: muPop 1.6s ease-in-out infinite alternate; } }
.mu-bigstars { display: flex; gap: 8px; color: #D9D3C6; } .mu-bigstars svg { width: 44px; height: 44px; }
@media (max-width: 760px) and (max-height: 740px) {
  .mu-lstage { gap: 10px; } .mu-lsay { font-size: 17px; min-height: 20px; }
  .mu-learn .mu-lpath, .mu-learn .mu-lesson { gap: 8px; }
  .mu-note { height: 44px; } .mu-rib { gap: 6px; }
  .mu-lact .mu-btn { min-height: 42px; padding: 0 18px; }
  .mu-cmpb { min-height: 38px; } .mu-cmp { gap: 6px; }
  .mu-lgridbeats { gap: 4px; } .mu-lgridbeats .mu-beat { min-height: 38px; padding: 2px 1px; gap: 0; } .mu-lgridbeats .mu-beat .n { display: none; } .mu-lgridbeats .mu-beat b { font-size: 12px; }
  .mu-lgridbeats .mu-beat i { min-height: 12px; } .mu-lgridbeats .mu-beat i svg { width: 12px; height: 12px; }
  .mu-info { gap: 10px; } .mu-lt { min-height: 78px; } .mu-li { width: 34px; height: 34px; }
  .mu.mu-cons .mu-taal { grid-auto-rows: minmax(36px, 1fr); gap: 4px; } .mu.mu-cons .mu-taal .mu-beat .n { display: none; }
  .mu.mu-cons #tsel .mu-opt { min-height: 28px; padding: 0 9px; }
}
@media (max-width: 760px) and (max-height: 680px) { .mu-lgridbeats .mu-beat { min-height: 33px; } .mu-lstage { gap: 6px; } .mu-lsay { font-size: 16px; } }