@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap');

#bal-papillons-wrapper{
  position:relative; width:100%; height:100%; min-height:520px;
  display:flex; flex-direction:column;
  background:linear-gradient(135deg,#e0c3fc 0%,#8ec5fc 100%);
  font-family:'Poppins',sans-serif; color:#4a3f6b;
  border-radius:20px; overflow:hidden;
  box-shadow:0 10px 40px rgba(80,60,140,.18);
  -webkit-user-select:none; user-select:none;
}

/* --- HUD --- */
#bal-papillons-wrapper .bp-hud{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 16px; background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(80,60,140,.08); z-index:5;
}
#bal-papillons-wrapper .bp-logo{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.25rem; color:#7b5be0; }
#bal-papillons-wrapper .bp-hud-stats{ display:flex; gap:10px; }
#bal-papillons-wrapper .bp-stat{
  background:#fff; border-radius:16px; padding:4px 14px; text-align:center;
  box-shadow:0 3px 10px rgba(80,60,140,.10); min-width:74px;
}
#bal-papillons-wrapper .bp-stat-label{ display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:#9a8fc0; font-weight:600; }
#bal-papillons-wrapper .bp-stat-value{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem; color:#5b4bd0; }
#bal-papillons-wrapper .bp-hud-actions{ display:flex; gap:8px; }
#bal-papillons-wrapper .bp-icon-btn{
  width:42px; height:42px; border:none; border-radius:14px; background:#fff; font-size:1.15rem; cursor:pointer;
  box-shadow:0 3px 10px rgba(80,60,140,.12); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#bal-papillons-wrapper .bp-icon-btn:hover{ transform:translateY(-2px); background:#f4efff; box-shadow:0 6px 16px rgba(80,60,140,.18); }
#bal-papillons-wrapper .bp-icon-btn:active{ transform:scale(.94); }

/* --- Scène & canvas --- */
#bal-papillons-wrapper #bp-stage{ position:relative; flex:1; overflow:hidden; }
#bal-papillons-wrapper #bp-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:pointer; touch-action:manipulation; }

/* --- Overlays / menus --- */
#bal-papillons-wrapper .bp-overlay{
  position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  padding:20px; overflow:auto; background:rgba(120,90,220,.18); backdrop-filter:blur(4px);
}
#bal-papillons-wrapper .is-hidden{ display:none; }
#bal-papillons-wrapper .bp-card{
  background:rgba(255,255,255,.92); border-radius:20px; padding:28px 32px;
  max-width:470px; width:100%; text-align:center; box-shadow:0 16px 50px rgba(80,60,140,.25);
}
#bal-papillons-wrapper .bp-title{ font-family:'Fredoka',sans-serif; font-size:2.2rem; font-weight:700; color:#7b5be0; margin:0 0 4px; }
#bal-papillons-wrapper .bp-title-sm{ font-family:'Fredoka',sans-serif; font-size:1.6rem; font-weight:600; color:#7b5be0; margin:0 0 8px; }
#bal-papillons-wrapper .bp-subtitle{ margin:0 0 12px; color:#9a8fc0; font-weight:500; }
#bal-papillons-wrapper .bp-text{ margin:0 0 18px; font-size:.92rem; color:#6b6190; }

/* --- Sélecteur de difficulté --- */
#bal-papillons-wrapper .bp-difficulty{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
#bal-papillons-wrapper .bp-chip{
  border:2px solid transparent; background:#efeaff; color:#6a5bd0; border-radius:999px; padding:8px 16px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.85rem; cursor:pointer; transition:all .15s ease;
}
#bal-papillons-wrapper .bp-chip:hover{ transform:translateY(-2px); }
#bal-papillons-wrapper .bp-chip.is-selected{ background:#7b5be0; color:#fff; box-shadow:0 6px 16px rgba(123,91,224,.35); }

/* --- Boutons Soft UI --- */
#bal-papillons-wrapper .bp-btn{
  display:inline-block; border:none; border-radius:16px; padding:12px 26px; cursor:pointer;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#bal-papillons-wrapper .bp-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
#bal-papillons-wrapper .bp-btn:active{ transform:scale(.96); }
#bal-papillons-wrapper .bp-btn-primary{ background:linear-gradient(135deg,#ffa6c1,#c39bff); color:#fff; box-shadow:0 8px 20px rgba(195,155,255,.45); }
#bal-papillons-wrapper .bp-btn-secondary{ background:#8ec5fc; color:#fff; box-shadow:0 8px 20px rgba(142,197,252,.45); }
#bal-papillons-wrapper .bp-btn-ghost{ background:transparent; color:#7b5be0; border:2px solid #d9ccff; box-shadow:none; }
#bal-papillons-wrapper .bp-col{ display:flex; flex-direction:column; gap:10px; }

/* --- Résultats --- */
#bal-papillons-wrapper .bp-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
#bal-papillons-wrapper .bp-result{ background:#f6f3ff; border-radius:16px; padding:10px 6px; }
#bal-papillons-wrapper .bp-result span{ display:block; font-size:.68rem; color:#9a8fc0; font-weight:600; text-transform:uppercase; }
#bal-papillons-wrapper .bp-result strong{ font-family:'Fredoka',sans-serif; font-size:1.15rem; color:#5b4bd0; }

/* --- Responsive --- */
@media (max-width:640px){
  #bal-papillons-wrapper .bp-hud{ padding:8px 10px; }
  #bal-papillons-wrapper .bp-stat{ min-width:60px; padding:4px 10px; }
  #bal-papillons-wrapper .bp-card{ padding:20px; }
  #bal-papillons-wrapper .bp-results{ grid-template-columns:repeat(2,1fr); }
}