/* Fredoka One embarquée (offline) — titres §3 */
@font-face{font-family:'Fredoka One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fredoka-one.woff2') format('woff2');}
/* ============================================================
   LUSIQUE — CHROME (charte graphique v1 « SORBET »)
   SOURCE UNIQUE du chrome (jingle/tuto/HUD/options/écriteaux).
   NE PAS recopier les tokens dans un jeu — re-teinter via --lu-accent.
   Frontière stricte : aucune règle sur l'aire de jeu / le canvas.
   Réf : journal « CHARTE GRAPHIQUE LUSIQUE (v1) » §1-§11.
   v: 20260707b (creme + Fredoka embarquee)
============================================================ */

:root{
  /* — Couleurs (§2) — */
  --lu-bg:#eef6ff;
  --lu-surface:#fbf4ec;   /* creme (plus de blanc pur, regle 07/07) */
  --lu-grad-dream:linear-gradient(170deg,#d9f0ff,#ffe7d6 55%,#f6ddff);
  --lu-ink:#55506e;
  --lu-muted:#8a86a3;
  --lu-border:rgba(85,80,110,.14);
  --lu-primary:#bfe0f5;
  --lu-primary-ink:#2f4f6b;
  --lu-primary-strong:#5db4ea;
  --lu-brand:#ffd278;
  --lu-success:#aee6cb;     --lu-success-ink:#2b6a52;
  --lu-almost:#ffc3ad;      --lu-almost-ink:#8a4029;

  /* LA seule variable par jeu (§7). Défaut = pêche douce. */
  --lu-accent:#ffd9a8;

  /* — Typo (§3) — */
  --lu-font-title:'Fredoka One', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --lu-font-ui:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --lu-fz-1:13px; --lu-fz-2:15px; --lu-fz-3:18px; --lu-fz-4:22px; --lu-fz-5:28px; --lu-fz-6:40px;

  /* — Espacement base 4 (§4) — */
  --lu-s1:4px; --lu-s2:8px; --lu-s3:12px; --lu-s4:16px; --lu-s5:24px; --lu-s6:32px;

  /* — Rayons : zéro angle pointu (§4) — */
  --lu-r-btn:999px; --lu-r-pill:999px; --lu-r-card:32px; --lu-r-chip:16px;

  /* — Ombres « guimauve » (§4) — */
  --lu-shadow:0 18px 40px rgba(150,110,130,.16), 0 6px 14px rgba(150,110,130,.10);
  --lu-gloss:inset 0 2px 4px rgba(255,255,255,.9), inset 0 -6px 12px rgba(180,140,160,.12);

  /* — Mouvement (§6) — */
  --lu-t-btn:180ms ease-out;
  --lu-t-overlay:200ms ease-out;

  /* — Mascotte Clavi (§5) : touches = couleur mains/pieds, jamais noir — */
  --lu-clavi-case:#eaf4ff;
  --lu-clavi-lite:#bfe0f5;
  --lu-clavi-dk:#8fc3e6;
  --lu-key:#fbf3e6;   /* touches Clavi = creme, jamais blanc pur */
}

/* ============================================================
   BOUTONS (§5) — pilule, gonflé/glossy, cible ≥44px
============================================================ */
.lu-btn{
  appearance:none; cursor:pointer;
  font-family:var(--lu-font-ui); font-weight:800; font-size:var(--lu-fz-2);
  min-height:44px; padding:10px 20px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--lu-s2);
  line-height:1; text-align:center; white-space:nowrap;
  border:1px solid var(--lu-border); border-radius:var(--lu-r-btn);
  background:var(--lu-surface); color:var(--lu-ink);
  box-shadow:var(--lu-gloss);
  transition:transform var(--lu-t-btn), background var(--lu-t-btn), box-shadow var(--lu-t-btn);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.lu-btn:hover{ transform:translateY(-1px); }
.lu-btn:active{ transform:translateY(1px) scale(.98); }
.lu-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }

/* Action primaire */
.lu-btn--primary{
  background:var(--lu-primary); color:var(--lu-primary-ink);
  border-color:transparent;
  box-shadow:var(--lu-gloss), 0 6px 16px rgba(93,180,234,.28);
}
/* Action douce « on réessaie » (§5, jamais rouge) */
.lu-btn--almost{ background:var(--lu-almost); color:var(--lu-almost-ink); border-color:transparent; }
/* Action succès */
.lu-btn--success{ background:var(--lu-success); color:var(--lu-success-ink); border-color:transparent; }
/* Bouton discret (texte) */
.lu-btn--ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--lu-muted); }

/* Bouton-icône carré 44×44 (§5) */
.lu-iconbtn{
  appearance:none; cursor:pointer;
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  font-size:var(--lu-fz-3);
  border:1px solid var(--lu-border); border-radius:var(--lu-r-chip);
  background:var(--lu-surface); color:var(--lu-ink);
  box-shadow:var(--lu-gloss);
  transition:transform var(--lu-t-btn), background var(--lu-t-btn);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.lu-iconbtn:active{ transform:scale(.94); }

/* ============================================================
   PUCES / CHAMPS (§4/§5)
============================================================ */
.lu-chip{
  display:inline-flex; align-items:center; gap:var(--lu-s1);
  min-height:32px; padding:5px 12px;
  border:1px solid var(--lu-border); border-radius:var(--lu-r-chip);
  background:var(--lu-surface); color:var(--lu-ink);
  font-family:var(--lu-font-ui); font-weight:700; font-size:var(--lu-fz-1);
  white-space:nowrap;
}
.lu-chip--active{
  background:color-mix(in srgb, var(--lu-accent) 55%, var(--lu-surface));
  border-color:color-mix(in srgb, var(--lu-accent) 60%, transparent);
  color:var(--lu-ink);
}
.lu-input{
  width:100%; min-height:46px; padding:12px 16px;
  border:1px solid var(--lu-border); border-radius:var(--lu-r-chip);
  background:var(--lu-surface); color:var(--lu-ink);
  font-family:var(--lu-font-ui); font-size:var(--lu-fz-2); outline:none;
}
.lu-input:focus{ border-color:var(--lu-primary-strong); box-shadow:0 0 0 4px color-mix(in srgb, var(--lu-primary-strong) 22%, transparent); }

/* ============================================================
   HUD (§5) — tout centré sur une ligne commune
============================================================ */
.lu-hud{
  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);
}

/* ============================================================
   ÉCRITEAUX & OPTIONS (§5) — voile + carte « dream » + Clavi
============================================================ */
.lu-overlay{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + var(--lu-s4)) var(--lu-s4)
          calc(env(safe-area-inset-bottom,0px) + var(--lu-s4));
  background:rgba(85,80,110,.34);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:lu-fade var(--lu-t-overlay);
}
.lu-overlay.is-open, .lu-overlay.show, .lu-overlay.visible{ display:flex; }
@keyframes lu-fade{ from{ opacity:0 } to{ opacity:1 } }

.lu-card{
  width:min(420px,100%); max-height:92dvh; overflow:auto;
  box-sizing:border-box; text-align:center;
  padding:var(--lu-s5) var(--lu-s5) var(--lu-s5);
  background:var(--lu-grad-dream);
  border:1px solid var(--lu-border); border-radius:var(--lu-r-card);
  box-shadow:var(--lu-shadow);
  display:flex; flex-direction:column; gap:var(--lu-s3);
  animation:lu-pop var(--lu-t-overlay);
}
@keyframes lu-pop{ from{ transform:translateY(10px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.lu-card__title{ font-family:var(--lu-font-title); font-weight:400; font-size:var(--lu-fz-4); color:var(--lu-ink); margin:0; }
.lu-card__text{ font-family:var(--lu-font-ui); font-size:var(--lu-fz-2); line-height:1.5; color:var(--lu-ink); margin:0; }
.lu-card__text b{ color:var(--lu-ink); }
.lu-card__actions{ display:flex; gap:var(--lu-s2); justify-content:center; flex-wrap:wrap; margin-top:var(--lu-s1); }
.lu-card__actions .lu-btn{ flex:1 1 auto; }

/* ============================================================
   MASCOTTE CLAVI + BULLE (§5) — clavier arrondi, sans visage
============================================================ */
.lu-clavi-wrap{ display:flex; flex-direction:column; align-items:center; gap:var(--lu-s2); }
.lu-clavi{ width:104px; height:104px; display:block; filter:drop-shadow(0 8px 12px rgba(150,110,130,.18)); }
.lu-clavi .case{ fill:color-mix(in srgb, var(--lu-accent) 30%, var(--lu-clavi-case)); }
.lu-clavi .lite{ fill:var(--lu-clavi-lite); }
.lu-clavi .limb{ stroke:var(--lu-clavi-lite); }
/* touches sombres = couleur mains/pieds, JAMAIS noir (§5) */
.lu-clavi .dk{ fill:var(--lu-clavi-dk); }
.lu-clavi .whitekey{ fill:var(--lu-key); }
.lu-clavi .spark{ fill:var(--lu-brand); animation:lu-spark 1.6s ease-in-out infinite; transform-origin:center; }
.lu-clavi .spark2{ animation-delay:.5s; }
@keyframes lu-spark{ 0%,100%{ opacity:.35; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }

.lu-bubble{
  position:relative; max-width:300px; margin:0 auto;
  background:var(--lu-surface); color:var(--lu-ink);
  font-family:var(--lu-font-ui); font-weight:700; font-size:var(--lu-fz-2); line-height:1.4;
  padding:var(--lu-s3) var(--lu-s4); border-radius:var(--lu-r-card);
  border:1px solid var(--lu-border); box-shadow:var(--lu-shadow);
}
.lu-bubble::after{
  content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%) rotate(45deg);
  width:18px; height:18px; background:var(--lu-surface);
  border-right:1px solid var(--lu-border); border-bottom:1px solid var(--lu-border); border-radius:0 0 6px 0;
}

/* ============================================================
   TUTO (§5) — même patron que l'écriteau .lu-card
============================================================ */
.lu-tuto-dot{ width:9px; height:9px; border-radius:50%; background:var(--lu-border); }
.lu-tuto-dot.active{ background:var(--lu-primary-strong); }

@media (prefers-reduced-motion:reduce){
  .lu-overlay, .lu-card, .lu-clavi .spark{ animation:none; }
  .lu-btn{ transition:none; }
}

/* ============================================================
   ANTI-FLASH démarrage (§13.22) — cache opaque dès le 1er pixel,
   JUSTE SOUS l'overlay du jingle (z 99999) qui démarre en opacity:0
   et fait un fondu → sinon on voit fugitivement la page (surtout Android).
   Retiré par un script inline une fois l'overlay opaque.
   (Couleur = fond du jingle actuel ; à passer en pastel quand le jingle le sera.)
============================================================ */
#luBoot{ position:fixed; inset:0; z-index:99998; background:linear-gradient(170deg,#d9f0ff,#ffe7d6 55%,#f6ddff); transition:opacity .3s ease; }
#luBoot.gone{ opacity:0; pointer-events:none; }

/* ============================================================
   HUD — BOUTONS-ICÔNES UNIFORMES (charte §5, ajout 2026-07-08)
   Tous les boutons de contrôle du HUD (pause, réglages ⚙, recommencer ↻,
   plein écran ⛶, etc.) ont la MÊME TAILLE et la MÊME FORME : carré 44×44,
   rayon chip. Couvre les nommages hérités (.iconbtn / .iconBtn) et neutralise
   un `.btn` concurrent grâce à la spécificité `.btn.iconbtn`.
   ⚙ RÈGLE : le bouton Options / Réglages porte TOUJOURS la ROUE CRANTÉE ⚙.
============================================================ */
.lu-iconbtn, .iconbtn, .iconBtn,
.btn.iconbtn, .btn.iconBtn{
  width:44px; height:44px; min-height:44px; padding:0;
  border-radius:var(--lu-r-chip);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; line-height:1;
}