/* GOONS - mbira dzaVadzimu (/play/mbira) : shared/js/goons-mbira.js */

.app-hero--instrument { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 0 56px; }
.app-hero--instrument h1 { margin: 14px 0 10px; font-size: clamp(30px, 4vw, 46px); }
.app-hero--instrument .lede { max-width: 110ch; margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.app-hero--instrument .app-hero-actions { margin-bottom: 18px; }

.mb {
    --mb-ochre: #e0a14a;
    --mb-green: #58c48b;
    --mb-sky: #7fd3ff;
    --mb-ink: #f6efe3;
    --mb-mute: #c3b39c;
    display: grid; gap: 12px;
    margin: 22px 0 8px; padding: 16px 18px 18px; border-radius: 20px; color: var(--mb-ink);
    background:
        radial-gradient(70% 60% at 50% 105%, rgba(224, 161, 74, .18), transparent 70%),
        radial-gradient(50% 50% at 92% 0%, rgba(88, 196, 139, .12), transparent 70%),
        #140e09;
    box-shadow: inset 0 0 0 1px rgba(224, 161, 74, .22), 0 24px 50px -22px rgba(0, 0, 0, .8);
    user-select: none; -webkit-user-select: none;
}
.mb:empty { min-height: 640px; }
.mb :where(button, select) { font: inherit; color: inherit; }
.mb :where(button) { cursor: pointer; }
.mb button:focus-visible, .mb select:focus-visible, .mb input:focus-visible { outline: 2px solid var(--mb-ochre); outline-offset: 2px; }
.mb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(246, 239, 227, .05); }
.mb select {
    appearance: none; -webkit-appearance: none; padding: 9px 32px 9px 12px; border: 0; border-radius: 10px;
    background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e0a14a'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px; font-weight: 700; color: var(--mb-ink);
}
.mb select option { background: #241a10; }
.mb-play { border: 0; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 800; background: var(--mb-ochre); color: #2a1406; }
.mb-play--mine { background: var(--mb-green); color: #0d2417; }
.mb-play[aria-pressed=true] { background: #f6efe3; color: #2a1406; }
.mb-tog { position: relative; border: 0; border-radius: 10px; padding: 9px 14px 9px 28px; font-size: 14px; font-weight: 700; background: rgba(0, 0, 0, .35); }
.mb-tog::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #4a3c2c; }
.mb-tog[aria-pressed=true]::before { background: var(--mb-green); box-shadow: 0 0 8px var(--mb-green); }
.mb-tempo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mb-mute); }
.mb-tempo input { width: 110px; accent-color: var(--mb-ochre); }
.mb-tempo output { min-width: 64px; color: var(--mb-ink); font-variant-numeric: tabular-nums; }
.mb-board { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; touch-action: none; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
.mb-gourd { opacity: 0; transition: opacity .3s; }
.mb-board.has-deze .mb-gourd { opacity: 1; }
.mb-caps { opacity: .25; transition: opacity .3s; }
.mb-board.has-deze .mb-caps { opacity: 1; }
.mb-key { transform-box: fill-box; transform-origin: 50% 0; }
.mb-key.is-on { animation: mb-pluck .3s ease-out; }
@keyframes mb-pluck { 0% { transform: rotate(0); } 25% { transform: rotate(1.2deg); } 55% { transform: rotate(-.7deg); } 100% { transform: rotate(0); } }
.mb-glow { fill: var(--mb-ochre); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mb-key.is-on .mb-glow { animation: mb-glow .5s ease-out; }
@keyframes mb-glow { 0% { opacity: .85; } 100% { opacity: 0; } }
.mb-key.is-next .mb-glow { opacity: .75; fill: var(--mb-green); }
.mb-hit { fill: rgba(0, 0, 0, .001); cursor: pointer; }
.mb-lab { font: 800 10.5px/1 'Inter', system-ui, sans-serif; fill: #2b2116; pointer-events: none; }
.mb-status { margin: -6px 0 0; text-align: center; font-size: 12.5px; color: var(--mb-mute); }
.mb-status:empty { display: none; }
.mb-cycle { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.mb-cell { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 36px; padding: 2px 0; border-radius: 6px; background: rgba(0, 0, 0, .3); font-size: 9.5px; font-weight: 800; line-height: 1.1; }
.mb-cell i { font-style: normal; }
.mb-rB { color: #f0b46a; }
.mb-rL { color: #f6efe3; }
.mb-rR { color: var(--mb-sky); }
.mb-cell.is-beat { background: rgba(255, 255, 255, .07); }
.mb-cell.is-phrase::before { content: ''; position: absolute; left: -2px; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--mb-ochre); }
.mb-cell.is-now { box-shadow: 0 0 0 2px #fff; }
.mb.is-mine .mb-cell { box-shadow: inset 0 0 0 1px rgba(88, 196, 139, .45); }
.mb.is-mine .mb-cell.is-now { box-shadow: 0 0 0 2px #fff; }
.mb-cell.is-good { animation: mb-good .35s ease-out; }
.mb-cell.is-off { animation: mb-off .35s ease-out; }
@keyframes mb-good { 0% { box-shadow: 0 0 0 3px var(--mb-green), 0 0 14px var(--mb-green); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes mb-off { 0% { box-shadow: 0 0 0 3px #ff6b6b; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mb-score { min-height: 1.4em; margin: 0; font-size: 14px; font-weight: 800; color: var(--mb-green); font-variant-numeric: tabular-nums; }
.mb-score:empty { display: none; }
.mb-info { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mb-mute); }
.mb-info b { color: var(--mb-ochre); }
.mb-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mb-mute); }
@media (max-width: 760px) { .mb-cycle { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .mb { padding: 12px 10px; border-radius: 16px; }
    .mb-tempo input { width: 90px; }
    .mb-cell { min-height: 30px; font-size: 8.5px; }
    .mb:empty { min-height: 760px; }
}
@media (prefers-reduced-motion: reduce) {
    .mb-key.is-on, .mb-key.is-on .mb-glow, .mb-cell.is-good, .mb-cell.is-off { animation: none; }
}