/* =========================================================
   GOONS · GUITARE ET BASSE PUBLIQUES (/play/guitar, /play/bass-guitar, /guitar-chords/)
   JS : shared/js/goons-guitar-lite.js (GoonsGuitarLite.mount ou [data-goons-guitar]).
   Classes préfixées .ggl- ; la hauteur est réservée par .ggl:empty pour que
   le manche ne décale rien en arrivant (CLS nul).
   ========================================================= */

/* ---------- hero des landings avec instrument (meme 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; }

/* ---------- conteneur ---------- */
.ggl {
    --ggl-accent: var(--accent, #00e5ff);
    --ggl-hot: #ff2bd6;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 12px 12px 10px;
    border: 1px solid var(--play-border, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    background: rgba(8, 8, 18, 0.78);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    color: #fff;
}

.ggl:empty { min-height: 470px; }
.ggl--bass:empty { min-height: 390px; }
.ggl.ggl--compact:empty { min-height: 330px; }

/* ---------- barre ---------- */
.ggl-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 10px;
}

.ggl-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--play-muted, rgba(255, 255, 255, 0.65));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ggl select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    background: #10101c;
    color: #fff;
    font: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.ggl-btn,
.ggl-chord-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    background: #10101c;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.ggl-btn:hover,
.ggl-chord-btn:hover { border-color: var(--ggl-accent); }

.ggl-btn[aria-pressed="true"],
.ggl-chord-btn[aria-pressed="true"] {
    border-color: var(--ggl-accent);
    background: color-mix(in srgb, var(--ggl-accent) 22%, #10101c);
    color: #fff;
}

.ggl-btn:focus-visible,
.ggl-chord-btn:focus-visible,
.ggl select:focus-visible { outline: 2px solid var(--ggl-accent); outline-offset: 2px; }

.ggl-strum-group { display: inline-flex; gap: 6px; margin-left: auto; }

/* ---------- accords ---------- */
.ggl-chords {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.ggl-chord-btn { min-width: 0; padding: 0 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Pages accord : les positions d'un même accord (Open, E-shape barre 8...) */
.ggl-chords--voicings { display: flex; flex-wrap: wrap; }
.ggl-chords--voicings .ggl-chord-btn { flex: 0 1 auto; padding: 0 14px; font-family: inherit; }
.ggl-chord-btn--7 { height: 28px; font-size: 12px; color: rgba(255, 255, 255, 0.82); }

/* ---------- manche ---------- */
.ggl-neck {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #07070c;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.ggl-svg { display: block; width: 100%; height: auto; cursor: pointer; }

.ggl-fretnums text {
    fill: rgba(255, 255, 255, 0.45);
    font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
}

.ggl-strname {
    fill: #fff;
    font: 700 13px 'JetBrains Mono', ui-monospace, monospace;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.75);
    stroke-width: 3px;
}

.ggl-dot { fill: var(--ggl-hot); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.7)); }
.ggl-dot-txt { fill: #fff; font: 800 13px Inter, system-ui, sans-serif; pointer-events: none; }
.ggl-open { fill: none; stroke: var(--ggl-hot); stroke-width: 2.4; }
.ggl-mute { fill: rgba(255, 255, 255, 0.85); font: 800 18px Inter, system-ui, sans-serif; }
.ggl-barre { fill: var(--ggl-hot); fill-opacity: 0.55; stroke: #fff; stroke-opacity: 0.6; }
.ggl-mark { fill: rgba(10, 12, 20, 0.88); stroke: var(--ggl-accent); stroke-width: 1.8; }
.ggl-mark--root { fill: var(--ggl-hot); stroke: #fff; filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.7)); }
.ggl-mark-txt { fill: #fff; font: 700 10px Inter, system-ui, sans-serif; pointer-events: none; }

.ggl-hit {
    fill: var(--ggl-accent);
    fill-opacity: 0.85;
    filter: drop-shadow(0 0 8px var(--ggl-accent));
    animation: ggl-hit 0.45s ease-out forwards;
    pointer-events: none;
}

@keyframes ggl-hit {
    from { r: 12px; fill-opacity: 0.95; }
    to { r: 4px; fill-opacity: 0; }
}

.ggl-string.ggl-vib { animation: ggl-vib 0.35s ease-out; }

@keyframes ggl-vib {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-1.2px); }
    40% { transform: translateY(1px); }
    60% { transform: translateY(-0.6px); }
    80% { transform: translateY(0.3px); }
}

/* ---------- bas : accord et tablature ---------- */
.ggl-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    min-height: 26px;
    margin-top: 8px;
}

.ggl-chord { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.ggl-chord-name { color: #fff; font-size: 15px; }
.ggl-chord-notes { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.ggl-status { margin-left: auto; color: rgba(255, 255, 255, 0.55); font-size: 12px; }

.ggl-tab {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0b0b14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.ggl-tab pre {
    margin: 0;
    min-height: 6.2em;
    color: rgba(220, 240, 255, 0.85);
    font: 500 12px/1.3 'JetBrains Mono', ui-monospace, monospace;
    white-space: pre;
}

.ggl--bass .ggl-tab pre { min-height: 4.2em; }

@media (max-width: 760px) {
    .ggl-chords { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ggl-strum-group { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ggl-hit, .ggl-string.ggl-vib { animation: none; }
}

/* ---------- riffs à apprendre (option riffs, shared/js/goons-riffs.js) ---------- */
.ggl-riffs { margin-top: 18px; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.ggl-riffs-title { margin: 0 0 4px; color: #fff; font-size: 18px; font-weight: 700; }
.ggl-riffs-lede { margin: 0 0 14px; max-width: 70ch; color: rgba(255, 255, 255, 0.68); font-size: 14px; line-height: 1.5; }
.ggl-riff-group + .ggl-riff-group { margin-top: 12px; }
.ggl-riff-group h4 { margin: 0 0 8px; color: rgba(255, 255, 255, 0.55); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.ggl-riff-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ggl-riff {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
    padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff;
    font: inherit; transition: border-color 0.15s, background 0.15s;
}
.ggl-riff b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ggl-riff small { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.ggl-riff:hover { background: rgba(255, 255, 255, 0.07); }
.ggl-riff[aria-pressed="true"] { border-color: #00e5ff; background: rgba(0, 229, 255, 0.08); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35); }
.ggl-riff:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; }
.ggl-riff-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ggl-riff-play[disabled] { opacity: 0.45; cursor: default; }
.ggl-riff-info { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }
.ggl-riff-tab pre { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .ggl-riff { transition: none; } }
.ggl-riff-styles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ggl-riff-chip {
    padding: 5px 11px; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8);
    font: 600 12px/1.2 inherit;
}
.ggl-riff-chip[aria-pressed="true"] { background: rgba(0, 229, 255, 0.12); border-color: #00e5ff; color: #fff; }
.ggl-riff-chip:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; }