/* ==========================================================================
   PIANO TACTILE — habillage (charte SORBET)
   Toutes les couleurs viennent des variables de la charte : le clavier suivra
   automatiquement les évolutions du chrome commun, comme le reste du jeu.
   ========================================================================== */

/* L'aire de jeu (#scene) est une colonne centrée : sans largeur explicite, son
   contenu se rétracte à sa taille naturelle — le clavier n'occupait qu'un tiers
   de l'écran, avec des touches injouables. Même largeur que la jauge de temps. */
#pianoHote {
  /* Toute la largeur de l'écran : le clavier compte dix-neuf touches, chaque
     pixel gagné est une touche plus large sous le doigt. On sort de la colonne
     centrée de l'aire de jeu, qui bornerait la largeur. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  align-self: stretch;
}

.pt-piano {
  /* Sans cela, la bordure et le rembourrage s'ajoutent aux 100vw : le clavier
     dépassait de dix pixels et faisait défiler la page en largeur. */
  box-sizing: border-box;
  --pt-blanche: calc(100% / var(--pt-nb-blanches));
  --pt-noire: calc(var(--pt-blanche) * 0.682);   /* 10 % de plus qu'avant (0,62) */
  width: 100%;
  margin: 10px 0 0;
  padding: 6px 4px 8px;
  border-radius: var(--lu-r-card, 18px) var(--lu-r-card, 18px) 0 0;
  background: var(--lu-surface, #fff);
  border: 1px solid var(--lu-border, rgba(0,0,0,.08));
  box-shadow: var(--lu-shadow, 0 6px 20px rgba(0,0,0,.08));
  /* Le navigateur ne doit jamais interpréter un accord comme un défilement
     ou un pincement : sans cette ligne, la 2e et la 3e note sont avalées. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pt-rangee { position: relative; }

.pt-blanches { display: flex; gap: 0; }

.pt-noires {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;   /* la couche ne bloque pas ; les touches, elles, écoutent */
}

.pt-touche {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: transform .06s ease, filter .06s ease, background .12s ease;
}

.pt-blanche {
  flex: 1 0 0;
  height: clamp(88px, 22vh, 150px);
  background: linear-gradient(180deg, #fff, #f4f2f7);
  border: 1px solid var(--lu-border, rgba(0,0,0,.12));
  border-radius: 0 0 9px 9px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
}
.pt-blanche + .pt-blanche { border-left: 0; }
.pt-blanche:first-child { border-radius: 9px 0 9px 9px; }
.pt-blanche:last-child  { border-radius: 0 9px 9px 9px; }

.pt-noire {
  position: absolute;
  top: 0;
  width: var(--pt-noire);
  height: 100%;
  background: linear-gradient(180deg, #4a4459, #2b2733);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  pointer-events: auto;
}

.pt-nom {
  font-family: var(--lu-font-ui, system-ui, sans-serif);
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 600;
  color: var(--lu-muted, #7a7391);
  letter-spacing: .3px;
}

/* --- touche enfoncée : même code couleur que le reste du jeu --- */
.pt-blanche.is-on {
  background: var(--lu-grad-dream, linear-gradient(180deg,#ffe6f2,#e7dcff));
  filter: brightness(1.02);
  transform: translateY(2px);
}
.pt-noire.is-on {
  background: linear-gradient(180deg, var(--lu-primary-strong, #7c5cff), #4a3aa8);
  transform: translateY(2px);
}
.pt-blanche.is-on .pt-nom { color: var(--lu-primary-ink, #3b2a6b); }

/* --- mode dégradé : on coupe les transitions, jamais le gameplay --- */
body.lu-degrade .pt-touche { transition: none; }
body.lu-degrade .pt-noire  { box-shadow: none; }

/* --- paysage sur téléphone : l'écran est bas, le clavier se fait discret --- */
@media (orientation: landscape) and (max-height: 480px) {
  .pt-blanche { height: clamp(64px, 30vh, 110px); }
  .pt-piano   { margin-top: 6px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-touche { transition: none; }
}


/* ---------------------------------------------------------------------------
   AIDE AU JOUEUR — le jeu triche un peu (demande de François, 05/08).
   Les touches de l'accord demandé reçoivent une zone de contact plus grande que
   leur dessin : un doigt qui tombe légèrement à côté joue quand même la bonne
   note. Rien ne se voit — ni couleur, ni taille : seule la surface sensible
   change. On la porte par un pseudo-élément, qui appartient à la touche : le
   doigt qui le touche vise donc bien cette touche.
   --------------------------------------------------------------------------- */
/* Seules les BLANCHES ont besoin d'être positionnées : les noires le sont déjà
   en absolu, et leur imposer « relative » ici les ferait retomber en flux —
   le clavier entier se disloquerait. */
.pt-blanche { position: relative; }

.pt-touche.pt-aide::after {
  content: "";
  position: absolute;
  /* Débord horizontal généreux, vertical modéré : c'est de côté qu'on rate une
     touche, pas en hauteur. */
  inset: -6px -9px -6px -9px;
  z-index: 1;
}
/* Une noire aidée doit primer sur la blanche voisine, elle aussi peut-être
   aidée : sinon la zone élargie de la blanche masquerait la noire. */
.pt-noire.pt-aide::after { z-index: 3; }