:root{
  /* Palette « coucher de soleil » assortie au décor 3D */
  --gold:#ffce6a;
  --coral:#ff9d6b;
  --rose:#ff7e8a;
  --violet:#6c5b9e;
  --ink:#2a1c2e;
  --txt:#fff4e9;
  --glass:rgba(42,28,46,.42);
  --glass-brd:rgba(255,236,210,.20);
  --shadow:0 8px 30px rgba(20,8,24,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  overflow:hidden;
  background:#1a1322;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt);
  -webkit-user-select:none; user-select:none;
  touch-action:none;
  /* Bloque le pull-to-refresh mobile : un glissé vers le bas dans une zone
     défilante (#modelmenu, #welcome) chaînait vers le geste navigateur →
     RECHARGEMENT de la page au lieu du switch de modèle. */
  overscroll-behavior:none;
}

#cv{ display:block; width:100%; height:100%; }

/* ── Chargement ─────────────────────────────────── */
#loader{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  background:radial-gradient(120% 120% at 50% 64%, #ff9d6b 0%, #b65c6e 38%, #2a1c3e 78%);
  transition:opacity .7s ease;
}
#loader.hidden{ opacity:0; pointer-events:none; }
.spin{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff2cc;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.ltxt{ font-size:14px; opacity:.92; letter-spacing:.05em; text-shadow:0 1px 8px rgba(0,0,0,.3); }

/* ── Écran d'accueil : choix du modèle de départ ─────────────────── */
#welcome{
  position:fixed; inset:0; z-index:60;
  display:flex;
  /* Centré quand ça tient (.wbox margin:auto), défilable sinon (beaucoup de
     modèles et/ou petit écran paysage) → jamais coupé. */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* pas de pull-to-refresh depuis l'accueil */
  padding:clamp(16px, 5vw, 40px);
  background:radial-gradient(120% 120% at 50% 40%, #ff9d6b 0%, #b65c6e 40%, #2a1c3e 82%);
  transition:opacity .5s ease;
}
#welcome.hidden{ opacity:0; pointer-events:none; }
.wbox{
  margin:auto;   /* centre vertical si ça tient, sinon ancrage haut + scroll */
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; max-width:900px; width:100%;
}
.wtitle{
  font-size:clamp(28px, 6vw, 40px); font-weight:800; letter-spacing:.06em;
  background:linear-gradient(90deg,var(--gold),var(--coral),var(--rose));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.wsub{ font-size:clamp(13px, 2.4vw, 15px); opacity:.92; letter-spacing:.04em; margin-bottom:22px; }
/* Grille auto-ajustée : s'adapte au NOMBRE de modèles et à la largeur dispo
   (cartes de ~150px, autant par rangée que l'écran permet, le reste passe à
   la ligne). Aucun réglage à toucher quand on ajoute une animation. */
.wchoices{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 160px));
  justify-content:center;
  gap:clamp(12px, 2vw, 18px); width:100%;
}
.wchoice{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 14px 18px; border-radius:20px;
  background:var(--glass); color:var(--txt);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  cursor:pointer; font-family:inherit;
  transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.wchoice:hover{
  background:rgba(64,42,60,.62); border-color:rgba(255,206,106,.7);
  transform:translateY(-3px); box-shadow:0 0 26px rgba(255,168,90,.35), var(--shadow);
}
.wchoice:active{ transform:translateY(-1px) scale(.98); }
.wchoice .wi{ font-size:clamp(36px, 8vw, 46px); filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); line-height:1; }
.wchoice .wl{ font-size:clamp(15px, 3vw, 17px); font-weight:700; letter-spacing:.04em; }
.whint{ margin-top:26px; font-size:12px; opacity:.78; max-width:34ch; }
.whint kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; padding:1px 6px; font-size:10.5px; font-weight:800;
  font-family:inherit; color:var(--txt);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,236,210,.28); border-radius:6px;
}
/* Très petit écran : 2 colonnes fixes (garde des cartes touchables et lisibles
   même avec beaucoup de modèles, plutôt qu'une seule colonne étirée). */
@media (max-width:420px){
  .wchoices{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .wchoice{ padding:16px 8px 12px; }
  .whint{ margin-top:18px; }
}

/* ── Menu déroulant des modèles (clic sur le titre) ──────────────── */
#modelmenu{
  position:fixed; top:58px; left:50%; transform:translateX(-50%);
  z-index:40; min-width:190px; max-width:min(86vw, 280px);
  /* Défile si la liste de modèles dépasse l'écran (mobile / beaucoup d'anims).
     overscroll-behavior : le scroll du menu ne doit JAMAIS chaîner vers le
     pull-to-refresh de la page (bug mobile « le menu recharge la page »). */
  max-height:calc(100vh - 72px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:4px; padding:6px;
  background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:16px; box-shadow:var(--shadow);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:opacity .16s ease, transform .16s ease;
  transform-origin:top center;
}
@media (max-width:560px){
  #modelmenu{ top:max(54px, calc(env(safe-area-inset-top) + 44px)); }
}
#modelmenu.hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-6px) scale(.97); }
.mitem{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:11px;
  background:transparent; color:var(--txt); border:1px solid transparent;
  cursor:pointer; font-family:inherit; text-align:left;
  transition:background .15s, border-color .15s;
}
.mitem:hover{ background:rgba(64,42,60,.6); border-color:rgba(255,206,106,.45); }
.mitem .mi{ font-size:20px; line-height:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.mitem .ml{ font-size:14px; font-weight:600; letter-spacing:.03em; }
.mitem .mcur{ margin-left:auto; font-size:12px; color:var(--gold); opacity:0; }
.mitem.current{ background:rgba(255,206,106,.12); border-color:rgba(255,206,106,.4); }
.mitem.current .mcur{ opacity:1; }
/* Le menu fait partie de l'UI masquée en mode performance. */
body.perf #modelmenu{ opacity:0; pointer-events:none; }

/* ── Titre = bouton central de bascule (pigeon↔human) ───────────── */
.brandbtn{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:30; display:flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:var(--glass); color:var(--txt); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  cursor:pointer; font-family:inherit;
  transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
/* La pilule est centrée par translateX(-50%) : on le conserve dans hover/active. */
.brandbtn:hover{ background:rgba(64,42,60,.6); border-color:rgba(255,206,106,.55); transform:translateX(-50%) translateY(-1px); }
.brandbtn:active{ transform:translateX(-50%) scale(.97); }
.brandbtn .bmark{ font-size:19px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
.brandbtn .btxt{ display:flex; align-items:center; line-height:1; }
.brandbtn .btxt b{
  font-size:15px; font-weight:700; letter-spacing:.05em; white-space:nowrap;
  background:linear-gradient(90deg,var(--gold),var(--coral));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brandbtn .swap{ font-size:14px; opacity:.75; transition:opacity .2s; }
.brandbtn:hover .swap{ opacity:1; }

/* ── Boutons flottants ──────────────────────────── */
.floatbtn{
  position:fixed; top:16px; z-index:30;
  height:40px; min-width:44px; padding:0 15px;
  display:flex; align-items:center; gap:7px; justify-content:center;
  background:var(--glass); color:var(--txt);
  border:1px solid var(--glass-brd); border-radius:999px;
  font-size:13.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.floatbtn .ico{ font-size:15px; }
.floatbtn:hover{ background:rgba(64,42,60,.6); border-color:rgba(255,206,106,.55); transform:translateY(-1px); }
.floatbtn:active{ transform:scale(.95); }
#fsbtn{ right:16px; font-size:18px; }
/* API Fullscreen indisponible (iPhone Safari) : bouton inutile → masqué (posé par JS). */
body.no-fs #fsbtn{ display:none; }
#midibtn{ right:74px; }
#midibtn.on{
  border-color:rgba(255,206,106,.85);
  color:var(--gold);
  box-shadow:0 0 18px rgba(255,206,106,.35), var(--shadow);
}
/* Le statut MIDI est fondu dans le bouton : on borne le libellé pour qu'un nom
   de clavier long ne déborde pas vers le titre central. */
#midibtn .lbl{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Bascule en cours (chargement paresseux du human) : pulse + clic neutralisé. */
#swapbtn.busy{ opacity:.6; pointer-events:none; animation:swapPulse .9s ease-in-out infinite; }
@keyframes swapPulse{ 50%{ border-color:rgba(255,206,106,.7); } }

/* ── Clavier à l'écran ──────────────────────────── */
#keyboard{
  position:fixed; left:50%; bottom:94px; transform:translateX(-50%);
  z-index:30; display:flex; gap:8px;
  padding:12px 13px 14px; border-radius:18px;
  background:var(--glass); border:1px solid var(--glass-brd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  max-width:96vw;
}
.key{
  position:relative;
  width:44px; height:112px;
  background:linear-gradient(#fffdf8 0%,#fbe9d4 55%,#f1d3b6 100%);
  border-radius:5px 5px 9px 9px;
  border:1px solid rgba(120,70,40,.28);
  box-shadow:inset 0 -7px 12px rgba(150,90,50,.18), inset 0 2px 2px rgba(255,255,255,.7), 0 3px 6px rgba(30,12,18,.3);
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:10px; gap:5px;
  transition:transform .05s, background .1s, box-shadow .1s;
}
.key::before{
  content:""; position:absolute; inset:3px 4px auto; height:30%;
  border-radius:4px; background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));
}
.key:hover{ background:linear-gradient(#ffffff 0%,#ffeedd 60%,#f6dcc2 100%); }
.key.active{
  background:linear-gradient(var(--gold) 0%,var(--coral) 100%);
  transform:translateY(4px);
  box-shadow:inset 0 -3px 9px rgba(150,70,30,.35), 0 0 22px rgba(255,168,90,.7);
}
.key .pc{ font-size:13px; font-weight:800; color:#5a3320; letter-spacing:.02em; }
.key .nm{ font-size:9px; font-weight:600; color:#9a6a48; letter-spacing:.04em; text-transform:uppercase; }
.key.active .pc{ color:#4a2208; }
.key.active .nm{ color:#7a3c12; }

/* ── Aide : barre-pilule sur une ligne, groupes séparés par des points ──────── */
#hint, #hint-touch{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:30; max-width:96vw;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 14px; padding:8px 16px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  font-size:12px; opacity:.92;
}
/* Par défaut (desktop / pointeur fin) on montre l'aide clavier, pas la tactile. */
#hint-touch{ display:none; }
#hint .grp, #hint-touch .grp{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#hint .sep, #hint-touch .sep{ width:1px; height:13px; background:rgba(255,236,210,.22); }
#hint b, #hint-touch b{ color:var(--txt); font-weight:700; }
#hint em{ font-style:normal; color:var(--gold); font-weight:700; }
#hint kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; padding:2px 6px;
  font-size:10.5px; font-weight:800; font-family:inherit; color:var(--txt);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,236,210,.28);
  border-radius:6px;
}

body.hide-cursor{ cursor:none; }

/* ── Mode performance (touche P) : on masque toute l'UI, ne reste que la scène.
   Le jeu clavier/MIDI continue de fonctionner (on ne fait que cacher). ───── */
.brandbtn, .floatbtn, #keyboard, #hint, #hint-touch{
  transition:opacity .45s ease, transform .12s, background .2s, border-color .2s, box-shadow .2s;
}
body.perf .brandbtn,
body.perf .floatbtn,
body.perf #keyboard,
body.perf #hint,
body.perf #hint-touch{
  opacity:0; pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════════════════
   TACTILE — sur tout appareil à pointeur grossier (mobile / tablette), on bascule
   les indications « clavier PC » vers des indications « touch » (glisser/pincer).
   ════════════════════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  #hint{ display:none; }
  #hint-touch{ display:flex; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — présentation repensée pour petit écran tactile.
   - On retire le MIDI et le statut (Web MIDI absent d'iOS Safari, place à la scène).
   - Le clavier-piano devient une grille de PASTILLES tactiles (2 rangées de 4),
     larges et faciles au pouce, sans label de touche PC (pas de clavier ici).
   - Respect du notch via les safe-area-insets.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  /* Moins d'UI superflue : MIDI masqué (absent d'iOS Safari) — on garde titre + plein écran.
     Le bouton plein écran est masqué dynamiquement par JS (classe .no-fs sur <body>)
     seulement là où l'API Fullscreen n'existe pas (iPhone Safari), pas par largeur d'écran. */
  #midibtn{ display:none; }

  .brandbtn{ top:max(10px, env(safe-area-inset-top)); padding:6px 12px 6px 10px; }
  .brandbtn .btxt b{ font-size:13.5px; }
  .brandbtn .swap{ font-size:12.5px; }
  #fsbtn{ top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }

  /* Clavier → grille de pastilles tactiles plein-largeur (auto-réparties 4 par rangée). */
  #keyboard{
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    bottom:max(14px, env(safe-area-inset-bottom));
    transform:none; max-width:none; width:auto;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:9px;
    padding:12px; border-radius:22px;
  }
  .key{
    width:auto; height:56px; min-height:56px;
    border-radius:14px; padding:0; gap:0;
    align-items:center; justify-content:center;
    background:linear-gradient(160deg,#fffdf8 0%,#fbe9d4 55%,#f1d3b6 100%);
  }
  .key::before{ inset:4px 6px auto; height:34%; border-radius:9px; }
  .key .pc{ display:none; }                       /* pas de touche clavier sur mobile */
  .key .nm{ font-size:15px; font-weight:800; color:#7a3c12; }
  .key.active{ transform:scale(.95); }
  .key.active .nm{ color:#5a2408; }

  /* Aide tactile masquée : sur petit écran elle prend de la place pour rien,
     l'usage (toucher les pastilles) est déjà évident. */
  #hint-touch{ display:none; }
}