/* ── CANDLE SCREEN ─────────────────────────────────────────── */
#candle-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1a0a08 0%, #2a100c 60%, #1f0c0a 100%);
  transition: opacity 1.3s ease, visibility 1.3s ease;
}
#candle-screen.extinguished { opacity: 0; visibility: hidden; pointer-events: none; }

.candle-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(220,100,70,.14) 0%, transparent 62%);
  pointer-events: none;
}

.candle-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem; position: relative; z-index: 1;
}

.candle-hint {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: rgba(240,196,184,.65);
  letter-spacing: .18em; font-style: italic;
}

.candle-sub {
  font-size: .68rem; color: rgba(240,196,184,.28);
  letter-spacing: .35em; text-transform: uppercase;
}

.mic-tap-hint {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(240,196,184,.32); font-size: .7rem;
  letter-spacing: .28em; text-transform: uppercase;
  cursor: pointer; padding-bottom: 2px;
  border-bottom: 1px solid rgba(240,196,184,.15);
}

/* Candle anatomy */
.candle-wrap { display: flex; flex-direction: column; align-items: center; }

.candle-body {
  width: 54px; height: 170px;
  background: linear-gradient(135deg, #fde8d8 0%, #f0c4a0 40%, #d4906a 100%);
  border-radius: 3px 3px 5px 5px; position: relative;
  box-shadow: inset -10px 0 18px rgba(0,0,0,.12), 0 6px 24px rgba(212,144,106,.18);
}

.candle-number {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Cormorant Garamond', serif; font-size: 2.2rem;
  color: rgba(58,31,26,.35); font-style: italic; user-select: none;
}

.candle-drip {
  position: absolute; top: -5px; width: 11px; height: 20px;
  background: rgba(253,232,216,.88); border-radius: 0 0 50% 50%;
}
.candle-drip.d1 { left: 9px;   height: 24px; }
.candle-drip.d2 { right: 13px; height: 15px; }

.candle-base {
  width: 72px; height: 11px;
  background: linear-gradient(to bottom, #c4855a, #9a6035);
  border-radius: 0 0 5px 5px; box-shadow: 0 5px 14px rgba(0,0,0,.28);
}

/* Flame */
.flame {
  position: relative; width: 26px; height: 56px;
  margin-bottom: -2px; transform-origin: bottom center;
  animation: flicker 1.8s ease-in-out infinite alternate;
}

.flame-inner {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 48px;
  background: linear-gradient(to top, #fff8e8, #ffd060, #ff9020, rgba(255,50,0,.65), transparent);
  clip-path: polygon(50% 0%, 100% 60%, 80% 100%, 20% 100%, 0% 60%);
  filter: blur(1.5px);
}

.flame-glow {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,60,.45) 0%, transparent 70%);
  filter: blur(8px);
  animation: glowPulse 1.8s ease-in-out infinite alternate;
}

.flame.out { animation: extinguish .5s ease forwards; }

@keyframes flicker {
  0%   { transform: rotate(-3deg) scaleY(1); }
  30%  { transform: rotate(2.5deg) scaleY(.94); }
  60%  { transform: rotate(-2deg) scaleY(1.06); }
  100% { transform: rotate(3deg) scaleY(.97); }
}
@keyframes glowPulse {
  0%   { opacity: .65; transform: translateX(-50%) scale(1); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.18); }
}
@keyframes extinguish {
  0%   { opacity: 1; transform: scaleY(1); }
  40%  { opacity: .4; transform: scaleY(1.4) rotate(10deg); }
  100% { opacity: 0; transform: scaleY(0); }
}