:root{
  --sky-top:#fff7d6;
  --sky-bottom:#ffe8b0;
  --petal-1:#ffd93d;
  --petal-2:#ffb703;
  --petal-shadow:#e08a00;
  --center-1:#8b4a00;
  --center-2:#5c3200;
  --text-dark:#5c3d00;
  --card-bg:rgba(255,255,255,0.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky-top:#2a2110;
    --sky-bottom:#4a3410;
    --text-dark:#ffe8b0;
    --card-bg:rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --sky-top:#2a2110;
  --sky-bottom:#4a3410;
  --text-dark:#ffe8b0;
  --card-bg:rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html,body{
  height:100%;
  margin:0;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body{
  min-height:100%;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  position:relative;
}

.sun-glow{
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(255,236,150,0.9) 0%, rgba(255,236,150,0) 70%);
  filter:blur(10px);
  pointer-events:none;
}

.stage{
  position:relative;
  width:min(90vw, 420px);
  height:min(90vw, 420px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.flower{
  width:100%;
  height:100%;
  transform-origin:50% 85%;
  animation:sway 4.5s ease-in-out infinite;
}

@keyframes sway{
  0%,100%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
}

.petal-group{
  transform-origin:200px 200px;
  animation:bloom 1.6s cubic-bezier(.34,1.56,.64,1) both;
}
.petal-group:nth-child(1){animation-delay:0s;}
.petal-group:nth-child(2){animation-delay:.03s;}
.petal-group:nth-child(3){animation-delay:.06s;}
.petal-group:nth-child(4){animation-delay:.09s;}
.petal-group:nth-child(5){animation-delay:.12s;}
.petal-group:nth-child(6){animation-delay:.15s;}
.petal-group:nth-child(7){animation-delay:.18s;}
.petal-group:nth-child(8){animation-delay:.21s;}
.petal-group:nth-child(9){animation-delay:.24s;}
.petal-group:nth-child(10){animation-delay:.27s;}
.petal-group:nth-child(11){animation-delay:.30s;}
.petal-group:nth-child(12){animation-delay:.33s;}

@keyframes bloom{
  0%{opacity:0; transform:scale(0.1) rotate(var(--r));}
  100%{opacity:1; transform:scale(1) rotate(var(--r));}
}

.petal{
  filter:drop-shadow(0 4px 6px rgba(150,90,0,0.25));
}

.center-circle{
  animation:pop-center 1s ease .35s both;
}
@keyframes pop-center{
  0%{opacity:0; transform:scale(0);}
  70%{transform:scale(1.15);}
  100%{opacity:1; transform:scale(1);}
}

.sparkle{
  position:absolute;
  pointer-events:none;
  opacity:0;
  animation:sparkle-pop 2.4s ease-in-out infinite;
}
@keyframes sparkle-pop{
  0%{opacity:0; transform:scale(0) rotate(0deg);}
  15%{opacity:1; transform:scale(1) rotate(90deg);}
  30%{opacity:0; transform:scale(0.4) rotate(180deg);}
  100%{opacity:0;}
}

.message-card{
  margin-top:18px;
  padding:18px 28px;
  background:var(--card-bg);
  backdrop-filter:blur(6px);
  border-radius:20px;
  text-align:center;
  max-width:min(85vw, 420px);
  box-shadow:0 8px 24px rgba(150,100,0,0.15);
  z-index:2;
  opacity:0;
  animation:fade-up 1s ease 1.4s forwards;
}
@keyframes fade-up{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

.message-card h1{
  margin:0 0 6px;
  color:var(--text-dark);
  font-size:clamp(20px,5vw,28px);
  font-weight:700;
}
.message-card p{
  margin:0;
  color:var(--text-dark);
  font-size:clamp(14px,3.6vw,17px);
  opacity:0.85;
  line-height:1.4;
}

.falling-petal{
  position:fixed;
  top:-30px;
  pointer-events:none;
  z-index:1;
  opacity:0.9;
}

footer{
  margin-top:14px;
  font-size:12px;
  color:var(--text-dark);
  opacity:0.5;
  z-index:2;
}