/* PO-33 K.O. — app. palette : anthracite #2D2D2D, ambre #C8882A, PCB sauge */

:root {
  --anthracite: #2D2D2D;
  --amber: #C8882A;
  --amber-hi: #F0B45A;
  --pcb: #B7BFAE;
  --pcb-dark: #9AA58F;
  --lcd-bg: #141410;
  --ink: #20211F;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  min-height: 100%;
  min-height: 100dvh;
  background: #1B1B1B;
  font-family: "Courier New", ui-monospace, monospace;
  color: var(--ink);
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
}
/* centré verticalement quand il y a la place ; collé en haut et défilable sinon (petits écrans) */
#unit { margin: auto 0; }

#unit {
  width: min(480px, 100vw);
  min-height: min(100dvh, 860px);
  min-height: min(100vh, 860px);
  background: linear-gradient(160deg, var(--pcb) 0%, var(--pcb-dark) 100%);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  display: flex;
  flex-direction: column;
  padding: 14px;
  padding-top: max(14px, env(safe-area-inset-top, 14px));
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- header ---- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.top .brand b { color: #6d3f0e; }
.io { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.top { flex-wrap: wrap; gap: 6px; }
.io button {
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--anthracite);
  color: #d8d8d0;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}
.io button:active { background: var(--amber); color: var(--anthracite); }
.io button.actif { border-color: var(--amber); color: var(--amber-hi); }

.face { display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* ---- LCD ---- */
#lcd {
  width: 100%;
  aspect-ratio: 640 / 380;
  background: var(--lcd-bg);
  border-radius: 10px;
  border: 3px solid var(--anthracite);
  box-shadow: inset 0 0 24px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.25);
}

/* ---- contrôles : potards + boutons ---- */
.controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 0 4px;
}

.knobs { display: flex; gap: 18px; padding-top: 4px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.knob .cap {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, var(--anthracite) 70%);
  border: 2px solid #151515;
  box-shadow: 0 4px 8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.2);
  position: relative;
  cursor: ns-resize;
  touch-action: none;
}
.knob .cap i {
  position: absolute;
  left: 50%; top: 4px;
  width: 4px; height: 16px;
  margin-left: -2px;
  background: var(--amber);
  border-radius: 2px;
  transform-origin: 2px 25px;
}
.knob span { font-size: 11px; font-weight: bold; letter-spacing: .1em; }

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
  max-width: 300px;
}
.btn {
  font: inherit;
  background: var(--anthracite);
  color: #d8d8d0;
  border: none;
  border-radius: 8px;
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 3px 0 #151515;
}
.btn b { font-size: 12px; font-weight: bold; }
.btn span { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.btn:active, .btn.held { background: var(--amber); color: var(--anthracite); box-shadow: 0 1px 0 #151515; transform: translateY(2px); }
.btn.held span { opacity: .9; }
.btn.active { outline: 2px solid var(--amber); }
#btn-record b { color: #e05a4e; }
#btn-record.held b { color: var(--anthracite); }

/* ---- pads 4×4 ---- */
.pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  flex: 1;
}
.pad {
  position: relative;
  width: 100%;          /* le ratio se calcule sur la largeur (sinon sur la hauteur de rangée → pads trop larges) */
  min-width: 0;
  aspect-ratio: 1 / 0.82;
  background: linear-gradient(180deg, #3a3a3a, var(--anthracite));
  border: 2px solid #151515;
  border-radius: 10px;
  box-shadow: 0 4px 0 #151515;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: bold;
  color: rgba(255,255,255,.35);
  touch-action: none;
}
.pad .led {
  position: absolute;
  top: 8px; right: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3a2f1c;
  transition: background .05s;
}
.pad.lit .led { background: var(--amber-hi); box-shadow: 0 0 8px var(--amber-hi); }
.pad.playhead .led { background: #7ee08a; box-shadow: 0 0 8px #7ee08a; }
.pad.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #151515; background: #454545; color: var(--amber-hi); }
.pad.joue { background: #5a4422; color: var(--amber-hi); }   /* pad joué par le séquenceur */
.pad.sel { outline: 2px solid var(--amber); }
.pad.held { outline: 2px solid #7ee08a; } /* Green outline for held pad in drum mode */

/* ghost note : pas d'un autre son en mode lecture — petit point ambre discret */
.pad.ghost::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(200, 136, 42, 0.35);
  transform: translate(-50%, -50%);
}
/* mixed : ton son + autres sons au même pas — point vert au centre */
.pad.mixed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee08a;
  transform: translate(-50%, -50%);
}

.hint {
  font-size: 10px;
  text-align: center;
  letter-spacing: .04em;
  opacity: .65;
  padding-bottom: 2px;
}

@media (max-width: 420px) {
  #unit { border-radius: 0; min-height: 100dvh; min-height: 100vh; }
  .knob .cap { width: 48px; height: 48px; }
}
/* écrans courts (iPhone SE / 8…) : tout doit tenir sans défiler */
@media (max-height: 740px) {
  #unit { padding: 8px; padding-top: max(8px, env(safe-area-inset-top, 8px)); }
  .top { padding-bottom: 6px; }
  .face { gap: 8px; }
  .pads { gap: 7px; }
  .pad { aspect-ratio: 1 / 0.66; }
  .knob .cap { width: 42px; height: 42px; }
  .hint { display: none; }
  #lcd { width: auto; height: min(28vh, 200px); align-self: center; }
  .top .brand { display: none; }
  .io { gap: 4px; }
  .io button { padding: 5px 6px; font-size: 9px; letter-spacing: .03em; }
}

/* ---- panneau projets ---- */
#prj { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.prj-carte { width: min(380px, 100%); max-height: 85vh; overflow: auto; background: var(--pcb); border-radius: 14px; padding: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.prj-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.prj-carte button { font: inherit; text-transform: uppercase; background: var(--anthracite); color: #d8d8d0; border: none; border-radius: 6px; padding: 7px 9px; cursor: pointer; }
.prj-carte button:active { background: var(--amber); color: var(--anthracite); }
.prj-ici { margin-bottom: 10px; }
.prj-nouveau { width: 100%; margin-bottom: 10px; background: var(--amber) !important; color: var(--anthracite) !important; }
.prj-carte ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.prj-carte li { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.25); border-radius: 8px; padding: 6px 8px; }
.prj-carte li span { flex: 1; display: flex; flex-direction: column; }
.prj-carte li small { opacity: .6; font-size: 10px; }
.prj-vide { opacity: .6; }
.prj-note { margin-top: 10px; font-size: 10px; opacity: .6; text-transform: none; }

/* ---- séquenceur en grand (tap sur l'écran) ---- */
#grand-seq {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(10px, env(safe-area-inset-top, 10px)) 8px 10px;
  overflow-y: auto;
}
#grand-seq[hidden] { display: none; }
.gs-boite {
  width: min(480px, 100%);
  background: var(--lcd-bg);
  color: var(--amber);
  border: 2px solid #000;
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px;
}
.gs-tete { display: flex; justify-content: space-between; align-items: center; }
.gs-titre { color: var(--amber-hi); letter-spacing: .06em; text-transform: uppercase; }
#grand-seq button {
  font: inherit; font-size: 11px;
  background: transparent; color: var(--amber);
  border: 1px solid rgba(200,136,42,.45); border-radius: 6px;
  padding: 6px 7px; cursor: pointer;
}
#grand-seq button.actif { background: var(--amber); color: var(--lcd-bg); border-color: var(--amber); }
.gs-fermer { font-size: 16px !important; padding: 2px 10px !important; }
.gs-sons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.gs-sons button { padding: 5px 0 !important; }
.gs-sons button.drum { border-style: dashed !important; }
.gs-panneau.ligne-seule .gs-panneau-cmd, .gs-panneau.ligne-seule .gs-actions, .gs-panneau.ligne-seule .gs-panneau-vel { display: none; }
.gs-sons button { position: relative; }
.gs-sons button.pleine::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.gs-sons button.pleine:not(.actif) { color: var(--amber); border-color: var(--amber) !important; font-weight: bold; }
.gs-sons button.pleine.actif::after { background: var(--lcd-bg); }
.gs-outils { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.gs-groupe { display: flex; gap: 4px; }
.gs-sel { color: rgba(200,136,42,.8); font-size: 11px; }
.gs-grille {
  display: grid;
  grid-template-columns: 34px repeat(var(--cols, 16), minmax(0, 1fr));
  gap: 1px;
  touch-action: manipulation;
}
.gs-l {
  font-size: 9px; color: rgba(200,136,42,.7);
  display: flex; align-items: center; padding-left: 2px;
  border-radius: 3px; cursor: pointer; height: 22px;
}
.gs-l.octave { color: var(--amber-hi); }
.gs-l.choisie { background: var(--amber); color: var(--lcd-bg); }
.gs-c {
  position: relative; height: 22px; touch-action: none;
  background: rgba(200,136,42,.07);
  border-radius: 2px; cursor: pointer;
}
.gs-c.temps { background: rgba(200,136,42,.14); }
.gs-c.joue { background: rgba(126,224,138,.25); }
.gs-n {
  position: absolute; z-index: 1; bottom: 2px;
  width: calc(100% * var(--l, 1) + (var(--l, 1) - 1) * 1px - 18%);   /* --l = longueur en cases (1px = l'écart entre cases) */
  height: calc((100% - 4px) * (.3 + .7 * var(--v, 1)));
  margin-left: 9%;
  /* jauge : plus haute et plus claire quand la vélocité monte */
  background: linear-gradient(to top, rgba(200,136,42,.5), rgba(240,180,90, calc(.35 + .65 * var(--v, 1))));
  border-radius: 2px;
  pointer-events: none;
}
.gs-grille { overflow: hidden; }   /* une note décalée en fin de ligne ne dépasse pas de la grille */
.gs-n.choisie { background: linear-gradient(to top, var(--amber), var(--amber-hi)); box-shadow: 0 0 0 1px #fff3; }
.gs-n.hors { box-shadow: inset 0 0 0 1px #7ee08a; }
.gs-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gs-aide { font-size: 9px; color: rgba(200,136,42,.55); line-height: 1.3; }
.gs-coupure { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 10px; }
.gs-coupure[hidden] { display: none; }
.gs-coupure span { margin-right: 4px; color: rgba(200,136,42,.8); }
.gs-l b { margin-left: auto; padding-right: 3px; font-weight: normal; color: #7ee08a; }
.gs-tete { gap: 8px; }
.gs-titre { flex: 1; }
.gs-play { font-size: 15px !important; padding: 3px 14px !important; }
.gs-vel { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.gs-vel input { flex: 1; accent-color: var(--amber); }
.gs-vel b { width: 26px; text-align: right; font-weight: normal; color: var(--amber-hi); }
.gs-bulle {
  position: fixed; z-index: 60; transform: translate(-50%, -100%);
  background: var(--amber-hi); color: var(--lcd-bg);
  font-size: 11px; padding: 2px 6px; border-radius: 4px; pointer-events: none;
}
.gs-bulle[hidden] { display: none; }
.gs-l.ecoute { background: rgba(240,180,90,.35); color: var(--amber-hi); }
.gs-n.longueur { border-right: 2px solid var(--amber-hi); }
.gs-rect {
  position: fixed; z-index: 55; pointer-events: none;
  border: 1.5px dashed var(--amber-hi); background: rgba(240,180,90,.12); border-radius: 3px;
}
.gs-rect[hidden] { display: none; }
.gs-grille.avec-sel .gs-n:not(.choisie) { opacity: .35; }
.gs-n.choisie { outline: 1.5px solid #fff8; outline-offset: -1px; }

/* mute / solo */
.pad.muet { opacity: .45; }
.pad.solo .led { background: #7ee08a; box-shadow: 0 0 8px #7ee08a; }
.gs-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#grand-seq .gs-sons button.muet { opacity: .4; text-decoration: line-through; }
#grand-seq .gs-sons button.solo { border-color: #7ee08a !important; color: #7ee08a; box-shadow: inset 0 0 0 1px #7ee08a; }
#grand-seq .gs-sons button.solo.actif { background: #7ee08a; color: var(--lcd-bg); }

/* longueur de piste et mesures */
.gs-mesures, .gs-pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.gs-pages[hidden] { display: none; }
.gs-pages .gs-groupe { flex-wrap: wrap; }
#gs-copier { margin-left: auto; }
#gs-suivre { margin-left: auto; }
#grand-seq button:disabled { opacity: .35; }

/* grand séquenceur à la taille de l'écran : pas de défilement, la grille prend la hauteur qui reste */
#grand-seq { overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)); }
.gs-boite { height: 100%; min-height: 0; gap: 6px; }
.gs-grille { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.gs-l, .gs-c { height: auto; min-height: 0; }

/* la note commence au bord gauche de sa case : son début visuel = le début du pas */
.gs-n { margin-left: 0; width: calc(100% * var(--l, 1) + (var(--l, 1) - 1) * 1px - 2px); }

/* zoom à deux doigts : taille des cases en px (--cw, --rh posées par grand-seq.js), noms de ligne collés à gauche */
.gs-grille {
  grid-template-columns: 34px repeat(var(--cols, 16), var(--cw, minmax(0, 1fr)));
  grid-auto-rows: var(--rh, minmax(0, 1fr));
  touch-action: none;
}
.gs-l { position: sticky; left: 0; z-index: 2; background: var(--lcd-bg); }

/* actions du grand séquenceur sur 4 colonnes (7 boutons avec « suppr. ») */
.gs-actions { grid-template-columns: repeat(4, 1fr); }

/* panneau d'édition de la sélection (v46) */
.gs-panneau { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(200,136,42,.35); padding-top: 6px; }
.gs-panneau[hidden] { display: none; }
.gs-panneau-tete { display: flex; align-items: center; gap: 6px; }
.gs-panneau-tete .gs-sel { flex: 1; color: var(--amber-hi); }
.gs-panneau-vel { display: flex; align-items: center; gap: 8px; }
.gs-panneau-vel .gs-vel { flex: 1; }

/* v47 : la sélection s'édite dans un menu flottant (appui long), la grille garde sa taille */
.gs-panneau {
  position: fixed; z-index: 60; width: min(330px, calc(100vw - 24px));
  background: var(--lcd-bg); border: 1px solid var(--amber); border-radius: 10px;
  padding: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.7);
}
.gs-panneau-cmd { display: flex; gap: 5px; }
.gs-panneau-cmd button { flex: 1; }
.gs-panneau-cmd button[hidden] { display: none; }
.gs-fermer-menu { padding: 2px 9px !important; }

/* duplication par appui long : les copies brillent et « sautent » à chaque pas de déplacement */
.gs-n.copie { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 10px rgba(255,255,255,.7); animation: gs-pop .3s ease-out; }
@keyframes gs-pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.gs-haptique { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* panneau session (bouton bpm en haut) */
.sess label { display: flex; justify-content: space-between; margin: 10px 0 4px; }
.sess input[type=range] { width: 100%; accent-color: var(--amber); }
.sess-ligne { display: flex; gap: 6px; align-items: center; }
.sess-ligne input { flex: 1; }
.sess-ligne button { flex: 0 0 auto; min-width: 44px; }
.sess-ligne + .sess-ligne { margin-top: 6px; }
.sess-ligne [data-preset] { flex: 1; }
.prj-carte.sess button.actif { background: var(--amber); color: var(--anthracite); }

/* bouton « réglage » en mode sélection : pads réglés ensemble, et choix des pads */
.pad.regle { box-shadow: inset 0 0 0 2px rgba(200,136,42,.55); }
.pad.choix { outline: 1px dashed rgba(200,136,42,.6); }
.pad.choix.regle { background: var(--amber); color: var(--anthracite); box-shadow: none; }

/* record sous write (4e colonne, 2e rangée) */
#btn-record { grid-column: 4; }