/* ============================================================
   KBMB – UX Widget Candle (minimal scene)
   Objectif :
   - Pas de rectangle / pas de “corps de bougie” visible
   - Scène unique : demi-coquille + flamme
   - Le temps = hauteur de flamme (pilotée plus tard par JS)
   - Quand la bougie est éteinte : rien ne doit rester visible
   ============================================================ */

/* --------- 1) Neutraliser l'ancien “card / rectangle” --------- */

.kb-candle-widget,
.kb-candle-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kb-candle-inner,
.kb-candle-meta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* --------- 2) Scène : zone visuelle dédiée --------- */

.kb-candle-figure,
.kb-candle-visual {
  position: relative;
  width: 220px;
  height: 240px;
  margin: 0 auto 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* On retire les anciens blocs “cire / glow / corps” */
.kb-candle-body,
.kb-candle-wax,
.kb-candle-glow {
  display: none !important;
}

/* --------- 3) Coquille = toujours visible (même OFF) --------- */

/* Coquille nacrée (toujours présente) */
.kb-candle-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  /* Forme demi-coquille (moins “bol”, plus “St‑Jacques”) */
  width: 184px;
  height: 86px;
  border-radius: 20px 20px 140px 140px;

  opacity: 1;
  pointer-events: none;

  /* Nacre + stries très douces */
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.98), rgba(255,255,255,0.72) 42%, rgba(255,255,255,0.20) 74%, rgba(255,255,255,0.06) 100%),
    radial-gradient(circle at 16% 90%, rgba(191,219,254,0.20), transparent 62%),
    radial-gradient(circle at 86% 88%, rgba(245,215,120,0.16), transparent 65%),
    repeating-conic-gradient(from 180deg at 50% 92%, rgba(255,255,255,0.16) 0 6deg, rgba(255,255,255,0) 6deg 14deg);

  /* On garde les stries dans la forme, sans “bloc rectangle” */
  -webkit-mask: radial-gradient(120% 95% at 50% 110%, #000 58%, transparent 62%);
          mask: radial-gradient(120% 95% at 50% 110%, #000 58%, transparent 62%);

  border: 1px solid rgba(255,255,255,0.62);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.60);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* La flamme est invisible par défaut (OFF) */
.kb-candle-flame {
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* --------- 4) ON = flamme visible + intensité de la coquille --------- */

/* ON : la flamme apparaît (fallbacks, car la classe exacte peut varier) */
.kb-candle--burning .kb-candle-flame,
.is-burning .kb-candle-flame,
.is-active .kb-candle-flame,
.has-flame .kb-candle-flame,
[data-status="burning"] .kb-candle-flame,
[data-state="burning"] .kb-candle-flame,
[data-burning="1"] .kb-candle-flame {
  opacity: 1;
}

/* ON : coquille un peu plus “vivante” (sans disparaître OFF) */
.kb-candle--burning .kb-candle-visual::after {
  box-shadow:
    0 22px 55px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.68);
}

/* --------- 5) Positionner la flamme “au sol” --------- */

.kb-candle-flame {
  position: absolute;
  left: 50%;
  /* La flamme doit “reposer” sur la coquille, pas flotter en haut */
  bottom: 18px;
  transform: translateX(-50%);
  width: 26px;
  height: 64px;
  z-index: 3;
}

/* Variable de hauteur (future) */
.kb-candle-widget,
.kb-candle-card,
.kb-candle-slot {
  /* OFF : flamme éteinte (0). ON : sera piloté par JS de 1 -> 0 */
  --kb-flame-scale: 0;
}

/* Par défaut, quand ça brûle, flamme au maximum (JS affinera en temps réel) */
.kb-candle--burning,
.is-burning,
.is-active,
.has-flame,
[data-status="burning"],
[data-state="burning"],
[data-burning="1"] {
  --kb-flame-scale: 1;
}

.kb-candle-flame-core,
.kb-candle-flame-inner {
  transform: scaleY(var(--kb-flame-scale)) !important;
  transform-origin: 50% 90% !important;
}

/* --------- 6) Textes & boutons : discret --------- */

.kb-candle-timer,
.kb-candle-credits-progress,
.kb-candle-slots-hint {
  opacity: 0.82;
}

.kb-candle-variant-btn,
.kb-candle-ignite,
.kb-candle-btn {
  border-radius: 999px !important;
}

/* --------- 7) Responsive --------- */

@media (max-width: 640px) {
  .kb-candle-figure,
  .kb-candle-visual {
    width: 190px;
    height: 220px;
  }

  .kb-candle-figure::after,
  .kb-candle-visual::after {
    width: 160px;
    height: 76px;
  }

  .kb-candle-flame {
    bottom: 16px;
  }
}