/* GOONS - accordéon (/play/accordion) : shared/js/goons-accordion.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; }

.ac {
    --ac-red: #e5485f;
    --ac-pearl: #f4ede0;
    --ac-gold: #e8c46a;
    --ac-ink: #f7f0f2;
    --ac-mute: #c9b6bb;
    display: grid; gap: 12px;
    margin: 22px 0 8px; padding: 16px 18px 18px; border-radius: 20px; color: var(--ac-ink);
    background:
        radial-gradient(60% 60% at 20% 20%, rgba(229, 72, 95, .2), transparent 70%),
        radial-gradient(50% 50% at 90% 100%, rgba(232, 196, 106, .12), transparent 70%),
        #150b10;
    box-shadow: inset 0 0 0 1px rgba(229, 72, 95, .25), 0 24px 50px -22px rgba(0, 0, 0, .8);
    user-select: none; -webkit-user-select: none;
}
.ac:empty { min-height: 560px; }
.ac :where(button, select) { font: inherit; color: inherit; }
.ac :where(button) { cursor: pointer; }
.ac button:focus-visible, .ac select:focus-visible, .ac input:focus-visible { outline: 2px solid var(--ac-gold); outline-offset: 2px; }
.ac-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border-radius: 14px; background: rgba(247, 240, 242, .05); }
.ac-regs { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-reg { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 6px 10px 6px 7px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, .35); }
.ac-reg[aria-checked=true] { background: var(--ac-pearl); color: #2a1018; }
.ac-regico { width: 22px; height: 22px; flex: none; }
.ac-regico circle:first-child { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ac-regico path { stroke: currentColor; stroke-width: 1; opacity: .55; }
.ac-regico .d { fill: currentColor; stroke: none; }
.ac 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='%23e5485f'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 14px; font-weight: 700; color: var(--ac-ink);
}
.ac select option { background: #2a141c; }
.ac-tempo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ac-mute); }
.ac-tempo input { width: 110px; accent-color: var(--ac-red); }
.ac-tempo output { min-width: 64px; color: var(--ac-ink); font-variant-numeric: tabular-nums; }
.ac-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.ac-stradella { display: grid; grid-template-columns: 52px repeat(8, minmax(0, 1fr)); gap: 6px; align-items: center; }
.ac-rowlab { font-size: 11.5px; font-weight: 700; color: var(--ac-mute); }
.ac-btn {
    aspect-ratio: 1; min-width: 0; border: 0; border-radius: 50%; padding: 0; font-size: 12px; font-weight: 800;
    background: radial-gradient(circle at 35% 30%, #fffaf0, #d9cdb8 60%, #a69780); color: #3a2a20;
    box-shadow: 0 2px 0 #6e5f4c, 0 4px 8px rgba(0, 0, 0, .4); transition: transform .05s;
}
.ac-btn--bass { background: radial-gradient(circle at 35% 30%, #ffffff, #e8dfcf 60%, #b5a68e); }
.ac-btn--maj, .ac-btn--min, .ac-btn--sev { background: radial-gradient(circle at 35% 30%, #4a3a40, #2a1e24 70%); color: #f0dfe3; box-shadow: 0 2px 0 #120a0e, 0 4px 8px rgba(0, 0, 0, .4); }
.ac-btn.is-c { box-shadow: inset 0 0 0 3px var(--ac-gold), 0 2px 0 #6e5f4c, 0 4px 8px rgba(0, 0, 0, .4); }
.ac-btn.is-on { transform: translateY(2px); box-shadow: 0 0 0 #000, 0 0 12px var(--ac-red); }
.ac-btn.is-harm { outline: 2px solid var(--ac-red); outline-offset: 1px; }
.ac-btn.is-tick { animation: ac-tick .2s ease-out; }
@keyframes ac-tick { 0% { transform: translateY(2px); filter: brightness(1.3); } 100% { transform: translateY(0); filter: none; } }
.ac-bellows { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; touch-action: none; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .45)); }
.ac-belhit { fill: rgba(0, 0, 0, .001); }
.ac.is-shake .ac-belhit { cursor: ew-resize; }
.ac-dir { font: 800 12px/1 'Inter', system-ui, sans-serif; fill: var(--ac-gold); pointer-events: none; }
.ac-status { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--ac-mute); }
.ac-status:empty { display: none; }
.ac-keys { display: block; width: 100%; height: auto; aspect-ratio: 900 / 170; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ac-key { cursor: pointer; }
.ac-key--w rect { fill: #fbf7ee; stroke: #2a1f1a; stroke-width: 1; }
.ac-key--b rect { fill: #1d1418; stroke: #000; }
.ac-key--w.is-on rect { fill: #ffd2da; }
.ac-key--b.is-on rect { fill: var(--ac-red); }
.ac-klab { font: 700 12px/1 'Inter', system-ui, sans-serif; fill: #8a7a70; pointer-events: none; }
.ac-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ac-mute); }
@media (max-width: 860px) { .ac-body { grid-template-columns: 1fr; } .ac-bellows { max-width: 360px; } }
@media (max-width: 600px) {
    .ac { padding: 12px 10px; border-radius: 16px; }
    .ac-stradella { grid-template-columns: 42px repeat(8, minmax(0, 1fr)); gap: 4px; }
    .ac-btn { font-size: 10px; }
    .ac-reg span { display: none; }
    .ac-keys { aspect-ratio: auto; height: 132px; }
    .ac-klab { display: none; }
    .ac-bellows { max-width: 270px; }
    .ac-tempo input { width: 90px; }
    .ac:empty { min-height: 760px; }
}
@media (prefers-reduced-motion: reduce) { .ac-btn.is-tick { animation: none; } }