/*==========================================================
  ACCORD RAPIDE — habillage du jeu.
  Le CHROME (boutons, écriteaux, puces, Clavi) vient de la charte
  lusique-chrome.css. Ici : uniquement l'aire de jeu — et elle suit
  la charte elle aussi (demande François 03/08 : SORBET jusque dans
  le game play). Aucune couleur en dur : tout passe par --lu-*.

  Teinte du jeu (§7, LA seule variable par jeu) : bleu ciel « vitesse ».
==========================================================*/
:root{
  --lu-accent:#bfe0f5;
  /* Teinte de la manche en cours : posée par le JS (succès / temps écoulé). */
  --ar-etat:var(--lu-primary-strong);
}

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--lu-font-ui);
  color:var(--lu-ink);
  /* Fond « dream » de la charte (§2). Il est posé ici : lusique-gradient.js
     n'est PAS un fond, c'est la courbe de notation /10 du socle. */
  background:var(--lu-grad-dream) fixed;
  background-color:var(--lu-bg);
  overflow:hidden;
  /* Anti-loupe / anti-sélection (§13 n10) */
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

#jeu{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  gap:var(--lu-s2);
  box-sizing:border-box;
  /* Encoche (§13 n18) : env() EN DIRECT dans calc(), jamais via une variable
     intermédiaire — sinon iOS résout la variable à 0 avant le calc. */
  padding:calc(env(safe-area-inset-top,0px) + 10px)
          calc(env(safe-area-inset-right,0px) + 12px)
          calc(env(safe-area-inset-bottom,0px) + 8px)
          calc(env(safe-area-inset-left,0px) + 12px);
}

/*---------------------------------------------------------
  Barre du haut
---------------------------------------------------------*/
#barre{
  flex:0 0 auto;
  display:flex; align-items:center; gap:var(--lu-s2);
}
#barre h1{
  font-family:var(--lu-font-title); font-weight:400;
  font-size:clamp(17px, 2.7vh, 26px);
  color:var(--lu-primary-ink);
  margin:0; white-space:nowrap;
}
#barre h1 .em{ font-size:.95em; }
.hud-btns{ display:flex; gap:var(--lu-s2); margin-left:auto; }
/* .iconbtn est gabarité 44×44 par la charte ; on ne pose ici que la peau. */
.iconbtn{
  border:1px solid var(--lu-border);
  background:var(--lu-surface); color:var(--lu-ink);
  box-shadow:var(--lu-gloss);
  font-size:var(--lu-fz-3); cursor:pointer;
  transition:transform var(--lu-t-btn);
}
.iconbtn:active{ transform:scale(.94); }

/*---------------------------------------------------------
  Barre MIDI
---------------------------------------------------------*/
#midiBar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:var(--lu-s2); flex-wrap:wrap;
  padding:var(--lu-s2) var(--lu-s3);
  background:var(--lu-surface);
  border:1px solid var(--lu-border); border-radius:var(--lu-r-card);
  box-shadow:var(--lu-shadow);
}
#midiBar .lu-input{ width:auto; min-width:170px; max-width:min(46vw,300px); min-height:44px; }
#midiLed{ gap:var(--lu-s1); color:var(--lu-muted); }
#midiLed.on{
  background:var(--lu-success); color:var(--lu-success-ink);
  border-color:transparent;
}
/* Une fois le clavier reconnu, la barre a fait son travail : elle se fait
   discrète et rend sa place au jeu, sans jamais disparaître (on doit pouvoir
   changer d'entrée MIDI en cours de partie). */
#midiBar.pret{
  opacity:.7; padding:var(--lu-s1) var(--lu-s2);
  box-shadow:none; align-self:center; max-width:fit-content;
}
#midiBar.pret:hover, #midiBar.pret:focus-within{ opacity:1; }
#midiBar.pret #midiBtn{ display:none; }
#midiBar.pret .lu-input{ min-height:36px; font-size:var(--lu-fz-1); }

/*---------------------------------------------------------
  Aire de jeu
---------------------------------------------------------*/
#scene{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--lu-s3);
  text-align:center;
}
#consigne{ display:flex; flex-direction:column; align-items:center; gap:var(--lu-s1); }
#consigne .lbl{
  font-size:clamp(13px,1.9vh,17px);
  font-weight:700; color:var(--lu-muted);
  letter-spacing:.04em;
}

/* L'accord demandé — pièce maîtresse : Fredoka One + halo néon SORBET (§13 n1).
   Le halo prend la teinte de l'état de la manche (--ar-etat). */
#accordDemande{
  font-family:var(--lu-font-title); font-weight:400;
  font-size:clamp(56px, 15vh, 148px);
  line-height:1.02;
  color:var(--ar-etat);
  text-shadow:
     0 3px 0 var(--lu-surface),
     0 0 26px color-mix(in srgb, var(--ar-etat) 55%, transparent),
     0 0 60px color-mix(in srgb, var(--ar-etat) 28%, transparent);
  transition:color .25s ease, text-shadow .25s ease;
  min-height:1.02em;
}
/* Arrivée d'un nouvel accord : petit « pop » (§13 n2 juice). */
#accordDemande.pop{ animation:arPop .34s cubic-bezier(.2,1.5,.4,1); }
@keyframes arPop{ from{ transform:scale(.72); opacity:.2 } to{ transform:none; opacity:1 } }
/* Accord juste : pulsation dorée. */
#accordDemande.gagne{ animation:arGagne .6s ease; }
@keyframes arGagne{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.14) }
  100%{ transform:scale(1) }
}
/* Temps écoulé : on secoue doucement — jamais de rouge (charte §5). */
#accordDemande.rate{ animation:arRate .45s ease; }
@keyframes arRate{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-9px) }
  75%{ transform:translateX(9px) }
}

/* Attente du clavier MIDI : Clavi respire doucement, la jauge et l'accord
   s'effacent — rien ne doit laisser croire qu'un chrono tourne déjà. */
#attenteClavier{ display:none; }
#attenteClavier .lu-clavi{ width:clamp(84px,16vh,132px); height:clamp(84px,16vh,132px); animation:arRespire 2.4s ease-in-out infinite; }
@keyframes arRespire{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
body.attente-midi #attenteClavier{ display:block; }
body.attente-midi #accordDemande{ display:none; }
body.attente-midi #jaugeWrap,
body.attente-midi #notesJouees{ visibility:hidden; }

/*---------------------------------------------------------
  Jauge de temps — pilule SORBET qui se vide
---------------------------------------------------------*/
#jaugeWrap{
  width:min(560px, 88vw);
  display:flex; flex-direction:column; align-items:center; gap:var(--lu-s1);
}
#jauge{
  width:100%; height:16px;
  background:var(--lu-surface);
  border:1px solid var(--lu-border); border-radius:var(--lu-r-pill);
  box-shadow:var(--lu-gloss);
  overflow:hidden;
}
#jaugeFill{
  height:100%; width:100%;
  border-radius:var(--lu-r-pill);
  background:linear-gradient(90deg,
      color-mix(in srgb, var(--ar-etat) 45%, var(--lu-surface)),
      var(--ar-etat));
  box-shadow:0 0 14px color-mix(in srgb, var(--ar-etat) 45%, transparent);
  transform-origin:left center;
  transition:background .25s ease;
}
#jaugeTxt{
  font-size:clamp(12px,1.7vh,15px); font-weight:800;
  color:var(--lu-muted); letter-spacing:.03em;
}

/*---------------------------------------------------------
  Les 3 notes jouées
---------------------------------------------------------*/
#notesJouees{ display:flex; gap:var(--lu-s2); justify-content:center; flex-wrap:wrap; }
.noteChip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:76px; min-height:44px; padding:6px 14px; box-sizing:border-box;
  border:1px solid var(--lu-border); border-radius:var(--lu-r-chip);
  background:var(--lu-surface); color:var(--lu-muted);
  font-family:var(--lu-font-title); font-weight:400;
  font-size:clamp(16px,2.6vh,24px);
  box-shadow:var(--lu-gloss);
  transition:background var(--lu-t-btn), color var(--lu-t-btn), transform var(--lu-t-btn);
}
/* Note qui appartient bien à l'accord demandé */
.noteChip.bonne{
  background:var(--lu-success); color:var(--lu-success-ink);
  border-color:transparent; transform:translateY(-2px);
}
/* Note hors accord : pêche « on réessaie », jamais rouge (§5) */
.noteChip.hors{
  background:var(--lu-almost); color:var(--lu-almost-ink);
  border-color:transparent;
}

#message{
  min-height:1.4em; font-weight:700;
  font-size:clamp(13px,1.9vh,17px);
  color:var(--lu-ink);
}

/*---------------------------------------------------------
  KPI du bas
---------------------------------------------------------*/
#kpis{
  flex:0 0 auto;
  display:flex; gap:var(--lu-s2); justify-content:center; flex-wrap:wrap;
}
#kpis .lu-chip{ min-height:36px; gap:var(--lu-s2); }
#kpis .kl{ color:var(--lu-muted); font-weight:700; }
#kpis .kv{ color:var(--lu-ink); font-weight:900; }

#pied{
  flex:0 0 auto; text-align:center;
  font-size:11px; line-height:1.5; color:var(--lu-muted);
}
#pied a{ color:var(--lu-muted); text-decoration:underline; }
#pied .cop{ display:block; margin-top:3px; opacity:.75; }

/*---------------------------------------------------------
  COMPTE À REBOURS PLEIN ÉCRAN (enchaînement automatique)
---------------------------------------------------------*/
#rebours{
  position:fixed; inset:0; z-index:9000;
  display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--lu-s3);
  background:color-mix(in srgb, var(--lu-bg) 78%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
#rebours.on{ display:flex; }
#reboursNum{
  font-family:var(--lu-font-title); font-weight:400;
  font-size:clamp(120px, 34vh, 300px); line-height:1;
  color:var(--lu-primary-strong);
  text-shadow:
     0 4px 0 var(--lu-surface),
     0 0 40px color-mix(in srgb, var(--lu-primary-strong) 50%, transparent),
     0 0 90px color-mix(in srgb, var(--lu-primary-strong) 25%, transparent);
}
/* Un battement par seconde, calé sur le décompte. */
#reboursNum.tic{ animation:arTic .92s ease-out; }
@keyframes arTic{
  0%{ transform:scale(1.55); opacity:0 }
  22%{ transform:scale(1); opacity:1 }
  100%{ transform:scale(.9); opacity:.55 }
}
#reboursTxt{
  font-family:var(--lu-font-ui); font-weight:800;
  font-size:clamp(15px,2.4vh,21px);
  color:var(--lu-muted); letter-spacing:.06em;
}

/*---------------------------------------------------------
  Extras d'écriteaux (le gabarit vient de .lu-card)
---------------------------------------------------------*/
.bigEm{ font-size:48px; line-height:1; }
.setRows{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.setRow{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--lu-s3); padding:9px 4px;
  border-bottom:1px solid var(--lu-border);
  font-weight:800; font-size:var(--lu-fz-2); color:var(--lu-ink);
}
.setTg{
  min-width:72px; min-height:44px; box-sizing:border-box;
  padding:6px 12px; cursor:pointer;
  border:1px solid var(--lu-border); border-radius:var(--lu-r-pill);
  font-weight:900; font-size:var(--lu-fz-1);
  box-shadow:var(--lu-gloss);
  transition:background var(--lu-t-btn);
}
.setTg.on{ background:var(--lu-success); color:var(--lu-success-ink); border-color:transparent; }
.setTg.off{ background:var(--lu-surface); color:var(--lu-muted); }
.colStack{ flex-direction:column; }
.colStack .lu-btn{ width:100%; }

.tutoSlide{ display:none; flex-direction:column; gap:var(--lu-s2); align-items:center; }
.tutoSlide.active{ display:flex; }
.tutoDots{ display:flex; gap:7px; justify-content:center; }

#finNote{
  font-family:var(--lu-font-title); font-weight:400;
  font-size:clamp(38px,9vh,64px); line-height:1.1;
  color:var(--lu-success-ink);
  text-shadow:0 0 26px color-mix(in srgb, var(--lu-success) 70%, transparent);
}
.lu-eval-invite a{ color:var(--lu-primary-strong); font-weight:800; text-decoration:underline; }

/*---------------------------------------------------------
  Orientation (§13 n9) — en paysage court, on dégraisse
---------------------------------------------------------*/
@media (orientation:landscape) and (max-height:560px){
  #pied{ display:none; }
  #consigne .lbl{ font-size:12px; }
  #accordDemande{ font-size:clamp(44px, 20vh, 110px); }
  #midiBar{ padding:5px var(--lu-s2); }
  #notesJouees .noteChip{ min-height:38px; min-width:66px; }
}
/* Écran vraiment court : la barre MIDI se replie une fois le clavier reconnu. */
@media (max-height:430px){
  #midiBar.pret{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  #accordDemande, #reboursNum{ animation:none !important; }
  #jaugeFill{ transition:none; }
}

/* Mode dégradé (§13.25) : on coupe les halos coûteux, jamais le game play. */
body.lu-degrade #accordDemande,
body.lu-degrade #reboursNum{ text-shadow:0 3px 0 var(--lu-surface); }
body.lu-degrade #jaugeFill{ box-shadow:none; }
body.lu-degrade #rebours{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--lu-bg); }