* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #ffffff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* portrait-centered even if phone rotates */
.app {
  position: relative;
  width: min(100vw, 430px, calc(100dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  height: auto;
  overflow: hidden;
  background: #fff;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none;
}

/* Flowers */
.flower {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
}

.flower-red {
  width: 16%;
  left: 24%;
  bottom: 22%;
  z-index: 6;
}

.flower-pink {
  width: 12%;
  left: 70%;
  bottom: 40%;
  z-index: 5;
}

.flower-yellow {
  width: 8%;
  left: 58%;
  bottom: 48%;
  z-index: 4;
}

.flower-turquoise {
  width: 6%;
  left: 25%;
  bottom: 49%;
  z-index: 3;
}

.flower-purple {
  width: 7.5%;
  left: 72%;
  bottom: 17%;
  z-index: 2;
}

.quest-flower.active-flower {
  pointer-events: auto;
  cursor: pointer;
}

.flower-activate {
  animation: flowerActivate 1.2s ease-in-out infinite;
}

@keyframes flowerActivate {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}

.flower-picked {
  animation: flowerPicked 0.5s ease-out forwards;
}

@keyframes flowerPicked {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  35% {
    transform: translateX(-50%) translateY(-14px) scale(1.12);
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95));
  }
  100% {
    transform: translateX(-50%) translateY(-20px) scale(0.85);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

/* Egg system */
.egg-shadow {
  position: absolute;
  transform: translateX(-50%);
  opacity: 0.4;
  z-index: 1;
}

.story-egg-shadow {
  width: 20%;
  left: 36%;
  bottom: 33%;
}

.egg {
  position: absolute;
  width: 20%;
  left: 36%;
  bottom: 34%;
  transform: translateX(-50%);
  z-index: 2;
}

.egg-crack {
  position: absolute;
  transform: translateX(-50%);
  z-index: 3;
}

#egg-crack-1 {
  width: 11%;
  left: 36%;
  bottom: 36.2%;
}

#egg-crack-2 {
  width: 10%;
  left: 36%;
  bottom: 40%;
}

.egg-top,
.egg-bottom {
  position: absolute;
  transform: translateX(-50%);
}

.story-egg-bottom,
.egg-bottom {
  width: 20%;
  left: 36%;
  bottom: 34%;
  z-index: 4;
}

.egg-top {
  width: 20%;
  left: 36%;
  bottom: 34%;
  z-index: 5;
}

.dino-head {
  position: absolute;
  width: 15%;
  left: 36%;
  bottom: 39.5%;
  transform: translateX(-50%);
  z-index: 3;
}

.egg-shells {
  position: absolute;
  width: 26%;
  left: 36%;
  bottom: 23%;
  transform: translateX(-50%);
  z-index: 2;
}

.story-egg-shells {
  width: 26%;
  left: 36%;
  bottom: 32%;
}

/* Dino full */
.dino-full-shadow {
  position: absolute;
  width: 26%;
  left: 49%;
  bottom: 12.5%;
  transform: translateX(-50%);
  opacity: 0.5;
  z-index: 1;
}

.dino-full {
  position: absolute;
  width: 26%;
  left: 49%;
  bottom: 13%;
  transform: translateX(-50%);
  z-index: 3;
}

/* Dino bouquet */
.dino-bouquet-shadow {
  position: absolute;
  width: 35%;
  left: 48%;
  bottom: 11%;
  transform: translateX(-50%);
  opacity: 0.5;
  z-index: 5;
}

.dino-bouquet {
  position: absolute;
  width: 35%;
  left: 46%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 6;
}

/* Bubbles */
.bubble-wrap {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.8;
}

#bubble-wrap-opening {
  width: 34%;
}

#bubble-wrap-scene2,
#bubble-wrap-scene3,
#bubble-wrap-scene5 {
  width: 56%;
}

#bubble-wrap-scene4 {
  width: 62%;
}

.speech-bubble {
  width: 100%;
  display: block;
}

.bubble-text {
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  color: #222;
  overflow: hidden;
}

#bubble-text-opening {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  line-height: 1.05;
}

.bubble-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.18;
  word-break: break-word;
  white-space: normal;
}

#bubble-wrap-scene4 .bubble-content,
#bubble-wrap-scene5 .bubble-content {
  font-size: 9px;
  line-height: 1.14;
}

.next-inline {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  color: #222;
}

/* Help button */
.help-button {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 28%;
  opacity: 0.8;
  z-index: 12;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.help-button-bg {
  width: 100%;
  display: block;
}

.help-button-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #222;
  font-weight: 600;
}

/* Heart image - top right */
.heart-effect {
  position: absolute;
  left: 60%;
  bottom: 39%;
  transform: translateX(-50%);
  width: 9%;
  z-index: 8;
  opacity: 0;
}

.heart-pop-stay {
  animation: heartPopStay 0.8s ease-out forwards;
}

@keyframes heartPopStay {
  0% {
    transform: translateX(-50%) translateY(10px) scale(0.5);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) translateY(-3px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

/* Fade */
.fade-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 999;
}

/* Animations */
.egg-shake,
.egg-crack-shake {
  animation: eggShake 0.35s ease-in-out;
}

@keyframes eggShake {
  0%   { transform: translateX(-50%) rotate(0deg); }
  20%  { transform: translateX(-50%) rotate(-4deg); }
  40%  { transform: translateX(-50%) rotate(4deg); }
  60%  { transform: translateX(-50%) rotate(-3deg); }
  80%  { transform: translateX(-50%) rotate(3deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

.dino-pop {
  animation: dinoPop 0.5s ease-out;
}

@keyframes dinoPop {
  0% {
    transform: translateX(-50%) translateY(20px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

.egg-top-pop {
  animation: eggTopPop 0.4s ease-out;
}

@keyframes eggTopPop {
  0% {
    transform: translateX(-50%) translateY(5%);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

.egg-shells-pop {
  animation: eggShellsPop 0.45s ease-out;
}

@keyframes eggShellsPop {
  0% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

.dino-full-pop {
  animation: dinoFullPop 0.5s ease-out;
}

@keyframes dinoFullPop {
  0% {
    transform: translateX(-50%) translateY(20px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

/* =========================
   Bubble attention effect
   ========================= */

.bubble-wrap {
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* pulse */
.bubble-attention {
  animation: bubblePulse 1s ease-in-out 2;
}

@keyframes bubblePulse {
  0%   { transform: translateX(-50%) scale(1); }
  25%  { transform: translateX(-50%) scale(1.03); }
  50%  { transform: translateX(-50%) scale(1.06); }
  75%  { transform: translateX(-50%) scale(1.03); }
  100% { transform: translateX(-50%) scale(1); }
}

/* color glow */
.bubble-glow-red {
  filter:
    drop-shadow(0 0 6px rgba(255, 90, 90, 0.65))
    drop-shadow(0 0 14px rgba(255, 90, 90, 0.45));
}

.bubble-glow-pink {
  filter:
    drop-shadow(0 0 6px rgba(255, 120, 190, 0.65))
    drop-shadow(0 0 14px rgba(255, 120, 190, 0.45));
}

.bubble-glow-yellow {
  filter:
    drop-shadow(0 0 6px rgba(255, 215, 90, 0.75))
    drop-shadow(0 0 14px rgba(255, 215, 90, 0.5));
}

.bubble-glow-turquoise {
  filter:
    drop-shadow(0 0 6px rgba(70, 220, 210, 0.7))
    drop-shadow(0 0 14px rgba(70, 220, 210, 0.45));
}

.bubble-glow-purple {
  filter:
    drop-shadow(0 0 6px rgba(180, 110, 255, 0.7))
    drop-shadow(0 0 14px rgba(180, 110, 255, 0.45));
}

/* flower copy flying toward bubble */
.flower-fly-clone {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform-origin: center center;
  animation: flowerFlyToBubble 0.9s ease-in-out forwards;
}

@keyframes flowerFlyToBubble {
  0% {
    opacity: 1;
    transform: translate(var(--fly-x-start), var(--fly-y-start)) scale(1);
  }
  60% {
    opacity: 1;
    transform: translate(var(--fly-x-mid), var(--fly-y-mid)) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fly-x-end), var(--fly-y-end)) scale(0.55);
  }
}