:root {
  --bg: #0b1020;
  --cake-bg: #fdf3e7;
  --accent: #ff6f91;
  --accent-2: #ffc15e;
  --text: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #2a2845 0, #050611 55%, #020208 100%);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
}

.app {
  width: 100%;
  max-width: 3000px;
  /*padding: 5px;*/
  text-align: center;
}

.title {
  margin: 0 2 0px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 3.6rem;
}

.title2 {
  display: none;
  margin: 0 0 0px;
  letter-spacing: 0.08em;
  font-size: 1.25rem;
  font-style: italic;
}

.cake-wrapper {
  position: relative;
  margin-inline: auto;
  width: min(1080px, 100%);
  aspect-ratio: 3 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVG Torte */
#cake-svg {
  width: 100%;
  height: 100%;
  pointer-events: none; /* Interaktion nur über die overlay-Images */
}

/* Container für Kerzen-Wrapper */
.candle-images {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Events nur auf child-Wrappern */
}

/* Kerzen-Wrapper (div.candle-img) – schmal, höher, kleiner */
.candle-img {
  position: absolute;
  width: 40px;      /* schmaler */
  height: 90px;     /* höher, aber insgesamt klein */
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff 0%, #e5e7eb 60%, #d4d4d8 100%);
  border: 1px solid rgba(15, 23, 42, 0.6);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.65);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center bottom;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.candle-img:hover {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}

/* Docht */
.candle-img::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 1.5px;
  height: 7px;
  transform: translateX(-50%);
  background: #111827;
  border-radius: 999px;
}

/* Flamme */
.candle-img::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 8px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 30%, #fff9c4 0, #facc15 55%, #f97316 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
}

/* Inneres Bild als kleines Label auf dem Kerzenkörper */
.candle-img img {
  width: 98%;
  height: 97%;
  object-fit: cover;
  border-radius: 4px;
}

/* Positionen der 12 Kerzen relativ zur Top-View-Torte */
.candle-1  { left: 18.8%; top: 38%; }
.candle-3  { left: 30.1%; top: 35.5%; }
.candle-4  { left: 42.3%; top: 34%; }
.candle-5  { left: 53.25%; top: 34%; }
.candle-6  { left: 64.6%; top: 35%; }
.candle-7  { left: 70.75%; top: 44.1%; }
.candle-8  { left: 75.35%; top: 37.7%; }
.candle-9  { left: 25.1%; top: 43.6%; }
.candle-10  { left: 33.2%; top: 45.4%; }
.candle-11 { left: 43.2%; top: 47%; }
.candle-12 { left: 52.9%; top: 46.7%; }
.candle-2 { left: 61.6%; top: 45.4%; }

.hint {
  margin-top: 16px;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 600px) {
  .cake-wrapper {
    width: 100%;
  }

  /* Auf kleineren Screens Kerzen noch etwas kleiner skalieren */
  .candle-img {
    width: 14px;
    height: 34px;
  }
}

.candle-label {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #111827;
    font-weight: bold;
}

.match-stick {
  position: absolute;
  left: 62%;
  top: 12%;
  width: 10%;
  height: auto;
  rotate: 15deg;
}

.btn{
  display: none;
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}