/* birthday.css — the cake with one big candle. Sized in em on .bd-stage so it scales with one font-size.
   Transform owners: .bd-stage = entrance / nudge · .bd-flame-wrap = the blow (JS) · .bd-flame = flicker · .bd-smoke i = smoke. */

[data-screen="birthday"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bd-center { gap: 6px; }
.bd-head { margin-bottom: 6px; }

.bd-stage {
  --glow: 1;
  position: relative;
  font-size: 10px;
  width: 24em;
  height: 27em;
  margin: 4px auto 10px;
  touch-action: none;
}
.bd-stage.is-entering { animation: scaleIn .8s var(--ease-out) both; }
.bd-stage.is-nudge { animation: wiggle .4s ease-out; }

/* warm glow behind the flame */
.bd-glow {
  position: absolute; left: 50%; bottom: 17em; width: 16em; height: 16em; margin-left: -8em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, .55), rgba(255, 170, 90, .18) 45%, transparent 70%);
  opacity: var(--glow);
  transition: opacity .3s ease;
  pointer-events: none;
}
.bd-stage.is-blown .bd-glow { opacity: 0; transition: opacity .8s ease; }

/* plate + two tiers */
.bd-plate { position: absolute; left: 50%; bottom: .2em; width: 23em; height: 2.4em; margin-left: -11.5em; border-radius: 50%; background: linear-gradient(#fff, #f3dde4); box-shadow: 0 1em 2em rgba(80, 0, 30, .35); }
.bd-tier { position: absolute; left: 50%; border-radius: 1.4em 1.4em 1em 1em; overflow: hidden; box-shadow: inset 0 -.6em 1em rgba(160, 60, 80, .18); }
.bd-tier-bottom { bottom: 1.3em; width: 20em; height: 7em; margin-left: -10em; background: linear-gradient(#fff6ef, #ffdcc7); }
.bd-tier-top { bottom: 8.1em; width: 14em; height: 5.6em; margin-left: -7em; background: linear-gradient(#fff8f2, #ffe3d3); }
.bd-frost {
  position: absolute; left: 0; right: 0; top: 0; height: 2.3em;
  background:
    radial-gradient(circle at 1.1em 1.4em, #FF8FB1 1.1em, transparent 1.15em) 0 0 / 2.2em 2.6em repeat-x,
    linear-gradient(#FF8FB1, #FF8FB1) 0 0 / 100% 1.2em no-repeat;
}
.bd-dots {
  position: absolute; left: 0; right: 0; bottom: .8em; height: 2.4em;
  background:
    radial-gradient(circle, #E91E63 .28em, transparent .32em) 0 0 / 2.6em 1.2em,
    radial-gradient(circle, #FFD36E .24em, transparent .28em) 1.3em .6em / 2.6em 1.2em;
  opacity: .8;
}

/* the one big candle */
.bd-candle {
  position: absolute; left: 50%; bottom: 13.6em; width: 2.6em; height: 7.4em; margin-left: -1.3em;
  border-radius: .5em .5em .2em .2em;
  background: repeating-linear-gradient(-45deg, #fff 0 .7em, #FFB3C9 .7em 1.4em);
  box-shadow: inset -.4em 0 .6em rgba(160, 40, 80, .2), 0 .3em .6em rgba(80, 0, 30, .2);
}
.bd-wick { position: absolute; left: 50%; top: -1em; width: .3em; height: 1.1em; margin-left: -.15em; border-radius: .2em; background: #4a2a1a; }
.bd-stage.is-blown .bd-wick { background: linear-gradient(#ff8a3d, #4a2a1a 60%); animation: bdEmber 1.6s ease forwards; }
@keyframes bdEmber { to { background: #4a2a1a; } }

/* flame: the wrapper takes the blow (JS), the inner flame flickers (CSS) */
.bd-flame-wrap {
  position: absolute; left: 50%; bottom: 21.9em; width: 2.8em; height: 4.4em; margin-left: -1.4em;
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform;
}
.bd-flame {
  position: absolute; inset: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fffbe6 0 18%, #FFE08A 32%, #ffb347 58%, rgba(255, 120, 60, .85) 74%, transparent 76%);
  filter: drop-shadow(0 0 .8em rgba(255, 190, 90, .9));
  transform-origin: 50% 90%;
  animation: bdFlicker .18s ease-in-out infinite alternate;
}
.bd-flame-core { position: absolute; left: 36%; right: 36%; bottom: 10%; height: 30%; border-radius: 50%; background: rgba(120, 170, 255, .55); }
@keyframes bdFlicker {
  0% { transform: scale(1, 1) skewX(-2deg); }
  50% { transform: scale(.96, 1.06) skewX(2deg); }
  100% { transform: scale(1.03, .97) skewX(-1deg); }
}
.bd-stage.is-blown .bd-flame-wrap { opacity: 0; transform: scale(.1, .1) !important; transition: transform .18s ease-in, opacity .18s ease-in; }

/* smoke after the blow */
.bd-smoke { position: absolute; left: 50%; bottom: 21.2em; width: 0; height: 0; pointer-events: none; }
.bd-smoke i { position: absolute; left: -.6em; bottom: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; filter: blur(.25em); }
.bd-stage.is-blown .bd-smoke i { animation: bdSmoke 2.2s ease-out forwards; }
.bd-stage.is-blown .bd-smoke i:nth-child(2) { animation-delay: .25s; }
.bd-stage.is-blown .bd-smoke i:nth-child(3) { animation-delay: .5s; }
@keyframes bdSmoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .7; }
  100% { opacity: 0; transform: translate(1.8em, -9em) scale(2.4); }
}

/* progress ring around the flame */
.bd-ring { position: absolute; left: 50%; bottom: 19.6em; width: 9em; height: 9em; margin-left: -4.5em; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.bd-stage.is-armed .bd-ring { opacity: .35; }
.bd-ring.is-active { opacity: 1 !important; }
.bd-stage.is-blown .bd-ring { opacity: 0 !important; }
.bd-ring-track { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 4; }
.bd-ring-arc { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }

/* the big invisible press target (the whole cake) */
.bd-hit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 2em;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.bd-stage.is-blown .bd-hit { cursor: default; }

.bd-hint { min-height: 24px; font-size: 16px; font-weight: 500; text-align: center; text-shadow: var(--text-shadow); }
.bd-help { margin-top: 2px; }
.bd-wish { margin-top: 14px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.bd-wish-title { font-size: 22px; font-weight: 600; color: var(--ink); }
.bd-wish-text { font-size: 16px; color: var(--ink-soft); }

@media (max-height: 680px) { .bd-stage { font-size: 8.5px; } }
@media (max-height: 560px) { .bd-stage { font-size: 7px; } .bd-head { margin-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bd-flame { animation: none !important; }
  .bd-stage.is-entering, .bd-stage.is-nudge { animation: none !important; }
  .bd-stage.is-blown .bd-smoke i { animation: fadeOut 1s ease forwards !important; animation-duration: 1s !important; }
}