/* Instruments (public/js/music.js) : le petit panneau de jeu, en bas au-dessus du dock, à la place
   de la bulle d'aide. Piano : un clavier de Do 3 à Sol 5 qu'on clique ou qu'on touche, les lettres
   de l'ordinateur sur les touches qu'il joue. Guitare : les accords, les cordes où l'on gratte.
   Batterie : une pastille par fût et par cymbale. Verre et jetons de app.css. */

.music-panel {
  position: absolute;
  left: var(--dock-left);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  translate: -50% 0;
  transition:
    left var(--slide),
    bottom var(--slide);
  z-index: 8;
  width: min(620px, calc(100vw - 2 * var(--sp-3)));
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  user-select: none;
  -webkit-user-select: none;
  animation: music-in var(--dur-slow) var(--ease-sheet) backwards;
}
.music-panel.leaving {
  animation: music-out var(--dur-base) var(--ease-in) forwards;
}
@keyframes music-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes music-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.music-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.music-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-text);
}
.music-icon .ic svg {
  width: 18px;
  height: 18px;
}
.music-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.music-title b {
  font-size: var(--fs-headline);
}
.music-audience {
  font-size: var(--fs-footnote);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-warn {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--fill);
  font-size: var(--fs-footnote);
  color: var(--text-2);
}

/* --- Piano ------------------------------------------------------------------------------------- */

.music-keys {
  position: relative;
  display: flex;
  height: 124px;
  padding: 0 2px 2px;
  border-radius: var(--r-md);
  background: #2b2633;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35);
  touch-action: none;
}
.music-key {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.music-key.white {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 3px 1px 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#fdfcff, #ebe6f3);
  box-shadow: inset 0 -5px 0 rgba(58, 49, 82, 0.13);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 9px;
}
/* Touches noires entre deux blanches : --at, le rang de la blanche à leur droite (19 blanches). */
.music-key.black {
  position: absolute;
  top: 0;
  z-index: 2;
  left: calc(2px + (100% - 4px) * var(--at) / 19 - (100% - 4px) / 19 * 0.31);
  width: calc((100% - 4px) / 19 * 0.62);
  height: 60%;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#433b58, #211c2d);
  box-shadow:
    inset 0 -4px 0 rgba(255, 255, 255, 0.08),
    0 2px 3px rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6px;
}
/* Une touche s'enfonce et remonte d'un coup, comme celle d'un vrai piano, sans transition : glisser
   d'un pixel en 90 ms ne se voyait pas, et tant qu'on jouait, le panneau de verre se redessinait à
   chaque image de l'écran (retour du 29/10 : le ventilateur du Mac soufflait en jouant). */
.music-key.white.down {
  background: linear-gradient(#efe7fb, #d6c6f1);
  box-shadow: inset 0 -2px 0 rgba(121, 68, 192, 0.25);
  transform: translateY(1px);
}
.music-key.black.down {
  background: linear-gradient(#8f5bd8, #6a3aad);
  transform: translateY(1px);
}
/* Les touches que joue le clavier de l'ordinateur portent leur lettre ; les autres, un peu en retrait. */
.music-letter {
  font: 600 11px/1 var(--font);
  color: var(--accent);
  pointer-events: none;
}
.music-key.black .music-letter {
  color: #d9cdf2;
  font-size: 10px;
}
.music-key.white:not(.mapped) {
  background: linear-gradient(#f4f1f8, #e1dbea);
}
/* Sous les touches noires (qui couvrent le haut des blanches), au-dessus de la lettre. */
.music-oct {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  text-align: center;
  font: 500 9px/1 var(--font);
  font-style: normal;
  color: rgba(31, 23, 53, 0.4);
  pointer-events: none;
  white-space: nowrap;
}

.music-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.music-help {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--text-3);
}
.music-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--fill);
}
.music-seg-btn,
.music-pedal {
  border: 0;
  border-radius: var(--r-sm);
  padding: 6px 12px;
  background: transparent;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
/* La pédale, elle, s'allume et s'éteint d'un coup, comme les touches : on l'enfonce et la relâche sans
   cesse en jouant, et chaque transition redessinait le panneau de verre (retour du 30/10). */
.music-seg-btn {
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.music-seg-btn[aria-checked="true"] {
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(31, 23, 53, 0.16);
}
.music-pedal {
  background: var(--fill);
}
.music-pedal[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
}
.music-pedal[aria-pressed="true"] kbd {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: inherit;
}

/* --- Guitare ----------------------------------------------------------------------------------- */

/* Les onze accords sur une ligne : le panneau reste bas, le guitariste se voit au-dessus. */
.music-chords {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 5px;
}
.music-chord {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 6px 2px 7px;
  background: var(--glass-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.music-chord b {
  font-size: var(--fs-footnote);
  white-space: nowrap;
}
.music-chord kbd {
  margin: 0;
}
.music-chord:active {
  transform: scale(0.96);
}
.music-chord[aria-pressed="true"] {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
}
.music-chord[aria-pressed="true"] kbd {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
  color: inherit;
}
/* Les cordes : sur un manche de bois, de la plus grave (en haut, plus épaisse) à la plus aiguë. */
.music-strings {
  position: relative;
  height: 66px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #b5754d, #a85f46 55%, #8f4f3b);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}
.music-strings::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(240, 220, 170, 0.55) calc(16.66% - 2px) 16.66%);
  opacity: 0.6;
}
.music-strings i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(9px + var(--i) * 9.4px);
  height: calc(3px - var(--i) * 0.35px);
  border-radius: 2px;
  background: linear-gradient(#f4ecdc, #b9ad98);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.music-strings.ring-down i,
.music-strings.ring-up i {
  animation: music-ring 420ms var(--ease-out);
  animation-delay: calc(var(--i) * 14ms);
}
.music-strings.ring-up i {
  animation-delay: calc((5 - var(--i)) * 10ms);
}
@keyframes music-ring {
  0%,
  100% {
    translate: 0 0;
  }
  15% {
    translate: 0 2px;
  }
  35% {
    translate: 0 -1.5px;
  }
  55% {
    translate: 0 1px;
  }
  75% {
    translate: 0 -0.5px;
  }
}
.music-btn {
  touch-action: none;
}

/* --- Batterie ---------------------------------------------------------------------------------- */

/* Une pastille par pièce, sur six colonnes, rangées comme les touches qui les jouent : la crash et la
   ride au-dessus, la grosse caisse en barre d'espace. Chacune a sa forme : un rond (fût), une
   ellipse plate (cymbale), deux (charleston, écartées quand il est ouvert), un grand rond cerclé. */
.music-pads {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(52px, auto);
  gap: 6px;
  touch-action: none;
}
.music-pad {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 6px 4px 7px;
  background: var(--glass-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.music-pad b {
  font-size: var(--fs-footnote);
  line-height: 1.15;
  text-align: center;
}
/* Leur place : la crash au-dessus de D et F, la ride au-dessus de J et K, la grosse caisse en barre
   d'espace (shared/music.js, DRUMS). */
.music-pad[data-piece="crash"] {
  grid-area: 1 / 1 / 2 / 3;
}
.music-pad[data-piece="ride"] {
  grid-area: 1 / 5 / 2 / 7;
}
.music-pad[data-piece="snare"] {
  grid-area: 2 / 1;
}
.music-pad[data-piece="tom1"] {
  grid-area: 2 / 2;
}
.music-pad[data-piece="tom2"] {
  grid-area: 2 / 3;
}
.music-pad[data-piece="tom3"] {
  grid-area: 2 / 4;
}
.music-pad[data-piece="hihat"] {
  grid-area: 2 / 5;
}
.music-pad[data-piece="open"] {
  grid-area: 2 / 6;
}
.music-pad[data-piece="kick"] {
  grid-area: 3 / 2 / 4 / 6;
}
.music-pad kbd {
  margin: 0;
}
.music-pad:active {
  transform: scale(0.96);
}
.music-pad.hit {
  animation: music-pad-hit 180ms var(--ease-out);
}
@keyframes music-pad-hit {
  0% {
    background: var(--accent);
    color: var(--accent-text);
    transform: scale(0.95);
  }
}
.music-pad.kick {
  flex-direction: row;
  gap: var(--sp-2);
}
.music-pad-shape {
  flex: none;
  display: block;
  border: 2px solid currentColor;
  opacity: 0.75;
  pointer-events: none;
}
.music-pad.drum .music-pad-shape {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.music-pad.kick .music-pad-shape {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px var(--glass-strong),
    inset 0 0 0 5px currentColor;
}
.music-pad.cymbal .music-pad-shape,
.music-pad.hat .music-pad-shape {
  width: 26px;
  height: 7px;
  border-radius: 50%;
}
.music-pad.hat .music-pad-shape {
  box-shadow: 0 4px 0 -2px currentColor;
}
.music-pad.hat.open .music-pad-shape {
  box-shadow: 0 7px 0 -2px currentColor;
}

/* Petit écran : le clavier garde ses 19 touches, plus étroites. */
@media (max-width: 520px) {
  .music-panel {
    padding: var(--sp-3);
  }
  .music-keys {
    height: 108px;
  }
  .music-key.white .music-letter {
    font-size: 9px;
  }
  .music-oct {
    display: none;
  }
  .music-chords {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* Pas de clavier sous les doigts : trois colonnes plus larges, les cymbales et la caisse claire,
     les toms, puis le charleston et la grosse caisse. */
  .music-pads {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .music-pad[data-piece] {
    grid-area: auto;
  }
  .music-pad[data-piece="crash"] {
    order: 1;
  }
  .music-pad[data-piece="ride"] {
    order: 2;
  }
  .music-pad[data-piece="snare"] {
    order: 3;
  }
  .music-pad[data-piece="tom1"] {
    order: 4;
  }
  .music-pad[data-piece="tom2"] {
    order: 5;
  }
  .music-pad[data-piece="tom3"] {
    order: 6;
  }
  .music-pad[data-piece="hihat"] {
    order: 7;
  }
  .music-pad[data-piece="open"] {
    order: 8;
  }
  .music-pad[data-piece="kick"] {
    order: 9;
    flex-direction: column;
    gap: 4px;
  }
}