/* =========================================================
   GOONS · LECTEUR DE PARTITION (shared/js/goons-score-player.js)
   Barre compacte, partition sur papier clair (rendu abcjs), curseur,
   notes en cours / à jouer, noms sur les têtes, résumé de fin.
   La partition défile dans sa boîte : le piano reste visible dessous.
   ========================================================= */

.gsp {
    --gsp-accent: var(--accent, #00e5ff);
    --gsp-playing: #0891b2;
    --gsp-next: #15803d;
    --gsp-loop: #4338ca;
    --gsp-score-h: min(52vh, 460px);
    position: relative;
    box-sizing: border-box;
    margin: 0 0 14px;
    font-size: 13px;
}

.gsp *,
.gsp *::before,
.gsp *::after { box-sizing: border-box; }

/* Place réservée avant le script (class="gsp gsp--pending" dans la page) :
   barre (32 + 6) + voyant (30 + 6) + boîte de la partition. Le piano ou le
   texte sous le lecteur ne bouge pas quand abcjs dessine (CLS). Les règles
   internes sont préfixées .gsp : le CSS de la page (un « main p » par
   exemple) ne doit pas changer ces hauteurs. */
.gsp--pending { min-height: calc(var(--gsp-score-h) + 74px); }

/* ---------- barre ---------- */
.gsp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
}

.gsp-btn,
.gsp select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--play-border-strong, rgba(255, 255, 255, 0.18));
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Safari dessine les <select> en natif (fond clair, texte blanc illisible) :
   sans apparence native, flèche dessinée ici, options sombres. */
.gsp select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 26px;
    background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8ecff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px;
    color-scheme: dark;
    font-weight: 500;
}

.gsp select option { background: #0b0b16; color: #fff; }
.gsp-btn:hover { border-color: var(--gsp-accent); }
/* Option activée (Count-in, Loop A-B, Other hand) : teinte et contour, pas d'aplat.
   L'aplat cyan d'un Count-in actif attirait l'œil à la place de Play. */
.gsp-btn[aria-pressed="true"] {
    background: rgba(0, 229, 255, 0.14);
    background: color-mix(in srgb, var(--gsp-accent) 16%, transparent);
    border-color: var(--gsp-accent);
    color: var(--gsp-accent);
}

/* Bouton principal : Play (et « Play again ») porte le dégradé des CTA du site
   (.play-btn--primary). C'est la seule pastille pleine de la barre. */
.gsp .gsp-play,
.gsp .gsp-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 96px;
    padding: 0 18px 0 15px;
    border: 0;
    background: linear-gradient(102deg, var(--play-magenta, #ff2bd6), var(--play-cyan, #00e5ff));
    color: #05050a;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(255, 43, 214, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gsp .gsp-play:hover,
.gsp .gsp-again:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 229, 255, 0.35);
}
/* Icône lecture (triangle), pause (deux barres) pendant la lecture. */
.gsp .gsp-play::before {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}
.gsp .gsp-play[aria-pressed="true"] {
    background: linear-gradient(102deg, var(--play-magenta, #ff2bd6), var(--play-cyan, #00e5ff));
    color: #05050a;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 8px 22px rgba(0, 229, 255, 0.3);
}
.gsp .gsp-play[aria-pressed="true"]::before {
    width: 10px;
    height: 12px;
    border: 0;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
@media (prefers-reduced-motion: reduce) {
    .gsp .gsp-play:hover, .gsp .gsp-again:hover { transform: none; }
}
.gsp-loop.is-picking { border-color: #fbbf24; color: #fbbf24; }
.gsp [hidden] { display: none !important; }
.gsp :focus-visible { outline: 2px solid var(--gsp-accent); outline-offset: 2px; }

/* ---------- voyant ----------
   Bande façon matériel : LED calée sur la pulsation (plus forte au premier
   temps), état, égaliseur au tempo, ligne d'état, mesure, progression.
   Couleur de la LED : cyan (Listen), vert (Practice), magenta (Play along),
   ambre (décompte, pause), or (fin), rouge (fausse note, pas de son). */
.gsp-meter {
    --gsp-beat: 0.5s;
    --gsp-led: #39405a;
    --gsp-led-text: rgba(232, 236, 255, 0.55);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    margin: 0 0 6px;
    padding: 0 12px 0 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), #07070f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    transition: border-color 0.2s;
}

.gsp-meter[data-state="playing"][data-mode="listen"] { --gsp-led: #22d3ee; --gsp-led-text: #67e8f9; }
.gsp-meter[data-state="playing"][data-mode="practice"] { --gsp-led: #22c55e; --gsp-led-text: #4ade80; }
.gsp-meter[data-state="playing"][data-mode="along"] { --gsp-led: #ff2bd6; --gsp-led-text: #ff7ae6; }
.gsp-meter[data-state="countin"] { --gsp-led: #fbbf24; --gsp-led-text: #fcd34d; }
.gsp-meter[data-state="paused"] { --gsp-led: #b7791f; --gsp-led-text: #fbbf24; }
.gsp-meter[data-state="done"] { --gsp-led: #fbbf24; --gsp-led-text: #fde68a; }
.gsp-meter[data-state="error"] { --gsp-led: #ef4444; --gsp-led-text: #fca5a5; }
.gsp-meter[data-state="playing"],
.gsp-meter[data-state="countin"] { border-color: color-mix(in srgb, var(--gsp-led) 45%, transparent); }

.gsp-led {
    position: relative;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 45%), var(--gsp-led);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* Allumée : halo. */
.gsp-meter:is([data-state="playing"], [data-state="countin"], [data-state="done"], [data-state="error"]) .gsp-led {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 10px 1px var(--gsp-led);
}

/* Anneau qui respire : Practice attend la note ; Pause clignote doucement. */
.gsp-led::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--gsp-led);
    border-radius: 50%;
    opacity: 0;
}
.gsp-meter[data-state="playing"][data-mode="practice"] .gsp-led::after { animation: gsp-breathe 1.6s ease-in-out infinite; }
.gsp-meter[data-state="paused"] .gsp-led::after { animation: gsp-breathe 2.4s ease-in-out infinite; }

.gsp-led.is-beat { animation: gsp-beat 0.2s ease-out; }
.gsp-led.is-down { animation: gsp-down 0.28s ease-out; }

.gsp-tag {
    flex: none;
    color: var(--gsp-led-text);
    font: 700 10.5px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gsp-eq {
    display: inline-flex;
    flex: none;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}
.gsp-eq i {
    display: block;
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: var(--gsp-led);
    opacity: 0.35;
    transform: scaleY(0.22);
    transform-origin: 50% 100%;
}
.gsp-meter[data-mode="practice"] .gsp-eq { display: none; }
.gsp-meter[data-state="playing"] .gsp-eq i {
    opacity: 0.95;
    animation: gsp-eq calc(var(--gsp-beat) * 0.5) ease-in-out infinite alternate;
}
.gsp-meter[data-state="playing"] .gsp-eq i:nth-child(2) { animation-duration: calc(var(--gsp-beat) * 0.37); animation-delay: -0.11s; }
.gsp-meter[data-state="playing"] .gsp-eq i:nth-child(3) { animation-duration: calc(var(--gsp-beat) * 0.61); animation-delay: -0.23s; }
.gsp-meter[data-state="playing"] .gsp-eq i:nth-child(4) { animation-duration: calc(var(--gsp-beat) * 0.44); animation-delay: -0.07s; }

.gsp .gsp-meter .gsp-status {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(232, 236, 255, 0.82);
    font-size: 12.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsp-pos {
    flex: none;
    color: rgba(232, 236, 255, 0.6);
    font: 600 11px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gsp-pos:empty { display: none; }

.gsp-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.gsp-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gsp-led) 40%, transparent), var(--gsp-led));
    box-shadow: 0 0 6px var(--gsp-led);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.15s linear;
}

/* Fausse note en Practice : la bande rougit un instant. */
.gsp-meter.is-wrong { --gsp-led: #ef4444; --gsp-led-text: #fca5a5; border-color: rgba(239, 68, 68, 0.75); animation: gsp-wrong 0.45s ease-out; }

@keyframes gsp-beat {
    0% { transform: scale(1.35); filter: brightness(1.7); }
    100% { transform: scale(1); filter: none; }
}
@keyframes gsp-down {
    0% { transform: scale(1.6); filter: brightness(2.1); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 18px 5px var(--gsp-led); }
    100% { transform: scale(1); filter: none; }
}
@keyframes gsp-breathe {
    0%, 100% { opacity: 0; transform: scale(0.7); }
    50% { opacity: 0.85; transform: scale(1.15); }
}
@keyframes gsp-eq {
    0% { transform: scaleY(0.2); }
    100% { transform: scaleY(1); }
}
@keyframes gsp-wrong {
    0% { background-color: rgba(239, 68, 68, 0.28); transform: translateX(-2px); }
    30% { transform: translateX(2px); }
    60% { transform: translateX(-1px); }
    100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gsp-meter .gsp-eq i,
    .gsp-led,
    .gsp-led::after,
    .gsp-meter.is-wrong { animation: none !important; }
    .gsp-meter[data-state="playing"] .gsp-eq i { transform: scaleY(0.7); }
}

/* ---------- partition ---------- */
.gsp-score {
    position: relative;
    max-height: var(--gsp-score-h);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    background: #fffdf7;
    color: #111;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.gsp-paper { padding: 4px 6px; }
.gsp-paper svg { display: block; }

/* Titre et auteur du fichier ABC : la page les affiche déjà. */
.gsp.gsp--no-titles .abcjs-title,
.gsp.gsp--no-titles .abcjs-subtitle,
.gsp.gsp--no-titles .abcjs-composer { display: none; }

.gsp-score .gsp-in-loop { fill: var(--gsp-loop); }
.gsp-score .gsp-next { fill: var(--gsp-next); stroke: var(--gsp-next); }
.gsp-score .gsp-playing { fill: var(--gsp-playing); stroke: var(--gsp-playing); }
.gsp-score .abcjs-note,
.gsp-score .abcjs-rest,
.gsp-score .abcjs-bar { cursor: pointer; }

.gsp-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: rgba(8, 145, 178, 0.55);
    pointer-events: none;
    will-change: transform;
}

/* Noms sur les têtes : pastille sombre, lettre claire. */
.gsp-name rect { fill: #1e3a8a; }
.gsp-name text {
    fill: #fff;
    font: 700 6.6px system-ui, sans-serif;
    pointer-events: none;
}

.gsp-score .gsp-next + .gsp-name rect,
.gsp-score .gsp-name rect { stroke: none; }

/* ---------- résumé de fin ---------- */
.gsp-summary {
    position: absolute;
    left: 50%;
    top: 56px;
    z-index: 5;
    width: min(320px, 92%);
    transform: translateX(-50%);
    padding: 18px 20px 16px;
    border: 1px solid var(--play-border-strong, rgba(255, 255, 255, 0.18));
    border-radius: 16px;
    background: rgba(8, 8, 18, 0.96);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.gsp-stars { margin: 0; font-size: 34px; letter-spacing: 4px; color: #fbbf24; }
.gsp-acc { margin: 6px 0 2px; font-size: 22px; font-weight: 800; color: #fff; }
.gsp-facts { margin: 0 0 12px; color: var(--play-muted, rgba(232, 236, 255, 0.7)); }

@media (max-width: 720px) {
    .gsp--pending { min-height: calc(var(--gsp-score-h) + 70px); }
    .gsp-meter { height: 28px; gap: 8px; padding: 0 10px 0 9px; }
    .gsp-btn, .gsp select { height: 30px; padding: 0 8px; font-size: 12px; }
    .gsp select { padding-right: 22px; background-position: right 7px center; }
}

/* Téléphone en portrait : la barre tient sur deux lignes. */
@media (max-width: 600px) {
    .gsp--pending { min-height: calc(var(--gsp-score-h) + 106px); }
    .gsp-meter .gsp-eq { display: none; }
    .gsp .gsp-meter .gsp-status { font-size: 12px; }
}

/* Téléphone en paysage : la partition laisse la place au piano. */
@media (orientation: landscape) and (max-height: 500px) {
    .gsp { --gsp-score-h: 34vh; }
    .gsp .gsp-meter { display: none; }
    .gsp--pending { min-height: calc(var(--gsp-score-h) + 37px); }
}