*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#020617;
  color:#e5e7eb;
  overflow:hidden; /* PC : on évite le scroll vertical, on veut que tout “rentre” */
}

#app{
  min-height:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ---------------- Buttons / Inputs ---------------- */
.btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.primary{
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.45);
}
.btn.primary:hover{
  background:rgba(34,197,94,.23);
  border-color:rgba(34,197,94,.60);
}

/* version compacte */
.btn.btnSm{
  padding:8px 10px;
  border-radius:11px;
  font-weight:750;
  font-size:12px;
}

.miniLabel{
  font-size:12px;
  opacity:.82;
  margin-left:4px;
}

.select, .input{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#e5e7eb;
  padding:10px 10px;
  border-radius:12px;
  font-weight:700;
}
.selectSm{
  padding:8px 10px;
  border-radius:11px;
  font-size:12px;
  font-weight:750;
  min-width: 220px;
}
.inputSm{
  padding:8px 10px;
  border-radius:11px;
  font-size:12px;
  font-weight:800;
  width:78px;
}

/* ---------------- Layout ---------------- */
.main{
  flex:1 1 auto;
  min-height:0;
  width:100%;      /* clavier pleine largeur */
  max-width:none;  /* idem */
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Ligne du haut : cercle + colonne droite compacte */
.topGrid{
  flex:0 0 auto;
  display:grid;
  grid-template-columns: 1fr 360px; /* colonne droite étroite */
  gap:12px;
  align-items:stretch;
  min-height:0;
}

.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 12px;
  min-height:0;
}

.divider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:10px 0;
}

/* ---------------- Wheel (taille conservée) ---------------- */
.cardWheel{ padding:10px 12px 8px; }

.wheelWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.wheel{
  position:relative;
  width:min(520px, 92vw); /* ne pas réduire : lisible */
  aspect-ratio: 1 / 1;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(59,130,246,.14) 0%,
      rgba(59,130,246,.06) 38%,
      rgba(34,197,94,.04) 62%,
      rgba(0,0,0,0) 72%),
    rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.wheel::before{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
}
.wheel::after{
  content:"";
  position:absolute;
  inset:26%;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
}

/* boutons de tonalités (injectés par app.js) */
.keyBtn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  color:#fff;
  font-weight:950;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  transition: transform .10s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.keyBtn:hover{ filter:brightness(1.10); border-color:rgba(255,255,255,.30); }
.keyBtn:active{ transform:translate(-50%,-50%) scale(.98); }

.keyBtn.major{
  box-shadow: 0 0 0 2px rgba(59,130,246,.16) inset, 0 12px 35px rgba(0,0,0,.25);
}
.keyBtn.minor{
  box-shadow: 0 0 0 2px rgba(34,197,94,.14) inset, 0 12px 35px rgba(0,0,0,.25);
  font-weight:900;
}
.keyBtn.selected{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.45);
  filter:brightness(1.15);
}

.wheelCenter{
  position:absolute;
  inset:34%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.52);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  padding:10px 12px;
  text-align:center;
}
.centerLine{ display:flex; flex-direction:column; gap:4px; }
.centerLabel{ font-size:11px; opacity:.80; font-weight:800; }
.centerValue{ font-size:18px; font-weight:950; letter-spacing:.2px; }
.centerValue.small{ font-size:13px; font-weight:850; opacity:.92; }

.legend{
  font-size:12px;
  opacity:.9;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.sepSmall{
  width:1px;
  height:12px;
  background:rgba(255,255,255,.18);
  display:inline-block;
}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.dot.major{ background:#3b82f6; }
.dot.minor{ background:#22c55e; }

/* ---------------- Side (compact) ---------------- */
.cardSide.compact{
  padding:10px 10px; /* compact */
}

.sideBlock{ display:flex; flex-direction:column; gap:8px; }

.sideTitle{
  font-weight:950;
  letter-spacing:.2px;
  opacity:.96;
  font-size:13px;
}

.controlsRow{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
}

.controlsRow.compactForm{
  gap:8px;
  align-items:center;
}

.stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.statsCompact{
  gap:8px;
}

.stat{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:8px 10px; /* compact */
}
.stat .k{
  font-size:11px;
  opacity:.78;
  font-weight:900;
}
.stat .v{
  margin-top:4px;
  font-size:16px; /* réduit */
  font-weight:950;
  font-variant-numeric: tabular-nums;
}

.help{
  font-size:13px;
  opacity:.92;
  line-height:1.35;
}
.helpCompact{
  font-size:12px;
  opacity:.82;
  margin-top:2px;
}

/* ---------------- Keyboard full width ---------------- */
.cardKeyboardWide{
  padding:10px 12px;
}

.kbWrap.wide{
  width:100%;
}

.keyboard{
  position:relative;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  overflow:hidden;
}

/* pleine largeur + plus haut (ligne dédiée) */
.keyboardWide{
  height: clamp(150px, 34vh, 260px);
}

.key{
  position:absolute;
  top:0;
  bottom:0;
  border:1px solid rgba(0,0,0,.55);
  user-select:none;
  touch-action: manipulation;
}
.key.white{ background:rgba(255,255,255,.92); z-index:1; }
.key.black{ background:rgba(0,0,0,.88); z-index:3; border:1px solid rgba(255,255,255,.08); }

.key .label{
  position:absolute;
  left:0; right:0;
  bottom:8px;
  text-align:center;
  font-size:12px;
  font-weight:850;
  color:rgba(0,0,0,.60);
  pointer-events:none;
}
.key.black .label{ color:rgba(255,255,255,.55); }

body.hideKeyLabels .key.white .label{ opacity:0; }

/* ---------------- Points lumineux / cibles (toujours visibles) ----------------
   On utilise un pseudo-élément : fonctionne même si app.js ne crée pas .lamp.
   Si app.js crée .lamp, on le masque pour éviter les doublons.
*/
.key .lamp{ display:none !important; }

.key.target::after{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  width:16px;
  height:16px;
  transform:translateX(-50%);
  border-radius:999px;
  pointer-events:none;
}

/* Sur blanches : point bleu avec liseré blanc */
.key.white.target::after{
  background:rgba(59,130,246,.78);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.88),
    0 0 18px rgba(59,130,246,.30);
}

/* Sur noires : point blanc avec liseré bleu */
.key.black.target::after{
  background:rgba(255,255,255,.90);
  box-shadow:
    0 0 0 2px rgba(59,130,246,.55),
    0 0 16px rgba(59,130,246,.28);
}

/* ---------------- Monitoring appui (compat : press / pressL / pressR) ---------------- */
.key.press,
.key.pressL,
.key.pressR{
  box-shadow: 0 0 0 2px rgba(59,130,246,.35) inset, 0 0 16px rgba(59,130,246,.25);
}
.key.white.press,
.key.white.pressL,
.key.white.pressR{
  background:rgba(59,130,246,.55) !important;
}
.key.black.press,
.key.black.pressL,
.key.black.pressR{
  background:rgba(59,130,246,.65) !important;
}

/* ---------------- Altérations tonalité : ON (corrigé) ----------------
   Exigences :
   1) AUCUNE touche blanche ne doit devenir verte.
   2) Le gris sur blanches doit être extrêmement clair (blanc légèrement grisé).

   Donc :
   - sigOk : uniquement visible sur touches noires
   - sigNo : voile gris très léger sur blanches
*/

/* Sécurité absolue : si une BLANCHE reçoit sigOk (bug JS), on neutralise */
.key.white.sigOk{
  background:rgba(255,255,255,.92) !important;
  box-shadow:none !important;
}

/* sigOk sur NOIRE : vert discret (transparence) */
.key.black.sigOk{
  background:rgba(0,0,0,.88) !important;
  box-shadow:
    inset 0 0 0 999px rgba(34,197,94,.14),
    0 0 10px rgba(34,197,94,.06);
}

/* sigNo sur BLANCHE : blanc légèrement grisé (très clair) */
.key.white.sigNo{
  background:rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.055);
}

/* sigNo sur NOIRE : éclaircissement très léger */
.key.black.sigNo{
  background:rgba(0,0,0,.88) !important;
  box-shadow: inset 0 0 0 999px rgba(255,255,255,.055);
}

/* ---------------- Overlay / Toast ---------------- */
.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.60);
  z-index:90;
  padding:16px;
}
.overlay.hidden{ display:none; }

.panel{
  width:min(520px, 100%);
  background:rgba(15,23,42,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
.panelTitle{ font-weight:950; font-size:16px; }
.panelText{ margin-top:8px; opacity:.92; line-height:1.35; font-size:13px; }
.panelActions{ margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }
.panelList{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }

.inputWide{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  font-weight:850;
}

.toast{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  padding:10px 12px;
  border-radius:999px;
  font-size:13px;
  z-index:95;
  max-width:min(92vw, 720px);
  text-align:center;
}
.toast.hidden{ display:none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  body{ overflow:auto; } /* mobile : autorise le scroll si besoin */
  .topGrid{ grid-template-columns:1fr; }
  .keyboardWide{ height: clamp(140px, 30vh, 240px); }
  .selectSm{ min-width: 0; width: 100%; }
}
@media (max-width: 520px){
  .keyBtn{ width:46px; height:46px; font-size:13px; }
  .wheelCenter{ inset:36%; }
  .keyboardWide{ height: clamp(130px, 30vh, 220px); }
}