/* Music Room: Jam mode */
.mu.mu-cons[data-mode="jam"] > #jam { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 10px; }
@media (min-width: 761px) { .mu.mu-cons[data-mode="jam"] > #jam { display: flex; max-width: 760px; margin: 0 auto; width: 100%; } }
.mu-jrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mu-jscroll { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 1px; flex: none; }
.mu-jscroll::-webkit-scrollbar { display: none; }
.mu-jscroll .mu-opt { flex: none; white-space: nowrap; min-height: 34px; padding: 0 13px; font-size: 12.5px; }
.mu-jlive { position: relative; flex: none; min-height: 40px; display: grid; place-items: center; font: 400 28px/1 Fraunces, Georgia, serif; color: var(--acc, #145C63); }
.mu-jlive small { font-size: 16px; color: #E0A21E; margin-left: 4px; }
.mu-jstrip { position: relative; flex: 1 1 auto; min-height: 140px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 26px; background: linear-gradient(180deg, #fff 0%, var(--s2, #FBF9F4) 100%); overflow: hidden; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mu-jstrip:focus-visible { outline: 2px solid var(--acc, #145C63); outline-offset: 2px; }
.mu-jtick { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.mu-jtick i { position: absolute; left: -1px; top: 12px; bottom: 30px; width: 2px; border-radius: 2px; background: #E4DFD3; transition: background .12s, box-shadow .12s; }
.mu-jtick.sa i { background: #E0A21E; }
.mu-jtick b { position: absolute; left: 0; bottom: 8px; transform: translateX(-50%); font: 600 9.5px/1 Inter, system-ui, sans-serif; color: #6B7480; white-space: nowrap; }
.mu-jtick.on i { background: var(--acc, #145C63); box-shadow: 0 0 14px rgba(20,92,99,.45); } .mu-jtick.on b { color: var(--acc, #145C63); }
.mu-jdot { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(20,92,99,.55) 0%, rgba(20,92,99,.18) 55%, rgba(20,92,99,0) 72%); }
.mu-jvoice { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 12px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 999px; background: #fff; color: var(--tx, #16202C); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.mu-jvoice:active { transform: translateY(-50%) scale(.96); }
.mu-jorn, .mu-jband { flex: none; display: grid; gap: 6px; }
.mu-jorn { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mu-jband { grid-template-columns: 1fr 1fr 1.35fr; }
.mu-jt { flex-direction: column !important; gap: 3px !important; min-height: 52px !important; padding: 0 4px !important; font-size: 11.5px !important; border-radius: 18px !important; }
.mu-jt[aria-pressed="true"] { background: var(--acc-d, rgba(20,92,99,.1)) !important; color: var(--acc, #145C63) !important; box-shadow: inset 0 0 0 1px rgba(20,92,99,.45) !important; }
.mu.mu-cons .mu-jam .mu-btn.ghost { background: var(--s1, #fff) !important; color: var(--tx, #16202C) !important; }
.mu.mu-cons .mu-jam .mu-btn.ghost.mu-jt[aria-pressed="true"] { background: var(--acc-d, rgba(20,92,99,.1)) !important; color: var(--acc, #145C63) !important; }
.mu-jtempo { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border: 1px solid var(--ln, rgba(22,32,44,.1)); border-radius: 18px; background: #fff; } .mu-jtempo b { min-width: 30px; text-align: center; font: 700 15px/1 Inter, system-ui, sans-serif; color: var(--tx, #16202C); }
.mu-jam .mu-round { width: 32px; min-height: 40px !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.mu-jbeats { flex: none; display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; min-height: 12px; }
.mu-jbeats i { width: 9px; height: 9px; border-radius: 50%; background: #E4DFD3; transition: transform .1s, background .1s; }
.mu-jbeats i.tali { background: #F3B4C5; } .mu-jbeats i.khali { background: #A9D8DC; }
.mu-jbeats i.on { background: var(--acc, #145C63); transform: scale(1.6); }
.mu.mu-cons .mu-mode[data-m="jam"] svg { color: #D6456B; }
@media (max-width: 760px) { .mu.mu-cons .mu-modes { grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 3px; } .mu.mu-cons .mu-mode { padding: 0 !important; } .mu.mu-cons .mu-mode span { font-size: 10px; } }
@media (prefers-reduced-motion: no-preference) { .mu.mu-cons[data-mode="jam"] > #jam { animation: muIn .28s cubic-bezier(.2,.7,.2,1) both; } }
@media (max-width: 760px) and (max-height: 740px) {
  .mu-jam { gap: 7px !important; } .mu-jlive { min-height: 30px; font-size: 24px; } .mu-jstrip { min-height: 110px; border-radius: 22px; }
  .mu-jscroll .mu-opt { min-height: 30px; padding: 0 11px; font-size: 12px; } .mu-jt, .mu-jtempo { min-height: 44px !important; }
}
@media (max-width: 760px) and (max-height: 680px) { .mu-jstrip { min-height: 96px; } .mu-jlive { min-height: 26px; font-size: 22px; } .mu-jt, .mu-jtempo { min-height: 40px !important; } }