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

/* hero des landings avec instrument (même mise en page que /play/piano) */
.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; }

.gm {
    --gm-gold: #f0c463;
    --gm-ink: #f8eedb;
    --gm-mute: #cdb79a;
    --gm-next: #5ef2b4;
    display: flex; flex-direction: column; gap: 14px;
    margin: 22px 0 8px; padding: 18px;
    border-radius: 20px; color: var(--gm-ink);
    background:
        radial-gradient(70% 60% at 80% 20%, rgba(240, 196, 99, .14), transparent 70%),
        radial-gradient(80% 70% at 10% 100%, rgba(120, 22, 26, .5), transparent 70%),
        #170c09;
    box-shadow: inset 0 0 0 1px rgba(240, 196, 99, .22), 0 24px 50px -22px rgba(0, 0, 0, .8);
    user-select: none; -webkit-user-select: none;
}
.gm:empty { min-height: calc(min(1150px, 100vw - 72px) * .54 + 330px); }
.gm :where(button, select) { font: inherit; color: inherit; }
.gm :where(button) { cursor: pointer; }
.gm button:focus-visible, .gm select:focus-visible, .gm input:focus-visible { outline: 2px solid var(--gm-gold); outline-offset: 2px; }
.gm-svg { display: block; width: 100%; height: auto; touch-action: none; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.gm-key, .gm-gong { cursor: pointer; }
.gm-glow { opacity: 0; pointer-events: none; }
.gm-key.is-hit .gm-glow, .gm-gong.is-hit .gm-glow { animation: gm-glow .7s ease-out; }
@keyframes gm-glow { 0% { opacity: .95; } 100% { opacity: 0; } }
.gm-key.is-next .gm-glow { fill: var(--gm-next); opacity: .85; animation: gm-pulse 1s ease-in-out infinite; }
@keyframes gm-pulse { 50% { opacity: .45; } }
.gm-key:hover > :not(.gm-glow), .gm-gong:hover > :not(.gm-glow) { filter: brightness(1.08); }
.gm-gong.is-hit { animation: gm-swing .9s ease-out; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes gm-swing { 20% { transform: rotate(1.5deg); } 50% { transform: rotate(-1deg); } 80% { transform: rotate(.4deg); } }
.gm-lab { pointer-events: none; font: 800 22px/1 'Inter', system-ui, sans-serif; fill: #3a2408; }
.gm-lab--pot { font-size: 17px; fill: var(--gm-ink); }
.gm-dot { font-size: 14px; }
.gm-lab--pot .gm-dot { font-size: 12px; }
.gm-name { font: 700 14px/1 'Inter', system-ui, sans-serif; fill: var(--gm-mute); letter-spacing: .06em; }
.gm-hint { margin: 0; font-size: 13.5px; color: var(--gm-mute); }
.gm-bar, .gm-songs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 236, 200, .06); }
.gm-songs { display: grid; gap: 8px; }
.gm-song-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gm 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='%23f0c463'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px; font-weight: 700; color: var(--gm-ink);
}
.gm select option { background: #2a1610; color: #f8eedb; }
.gm-song-ctl select { flex: 1 1 220px; }
.gm-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .35); }
.gm-seg-b { border: 0; padding: 7px 11px; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 700; color: var(--gm-mute); }
.gm-seg-b[aria-checked=true] { background: var(--gm-gold); color: #2a1406; }
.gm-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); }
.gm-tog::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #5a4434; }
.gm-tog[aria-pressed=true]::before { background: var(--gm-gold); box-shadow: 0 0 8px var(--gm-gold); }
.gm-tempo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gm-mute); }
.gm-tempo input { width: 130px; accent-color: var(--gm-gold); }
.gm-tempo output { min-width: 64px; color: var(--gm-ink); }
.gm-play { border: 0; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 800; background: var(--gm-gold); color: #2a1406; }
.gm-play--guide { background: var(--gm-next); color: #06261a; }
.gm-play[aria-pressed=true] { box-shadow: 0 0 0 2px #fff inset; }
.gm-info { margin: 0; font-size: 13px; color: var(--gm-mute); }
.gm-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 800 20px/1 'IBM Plex Mono', ui-monospace, monospace; }
.gm-tok { position: relative; min-width: 28px; padding: 12px 6px 8px; border-radius: 7px; text-align: center; background: rgba(0, 0, 0, .3); }
.gm-tok i { position: absolute; left: 0; right: 0; font-style: normal; font-size: 11px; line-height: 1; }
.gm-tok .gm-up { top: 2px; }
.gm-tok .gm-down { bottom: -1px; }
.gm-tok.is-gong { box-shadow: inset 0 0 0 2px rgba(240, 196, 99, .6); border-radius: 50%; }
.gm-tok.is-done { opacity: .4; }
.gm-tok.is-now { background: var(--gm-gold); color: #2a1406; }
.gm-g { display: inline-flex; gap: 5px; }
.gm-line { flex-basis: 100%; height: 0; }
.gm.is-miss .gm-svg { animation: gm-miss .3s ease-out; }
@keyframes gm-miss { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (max-width: 600px) {
    .gm { padding: 12px 10px; gap: 10px; border-radius: 16px; }
    .gm-lab { font-size: 28px; }
    .gm-lab--pot { font-size: 22px; }
    .gm-name { font-size: 18px; }
    .gm-nota { font-size: 16px; }
    .gm-tok { min-width: 22px; padding: 11px 4px 7px; }
    .gm-tempo input { width: 100px; }
    .gm:empty { min-height: calc((100vw - 52px) * 1.05 + 560px); }
    .gm-nota { gap: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .gm-key.is-hit .gm-glow, .gm-gong.is-hit .gm-glow, .gm-gong.is-hit, .gm-key.is-next .gm-glow, .gm.is-miss .gm-svg { animation: none; } }