/* ============================================================
   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-ux-container .kbmb-widget.kbmb-widget--candle,
.kb-ux-container .kbmb-widget.kbmb-widget--candle.kbmb-glass,
.kb-ux-container .kbmb-widget--candle .kb-candle-widget-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: 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: 320px;
  height: 320px;
  margin: 0 auto 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Halo global réduit pour laisser la flamme respirer. */
.kb-candle-figure::before {
  width: 160px !important;
  height: 160px !important;
  filter: blur(22px) !important;
  opacity: 0 !important;
  transition: opacity .22s ease;
}

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

/* --------- 3) Scène visuelle pilotée par état/type --------- */

/* La barre blanche a été supprimée: rendu plus naturel. */
.kb-candle-visual::before {
  display: none !important;
}

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

  /* Forme demi-coquille St-Jacques */
  width: 280px;
  height: 136px;
  border-radius: 30px 30px 150px 150px;

  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 3;

  /* Nacre + stries */
  background:
    radial-gradient(140% 92% at 50% 8%, rgba(255,255,255,0.96), rgba(255,255,255,0.74) 44%, rgba(226,232,240,0.35) 68%, rgba(226,232,240,0.10) 100%),
    radial-gradient(circle at 16% 92%, rgba(191,219,254,0.30), transparent 60%),
    radial-gradient(circle at 84% 92%, rgba(245,215,120,0.22), transparent 62%),
    repeating-conic-gradient(from 183deg at 50% 95%, rgba(255,255,255,0.20) 0 5deg, rgba(255,255,255,0) 5deg 13deg);

  -webkit-mask: radial-gradient(120% 98% at 50% 112%, #000 60%, transparent 64%);
          mask: radial-gradient(120% 98% at 50% 112%, #000 60%, transparent 64%);

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

  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;
}

/* Lumière active uniquement: coquille + halo visibles. */
.kb-candle-card[data-candle-type="neutral"].kb-candle--burning .kb-candle-visual::after,
.kb-candle-widget[data-candle-type="neutral"].kb-candle--burning .kb-candle-visual::after {
  opacity: 1;
}

.kb-candle-card[data-candle-type="neutral"].kb-candle--burning .kb-candle-figure::before,
.kb-candle-widget[data-candle-type="neutral"].kb-candle--burning .kb-candle-figure::before {
  opacity: 0.66 !important;
}

.kb-candle-card[data-candle-type="neutral"].kb-candle--burning .kb-candle-visual::after,
.kb-candle-widget[data-candle-type="neutral"].kb-candle--burning .kb-candle-visual::after {
  box-shadow:
    0 20px 48px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.68);
}

.kb-candle-card[data-candle-type="neutral"].kb-candle--burning .kb-candle-flame,
.kb-candle-widget[data-candle-type="neutral"].kb-candle--burning .kb-candle-flame {
  bottom: 40px !important;
  width: 30px;
  height: 98px;
  animation: kb-candle-flame-sway-neutral 0.88s ease-in-out infinite;
}

@keyframes kb-candle-flame-sway-neutral {
  0% {
    transform: translateX(-50%) rotate(-7deg) skewX(-3deg);
  }
  28% {
    transform: translateX(calc(-50% + 3px)) rotate(6deg) skewX(3deg);
  }
  58% {
    transform: translateX(calc(-50% - 3px)) rotate(-6deg) skewX(-3deg);
  }
  100% {
    transform: translateX(-50%) rotate(-7deg) skewX(-3deg);
  }
}

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

.kb-candle-flame {
  position: absolute;
  left: 50%;
  /* Neutralise le top défini dans le CSS global (sinon la flamme flotte trop haut). */
  top: auto !important;
  /* Ancrage sur la coquille pour matérialiser la durée. */
  bottom: 44px !important;
  transform: translateX(-50%);
  width: 34px;
  height: 120px;
  z-index: 2;
}

/* 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 {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 56% 44% 52% 48% / 76% 78% 22% 24%;
  clip-path: polygon(50% 0%, 65% 10%, 78% 28%, 83% 47%, 78% 66%, 67% 82%, 50% 100%, 33% 82%, 22% 66%, 17% 47%, 22% 28%, 35% 10%);
  background:
    radial-gradient(42% 48% at 50% 24%, rgba(255,255,255,0.96), rgba(255,250,225,0.90) 38%, rgba(255,233,163,0.76) 62%, rgba(255,210,120,0.36) 84%, rgba(255,210,120,0) 100%),
    radial-gradient(85% 95% at 50% 72%, rgba(255,198,104,0.62), rgba(255,170,78,0.28) 62%, rgba(255,170,78,0) 100%),
    radial-gradient(85% 125% at 50% 118%, rgba(120,175,255,0.30), rgba(120,175,255,0) 70%);
  box-shadow:
    0 0 14px rgba(255,199,110,0.55),
    0 0 34px rgba(98,163,255,0.28);
  transform: scaleY(var(--kb-flame-scale)) !important;
  transform-origin: 50% 100% !important;
  animation: kb-candle-flame-pulse-strong 0.55s ease-in-out infinite,
             kb-candle-flame-morph 0.48s ease-in-out infinite;
}

.kb-candle-flame-core::before,
.kb-candle-flame-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: 40%;
  height: 52%;
  border-radius: 58% 42% 60% 40% / 72% 70% 30% 28%;
  background: radial-gradient(75% 85% at 50% 30%, rgba(255,255,255,0.95), rgba(255,245,205,0.82) 56%, rgba(255,245,205,0) 100%);
  filter: blur(0.4px);
  opacity: 0.9;
  pointer-events: none;
}

.kb-candle-flame-core::after,
.kb-candle-flame-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 68%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(55% 65% at 50% 50%, rgba(126,176,255,0.45), rgba(126,176,255,0) 100%);
  filter: blur(2px);
  opacity: 0.6;
  pointer-events: none;
}

@keyframes kb-candle-flame-pulse-strong {
  0% {
    opacity: 0.85;
    filter: brightness(0.92) saturate(1.05);
  }
  35% {
    opacity: 1;
    filter: brightness(1.16) saturate(1.22);
  }
  65% {
    opacity: 0.82;
    filter: brightness(0.90) saturate(0.98);
  }
  100% {
    opacity: 0.9;
    filter: brightness(1.02) saturate(1.10);
  }
}

@keyframes kb-candle-flame-morph {
  0% {
    border-radius: 56% 44% 52% 48% / 76% 78% 22% 24%;
  }
  50% {
    border-radius: 48% 52% 46% 54% / 80% 72% 28% 20%;
  }
  100% {
    border-radius: 56% 44% 52% 48% / 76% 78% 22% 24%;
  }
}

/* --------- 6) Variante religieuse (Direction B liturgique) --------- */

.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::before,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::before {
  width: 210px !important;
  height: 210px !important;
  opacity: 0.78 !important;
  filter: blur(26px) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,223,138,0.58), transparent 60%),
    radial-gradient(circle at 50% 78%, rgba(255,178,92,0.30), transparent 76%) !important;
}

/* Cloche en verre. */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::before,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::before {
  display: block !important;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 146px;
  height: 220px;
  border-radius: 74px 74px 34px 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 34%, rgba(255,232,192,0.12) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(255,199,113,0.20), rgba(255,199,113,0) 72%);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 8px 0 16px rgba(255,255,255,0.22),
    inset -6px 0 12px rgba(255,255,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 14px 28px rgba(15,23,42,0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0.96;
  pointer-events: none;
  z-index: 4;
}

/* Socle de la cloche (fond bas). */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::after,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 144px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(85% 120% at 50% 32%, rgba(255,244,220,0.72), rgba(244,225,188,0.34) 62%, rgba(244,225,188,0.06) 100%);
  border: 1px solid rgba(247,229,190,0.40);
  box-shadow:
    0 5px 10px rgba(15,23,42,0.09),
    inset 0 1px 0 rgba(255,255,255,0.54);
  z-index: 12;
  pointer-events: none;
}

/* Reflet vertical de la cloche. */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::after,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::after {
  content: "";
  position: absolute;
  left: calc(50% - 22px);
  bottom: 56px;
  width: 18px;
  height: 148px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.10));
  filter: blur(1px);
  opacity: 0.56;
  -webkit-mask: none;
          mask: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 5;
  pointer-events: none;
}

/* Bougie interne (fixe) dans la cloche. */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-body,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-body {
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) scaleY(var(--kb-candle-height-scale, 1));
  transform-origin: 50% 100%;
  transition: transform .35s ease-out;
  width: 40px;
  height: 126px;
  border-radius: 8px 8px 14px 14px;
  background:
    radial-gradient(130% 65% at 46% 2%, rgba(255,252,242,0.98), rgba(255,252,242,0.70) 44%, rgba(255,252,242,0) 92%),
    linear-gradient(180deg, rgba(255,250,236,0.97), rgba(246,235,205,0.92));
  border: 1px solid rgba(245,223,174,0.56);
  box-shadow:
    0 8px 20px rgba(255,171,96,0.18),
    inset 0 1px 0 rgba(255,255,255,0.76);
  overflow: hidden;
  z-index: 8;
}

/* Croix conservée, gravée sur la bougie interne. */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-body::after,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-body::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  width: 16px;
  height: 30px;
  background:
    linear-gradient(90deg, transparent 38%, rgba(198,141,34,0.98) 38% 62%, transparent 62%),
    linear-gradient(180deg, transparent 38%, rgba(198,141,34,0.98) 38% 62%, transparent 62%);
  filter: drop-shadow(0 0 2px rgba(237,200,119,0.86));
  opacity: 1;
  pointer-events: none;
  z-index: 14;
}

/* Cire visible et fondante (pilotée par JS via .kb-candle-wax height). */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-wax,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-wax {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,249,232, calc(0.20 + (var(--kb-religious-cover, 0) * 0.65))) 0%,
      rgba(248,236,205, calc(0.16 + (var(--kb-religious-cover, 0) * 0.58))) 55%,
      rgba(238,217,171, calc(0.12 + (var(--kb-religious-cover, 0) * 0.54))) 100%
    );
  box-shadow:
    inset 0 10px 12px rgba(255,255,255,0.26),
    inset 0 -8px 10px rgba(228,191,126,0.16);
  z-index: 11;
  opacity: 1;
  transition: background .35s ease-out;
}

/* Bord supérieur de cire irrégulier (pas de ligne droite). */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-wax::before,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-wax::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -12px;
  height: 22px;
  background:
    radial-gradient(13px 11px at 8% 100%, rgba(251,238,200,0.93) 0 82%, transparent 84%),
    radial-gradient(7px 7px at 22% 100%, rgba(251,238,200,0.86) 0 80%, transparent 82%),
    radial-gradient(16px 13px at 44% 100%, rgba(251,238,200,0.96) 0 84%, transparent 86%),
    radial-gradient(6px 7px at 58% 100%, rgba(251,238,200,0.82) 0 78%, transparent 80%),
    radial-gradient(11px 10px at 76% 100%, rgba(251,238,200,0.90) 0 82%, transparent 84%),
    radial-gradient(9px 8px at 90% 100%, rgba(251,238,200,0.88) 0 80%, transparent 82%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 13;
}

/* Coulures irrégulières latérales: évite l'effet "fonte droite et rigide". */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-wax::after,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-wax::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 18%, rgba(245,224,178,0.22) 22% 64%, transparent 72%) 10% 0 / 9% 100% no-repeat,
    linear-gradient(180deg, transparent 0 30%, rgba(245,224,178,0.18) 34% 82%, transparent 88%) 20% 0 / 7% 100% no-repeat,
    linear-gradient(180deg, transparent 0 14%, rgba(245,224,178,0.24) 18% 58%, transparent 66%) 84% 0 / 8% 100% no-repeat,
    linear-gradient(180deg, transparent 0 40%, rgba(245,224,178,0.16) 44% 90%, transparent 95%) 74% 0 / 6% 100% no-repeat,
    linear-gradient(180deg, transparent 0 48%, rgba(245,224,178,0.14) 52% 86%, transparent 92%) 38% 0 / 5% 100% no-repeat;
  opacity: calc(0.20 + (var(--kb-religious-cover, 0) * 0.50));
  pointer-events: none;
  z-index: 12;
}

/* On allège l'ancien motif de coulures pour éviter l'effet "bourrelet arrondi". */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-body::before,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-body::before {
  display: none;
}

/* Tête de bougie légèrement irrégulière pour un rendu moins "parfait". */
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-body::before,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-body::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 12px;
  background:
    radial-gradient(7px 6px at 12% 100%, rgba(252,241,208,0.86) 0 78%, transparent 80%),
    radial-gradient(10px 7px at 42% 100%, rgba(252,241,208,0.90) 0 82%, transparent 84%),
    radial-gradient(6px 5px at 64% 100%, rgba(252,241,208,0.82) 0 76%, transparent 78%),
    radial-gradient(8px 6px at 86% 100%, rgba(252,241,208,0.88) 0 80%, transparent 82%);
  opacity: 0.75;
  pointer-events: none;
  z-index: 12;
}

.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-flame-core,
.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-flame-inner,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-flame-core,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-flame-inner {
  background:
    radial-gradient(42% 48% at 50% 24%, rgba(255,255,250,0.97), rgba(255,244,200,0.94) 40%, rgba(255,214,130,0.80) 66%, rgba(255,196,103,0.38) 86%, rgba(255,196,103,0) 100%),
    radial-gradient(85% 95% at 50% 74%, rgba(255,173,74,0.60), rgba(255,151,63,0.30) 62%, rgba(255,151,63,0) 100%),
    radial-gradient(85% 125% at 50% 118%, rgba(92,139,255,0.12), rgba(92,139,255,0) 70%);
  box-shadow:
    0 0 16px rgba(255,196,103,0.64),
    0 0 30px rgba(255,167,94,0.36);
  z-index: 6;
  animation: kb-candle-flame-morph 1.35s ease-in-out infinite;
  /* Base volontairement arrondie (pas de pointe basse visible). */
  clip-path: polygon(50% 0%, 64% 12%, 76% 30%, 80% 48%, 72% 68%, 62% 82%, 56% 88%, 44% 88%, 38% 82%, 28% 68%, 20% 48%, 24% 30%, 36% 12%);
}

.kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-flame,
.kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-flame {
  /* Ancré sur le haut de la bougie (qui diminue avec --kb-candle-height-scale). */
  bottom: calc(30px + (126px * var(--kb-candle-height-scale, 1)) - 10px) !important;
  width: 24px;
  height: 76px;
  z-index: 9;
  animation: kb-candle-flame-sway-religious 1.15s ease-in-out infinite;
}

@keyframes kb-candle-flame-sway-religious {
  0% {
    transform: translateX(-50%) rotate(-5deg) skewX(-2deg);
  }
  30% {
    transform: translateX(calc(-50% + 2px)) rotate(4deg) skewX(2deg);
  }
  60% {
    transform: translateX(calc(-50% - 2px)) rotate(-4deg) skewX(-2deg);
  }
  100% {
    transform: translateX(-50%) rotate(-5deg) skewX(-2deg);
  }
}

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

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

.kb-candle-variant-btn,
.kb-candle-style-btn,
.kb-candle-ignite,
.kb-candle-btn {
  border-radius: 999px !important;
  background: #2c3e50 !important;
  color: #d4af37 !important;
  border: 1px solid rgba(212,175,55,0.45) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.28) !important;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease !important;
}

.kb-candle-style-btn:hover,
.kb-candle-ignite:hover,
.kb-candle-btn:hover {
  background: #34495e !important;
  color: #f1d98a !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,0.34) !important;
}

.kb-candle-style-btn:focus-visible,
.kb-candle-ignite:focus-visible,
.kb-candle-btn:focus-visible {
  outline: 2px solid rgba(212,175,55,0.75);
  outline-offset: 2px;
}

.kb-candle-style-btn:active,
.kb-candle-ignite:active,
.kb-candle-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(15,23,42,0.28) !important;
}

.kb-candle-style-btn.kb-candle-style-btn--active {
  background: #d4af37 !important;
  color: #2c3e50 !important;
  border-color: rgba(44,62,80,0.55) !important;
  box-shadow: 0 10px 22px rgba(212,175,55,0.34) !important;
}

.kb-candle-ignite[disabled],
.kb-candle-btn[disabled],
.kb-candle-style-btn[disabled] {
  opacity: .68;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 14px rgba(15,23,42,0.20) !important;
}

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

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

  .kb-candle-visual::after {
    width: 190px;
    height: 92px;
  }

  .kb-candle-flame {
    bottom: 30px !important;
    width: 26px;
    height: 84px;
  }

  .kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::before,
  .kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::before {
    width: 108px;
    height: 160px;
    bottom: 10px;
  }

  .kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::after,
  .kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-figure::after {
    width: 108px;
    height: 12px;
    bottom: 14px;
  }

  .kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-body,
  .kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-body {
    width: 32px;
    height: 98px;
    bottom: 22px;
    border-radius: 18px 18px 12px 12px;
  }

  .kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-flame,
  .kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-flame {
    bottom: calc(22px + (98px * var(--kb-candle-height-scale, 1)) - 10px) !important;
    width: 22px;
    height: 68px;
  }

  .kb-candle-card[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::after,
  .kb-candle-widget[data-candle-type="religious"].kb-candle--burning .kb-candle-visual::after {
    left: calc(50% - 20px);
    bottom: 44px;
    width: 12px;
    height: 110px;
  }

  .kb-candle-card[data-candle-type="neutral"].kb-candle--burning .kb-candle-flame,
  .kb-candle-widget[data-candle-type="neutral"].kb-candle--burning .kb-candle-flame {
    bottom: 28px !important;
    width: 24px;
    height: 76px;
    animation: kb-candle-flame-sway-neutral 0.9s ease-in-out infinite;
  }
}