/* Изолированная исходная геометрия торта: 1290/496. Не наследует общие .candle/.flame. */
.scene-cake .cake-scene{--panel-space:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding-top:35px;height:100%}
.scene-cake .cake-scene:has(.candle-panel[hidden]){--panel-space:0px}
.birthday-stage{width:min(790px,var(--fit-width,700px),calc((var(--fit-height,350px) - var(--panel-space) - 85px)*2.6));min-width:0;flex-shrink:0;position:relative;aspect-ratio:1290/496;margin-top:18px}
.birthday-art{position:relative;width:100%;aspect-ratio:1290/496;filter:drop-shadow(0 14px 15px #324b5e2e)}
.birthday-cake-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.birthday-candles{position:absolute;z-index:8;bottom:68.45%;height:60%;display:grid;align-items:end;justify-items:center;pointer-events:none}
.birthday-art .birthday-candle{--flicker:.92s;position:relative;width:78%;height:auto;aspect-ratio:136/323;border:0;border-radius:0;padding:0;background:transparent!important;box-shadow:none;cursor:pointer;touch-action:manipulation;pointer-events:auto;min-width:0;min-height:0;display:block;color:inherit}
.birthday-art .birthday-candle:hover,.birthday-art .birthday-candle.is-lit{background:transparent!important;outline:none}
.birthday-candle-body{position:absolute;z-index:3;left:50%;bottom:0;width:100%;height:100%;object-fit:contain;transform:translateX(-50%);pointer-events:none;user-select:none}
.birthday-art .birthday-candle:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.birthday-art .flame,.birthday-art .flame-glow,.birthday-art .smoke{display:block;top:auto;border:0;min-height:0;min-width:0;box-shadow:none}
.birthday-art .flame, .birthday-art .flame-glow, .birthday-art .smoke {
  position: absolute; left: 50%; pointer-events: none;
}
.birthday-art .flame-glow {
  z-index: 1; bottom: calc(100% - 5px); width: 30px; height: 42px;
  transform: translateX(-50%) scale(.35); transform-origin: 50% 75%;
  opacity: 0; border-radius: 46% 54% 50% 50% / 66% 66% 34% 34%;
  background: radial-gradient(ellipse at 50% 62%, rgba(255,224,112,.42) 0 24%, rgba(255,167,52,.18) 44%, transparent 76%);
  filter: blur(4px);
}
.birthday-art .flame {
  z-index: 4; bottom: calc(100% - 3px); width: 18px; height: 31px;
  transform: translateX(-50%) scale(0); transform-origin: 50% 100%; opacity: 0;
  border-radius: 50% 50% 46% 54% / 74% 74% 26% 26%;
  clip-path: polygon(50% 0%, 68% 24%, 84% 55%, 72% 84%, 50% 100%, 28% 84%, 16% 55%, 32% 24%);
  background: linear-gradient(to top, #f36a21 0 25%, #ffad2e 26% 62%, #ffe45d 63% 100%);
  filter: drop-shadow(0 0 3px rgba(255,126,28,.58));
}
.birthday-art .flame::after {
  content: "";
  position: absolute; left: 50%; bottom: 3px; width: 5px; height: 10px;
  transform: translateX(-50%);
  border-radius: 50% 50% 44% 56% / 70% 70% 30% 30%;
  background: linear-gradient(to top, #fff0a0, #fffbd8);
  opacity: .84;
}
.birthday-art .smoke {
  z-index: 2; bottom: calc(100% + 2px); width: 5px; height: 24px;
  border-radius: 50%; opacity: 0;
  background: linear-gradient(to top, rgba(102,112,122,.34), rgba(144,151,157,.16) 48%, transparent);
  filter: blur(1.8px); transform: translateX(-50%);
}
.birthday-art .birthday-candle.is-lit .flame {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: flicker var(--flicker) ease-in-out infinite alternate;
}
.birthday-art .birthday-candle.is-lit .flame-glow {
  opacity: .62; transform: translateX(-50%) scale(1);
  animation: glowPulse 1.38s ease-in-out infinite alternate;
}
.birthday-art .birthday-candle.is-lighting .flame { animation: ignite .34s ease-out both; }
.birthday-art .birthday-candle.is-lighting .flame-glow { animation: glowIn .42s ease-out both; }
.birthday-art .birthday-candle.is-extinguishing .flame { opacity: 1; animation: extinguish .24s ease-in forwards; }
.birthday-art .birthday-candle.is-extinguishing .flame-glow { opacity: .55; animation: glowOut .3s ease-in forwards; }
.birthday-art .birthday-candle.is-extinguishing .smoke { animation: smokeRise .68s ease-out forwards; }

@keyframes ignite {
  0% { opacity: 0; transform: translateX(-50%) scale(.06, .12); }
  48% { opacity: 1; transform: translateX(-50%) scale(1.12, 1.18); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes flicker {
  0% { transform: translateX(-50%) scale(.96, 1.02) rotate(-1.7deg); }
  35% { transform: translateX(calc(-50% - 1px)) scale(1.01, .94) rotate(1.5deg); }
  68% { transform: translateX(calc(-50% + 1px)) scale(.94, 1.06) rotate(-2.1deg); }
  100% { transform: translateX(-50%) scale(1.03, .92) rotate(2.2deg); }
}
@keyframes glowIn {
  from { opacity: 0; transform: translateX(-50%) scale(.25); }
  to { opacity: .62; transform: translateX(-50%) scale(1); }
}
@keyframes glowPulse {
  from { opacity: .38; transform: translateX(-50%) scale(.9, .94); }
  to { opacity: .66; transform: translateX(-50%) scale(1.06, 1.03); }
}
@keyframes extinguish {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -10px) scale(.15, .32); }
}
@keyframes glowOut {
  from { opacity: .55; transform: translateX(-50%) scale(1); }
  to { opacity: 0; transform: translateX(-50%) scale(.28); }
}
@keyframes smokeRise {
  0% { opacity: 0; transform: translate(-50%, 3px) scale(.55); }
  22% { opacity: .42; }
  100% { opacity: 0; transform: translate(-25%, -25px) scale(1.25); }
}


@media(max-width:680px){.scene-cake .cake-scene{--panel-space:110px;padding-top:28px;gap:5px}.birthday-stage{margin-top:16px;width:min(var(--fit-width,320px),calc((var(--fit-height,300px) - var(--panel-space) - 70px)*2.6))}}
@media(max-height:560px) and (orientation:landscape){.scene-cake .cake-scene{flex-direction:row;padding-top:25px;gap:18px;--panel-space:0px}.birthday-stage{margin-top:14px;width:min(calc(var(--fit-width,750px) - 300px),calc((var(--fit-height,190px) - 65px)*2.6))}.scene-cake .cake-scene:has(.candle-panel[hidden]) .birthday-stage{width:min(var(--fit-width,750px),calc((var(--fit-height,190px) - 65px)*2.6))}}
/* Масштаб огня следует за тортом, исходные 18x31 px сохраняются на ширине 790 px. */
.birthday-stage{container-type:inline-size}
.birthday-art .flame{width:clamp(6px,2.28cqw,18px);height:clamp(11px,3.92cqw,31px)}
.birthday-art .flame::after{width:clamp(2px,.63cqw,5px);height:clamp(4px,1.27cqw,10px);bottom:clamp(1px,.38cqw,3px)}
.birthday-art .flame-glow{width:clamp(11px,3.8cqw,30px);height:clamp(16px,5.32cqw,42px)}
.birthday-art .smoke{width:clamp(2px,.63cqw,5px);height:clamp(9px,3.04cqw,24px)}