@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #a169da;
  overflow: hidden;
  font-family: "Space Mono", monospace;
  cursor: crosshair;
}

.scene {
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgb(100, 24, 127);
}


.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(80,30,30,.08) .7px, transparent .7px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 20;
}

.intro {
  position: absolute;
  top: 2.2vh;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  white-space: nowrap;
  z-index: 30;
  color: #000000;
  font-size: clamp(20px, 3.4vw, 50px);
  font-weight: 700;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.cake-wrap {
  position: relative;
  width: min(82vw, 600px);
  transform: rotate(-.4deg);
  filter: saturate(1.08) contrast(1.02);
  transition: transform .6s ease, filter .6s ease;
  z-index: 5;
}

.cake {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 30px rgba(75, 30, 35, .20));
}

.hint {
  position: absolute;
  bottom: 2.5vh;
  left: 50%;
  transform: translateX(-50%) rotate(1deg);
  white-space: nowrap;
  color: #ffffff;
  font-size: clamp(11px, 1.2vw, 16px);
  z-index: 30;
  animation: blink 1.8s steps(2, end) infinite;
}

@keyframes blink {
  50% { opacity: .25; }
}

/* The candle positions are percentages of the cake image. */
.candle {
  --size: clamp(22px, 3.2vw, 34px);
  position: absolute;
  width: var(--size);
  height: calc(var(--size) * 1.15);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 10;
}

.candle .stick {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 48%;
  transform: translateX(-50%);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      0deg,
      #5c4640 0 5px,
      #75605a 5px 8px
    );
  box-shadow: 1px 1px 2px rgba(0,0,0,.35);
}

/* Flame */
.candle .flame {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--size) * .55);
  height: calc(var(--size) * .9);
  transform: translateX(-50%);
  border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(ellipse at 50% 75%, #fff 0 17%, #fff3a2 18% 40%, #ff9b31 41% 72%, #e75c2b 73%);
  filter: blur(.15px);
  box-shadow: 0 0 13px 5px rgba(255, 168, 54, .48);
  animation: flicker .13s infinite alternate;
  transform-origin: 50% 90%;
}

@keyframes flicker {
  from { transform: translateX(-50%) rotate(-3deg) scale(.96, 1.03); }
  to   { transform: translateX(-50%) rotate(4deg) scale(1.03, .96); }
}

/* Small smoke plume after clicking */
.candle .smoke {
  position: absolute;
  left: 50%;
  top: -2%;
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(90, 90, 90, .18);
  filter: blur(2px);
}

.candle.off .flame {
  animation: extinguish .28s forwards;
}

.candle.off .smoke {
  animation: smoke 1.5s ease-out forwards;
}

.candle.off {
  cursor: default;
}

@keyframes extinguish {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  55% { opacity: .7; transform: translateX(-50%) scale(.5, 1.3); }
  100% { opacity: 0; transform: translateX(-50%) scale(.05, .2); }
}

@keyframes smoke {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(.5);
  }
  20% { opacity: .55; }
  100% {
    opacity: 0;
    transform: translate(-20%, -55px) scale(2.7);
  }
}

/*
  Positions aligned to the seven real cherries in gateau.png.
  The button is centered on each cherry, so the click target and flame
  stay attached to the cake when the cake scales with the viewport.
*/
.candle-1 { left: 36.2%; top: 21.5%; transform: translateX(-50%); } /* top */
.candle-2 { left: 12.6%; top: 27.5%; transform: translateX(-50%) rotate(-10deg); } /* upper left */
.candle-3 { left: 68.2%; top: 27.5%; transform: translateX(-50%) rotate(10deg); } /* upper right */
.candle-4 { left: 11.7%; top: 46%; transform: translateX(-50%) rotate(-8deg); } /* middle left */
.candle-5 { left: 94.5%; top: 44%; transform: translateX(-50%) rotate(8deg); } /* middle right */
.candle-6 { left: 27.5%; top: 65%; transform: translateX(-50%) rotate(-5deg); } /* lower left */
.candle-7 { left: 56.6%; top: 74.5%; transform: translateX(-50%) rotate(5deg); } /* bottom */

/* Video reveal */
.video-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  background: rgba(25, 12, 18, 0);
  opacity: 0;
  pointer-events: none;
  transition: background .7s ease, opacity .7s ease;
}

.video-screen.visible {
  background: rgba(25, 12, 18, .93);
  opacity: 1;
  pointer-events: auto;
}

.video-inner {
  position: relative;
  width: min(90vw, 1000px);
  transform: scale(.92) rotate(-.4deg);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.video-screen.visible .video-inner {
  transform: scale(1) rotate(-.4deg);
}

video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
}

.close {
  position: absolute;
  right: -42px;
  top: -45px;
  border: 0;
  background: transparent;
  color: white;
  font: 30px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: .8;
}

.video-fallback {
  color: white;
  text-align: center;
  font-size: 12px;
  margin: 12px 0 0;
  opacity: .65;
}

@media (max-width: 600px) {
  .scene {
    min-height: 500px;
  }

  .cake-wrap {
    width: min(96vw, 560px);
  }

  .intro {
    top: 1.5vh;
    font-size: 12px;
  }

  .hint {
    bottom: 1.5vh;
    font-size: 11px;
  }

  .candle {
    --size: 30px;
  }

  .close {
    right: 0;
    top: -42px;
  }
}