/* ===== Theme (edit colors here) ===== */
:root{
  --rose:#ff5c8a; --blush:#ffc2d4; --deep:#8b1538; --plum:#4a1d6b; --violet:#7b3fb0;
  --text:#fff5f8; --glass:rgba(255,255,255,.12); --line:rgba(255,255,255,.28);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --script:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font-family:var(--serif);color:var(--text);overflow:hidden;
  background:linear-gradient(135deg,#ff8fab 0%,var(--deep) 40%,var(--plum) 75%,#2b1055 100%);
  background-size:200% 200%;animation:bg 18s ease-in-out infinite alternate;
}
@keyframes bg{to{background-position:100% 100%}}
h1,h2,h3,h4{font-weight:600;line-height:1.25;text-shadow:0 2px 18px rgba(0,0,0,.25)}
h1{font-size:clamp(1.7rem,5vw,2.8rem)}
h1 span{display:block;margin-top:.5em;font-family:var(--script);font-size:1.15em;font-weight:400;color:var(--blush)}
h2{font-size:clamp(1.5rem,4.5vw,2.4rem);margin-bottom:.6em}
h3{font-size:clamp(1.15rem,3.2vw,1.5rem);margin:.6em 0 1em}
.big{font-size:clamp(2rem,8vw,4rem);font-family:var(--script);font-weight:400}
.big2{font-size:clamp(1.3rem,4.5vw,2rem)}
.sub{opacity:.9;margin-bottom:1.4em;font-size:1.05rem}

/* ===== Screens & transitions ===== */
.screen{position:fixed;inset:0;display:none;overflow-y:auto;padding:24px 18px;opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .55s ease,transform .55s ease;z-index:2}
.screen.active{display:flex}
.screen.show{opacity:1;transform:none}
.wrap{margin:auto;width:100%;max-width:760px;text-align:center;padding:10px 0}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:28px;padding:32px 22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:560px}

/* ===== Buttons ===== */
.btn{font:inherit;font-size:1.1rem;cursor:pointer;border:0;border-radius:999px;padding:.85em 1.9em;color:#fff;
  transition:transform .2s,box-shadow .3s;touch-action:manipulation;margin-top:1rem}
.btn.primary{background:linear-gradient(135deg,#ff4d7d,#c9184a);box-shadow:0 8px 26px rgba(255,77,125,.45)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(255,77,125,.65)}
.btn.ghost{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.btn:active{transform:scale(.96)}
.btn:focus-visible,.icon-btn:focus-visible,.env:focus-visible,figure:focus-visible{outline:3px solid #fff;outline-offset:3px}
.row{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:110px}
#yesBtn{transform-origin:center;transition:font-size .3s,padding .3s,transform .2s}
#noBtn{transition:left .35s cubic-bezier(.3,1.4,.5,1),top .35s cubic-bezier(.3,1.4,.5,1),font-size .3s,padding .3s}
#noBtn.run{position:fixed;z-index:20;margin:0}
.icon-btn{position:fixed;z-index:30;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--glass);
  color:#fff;font-size:1.2rem;cursor:pointer;backdrop-filter:blur(0px)}
#mute{top:14px;right:14px}

/* ===== Welcome ===== */
.gift{font-size:clamp(5rem,20vw,8rem);animation:float 3.2s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(255,150,190,.9));margin-bottom:.3em}
@keyframes float{50%{transform:translateY(-16px) rotate(3deg)}}

/* ===== Floating hearts / confetti ===== */
#hearts{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.fh{position:absolute;bottom:-40px;opacity:0;animation:rise linear forwards;will-change:transform,opacity}
@keyframes rise{10%{opacity:.7}to{transform:translateY(-110vh) translateX(var(--dx)) rotate(var(--r));opacity:0}}
.pop{position:fixed;pointer-events:none;z-index:40;will-change:transform,opacity;animation:pop 1.3s ease-out forwards}
@keyframes pop{to{transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(var(--r));opacity:0}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}

/* ===== Special cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:1.2rem 0 .6rem}
.card{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:26px 18px;backdrop-filter:blur(10px);
  font-size:1.1rem;opacity:0;transform:translateY(24px);transition:transform .3s,box-shadow .3s,background .3s;position:relative}
.card::before{content:"♥";display:block;color:var(--rose);font-size:1.5rem;margin-bottom:.4em;animation:beat 1.6s ease-in-out infinite}
.screen.show .card{animation:in .7s ease forwards}
.screen.show .card:nth-child(2){animation-delay:.15s}.screen.show .card:nth-child(3){animation-delay:.3s}
.screen.show .card:nth-child(4){animation-delay:.45s}.screen.show .card:nth-child(5){animation-delay:.6s}
@keyframes in{to{opacity:1;transform:none}}
.card:hover{transform:translateY(-6px) scale(1.03);background:rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(255,60,120,.35)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}}

/* ===== Quiz ===== */
.options{display:grid;gap:12px}
.opt{font:inherit;font-size:1.05rem;color:#fff;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:.9em 1em;cursor:pointer;transition:.25s}
.opt:hover:not(:disabled){background:rgba(255,255,255,.25);transform:scale(1.02)}
.opt.picked{background:linear-gradient(135deg,#ff4d7d,#c9184a);border-color:transparent}
.opt:disabled{cursor:default;opacity:.7}.opt.picked:disabled{opacity:1}
.reply{min-height:2.6em;margin-top:1em;font-family:var(--script);font-size:1.5rem;color:var(--blush)}

/* ===== Timeline ===== */
.timeline{list-style:none;position:relative;text-align:left;padding:10px 0 10px 34px;margin:1rem auto;max-width:540px}
.timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(var(--rose),var(--violet))}
.timeline li{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin-bottom:16px;backdrop-filter:blur(8px);
  opacity:0;transform:translateX(-18px)}
.timeline li::before{content:"♥";position:absolute;left:-33px;top:12px;color:var(--rose);background:var(--plum);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.8rem}
.screen.show .timeline li{animation:slide .6s ease forwards}
.timeline li:nth-child(2){animation-delay:.12s!important}.timeline li:nth-child(3){animation-delay:.24s!important}
.timeline li:nth-child(4){animation-delay:.36s!important}.timeline li:nth-child(5){animation-delay:.48s!important}
@keyframes slide{to{opacity:1;transform:none}}
.timeline time{font-size:.85rem;color:var(--blush);letter-spacing:.08em;text-transform:uppercase}
.timeline h4{font-size:1.15rem;margin:.2em 0}.timeline p{opacity:.9}

/* ===== Gallery ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin:1rem 0}
.grid figure{background:var(--glass);border:1px solid var(--line);border-radius:20px;overflow:hidden;cursor:zoom-in;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .35s}
.grid figure:hover{transform:translateY(-6px) rotate(-.8deg)}
.grid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.grid figcaption{padding:12px;font-family:var(--script);font-size:1.25rem}
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(20,5,30,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s}
#lightbox[hidden]{display:none}
#lightbox.on{opacity:1}
#lightbox figure{max-width:min(90vw,560px);text-align:center;transform:scale(.92);transition:transform .35s}
#lightbox.on figure{transform:none}
#lightbox img{max-width:100%;max-height:75vh;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#lightbox figcaption{margin-top:12px;font-family:var(--script);font-size:1.6rem}
.lb-close{top:14px;right:14px}.lb-prev{left:12px;top:50%}.lb-next{right:12px;top:50%}

/* ===== Envelope ===== */
.env{position:relative;width:min(340px,86vw);height:220px;margin:2.4rem auto 1.6rem;cursor:pointer;transition:margin .6s,transform .3s}
.env:hover{transform:scale(1.03)}
.env .front,.env .flap{position:absolute;left:0;right:0;bottom:0}
.env .front{height:100%;background:linear-gradient(135deg,#ff8fab,#e0366b);border-radius:6px 6px 14px 14px;z-index:3;
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.env .flap{top:0;height:55%;background:#d62c60;transform-origin:top;z-index:4;transition:transform .6s,z-index 0s .3s;
  clip-path:polygon(0 0,100% 0,50% 100%);bottom:auto}
.paper{position:absolute;left:5%;right:5%;bottom:8px;height:88%;background:#fff8f2;color:#5a1a35;border-radius:10px;padding:18px;z-index:2;
  text-align:left;overflow:hidden;transition:transform .9s .35s ease,height .9s .35s ease;font-size:.95rem;line-height:1.6}
.paper p{margin-bottom:.9em}.sign{font-family:var(--script);font-size:1.5rem}
.env.open{height:auto;width:min(560px,92vw);cursor:default;transform:none;margin-top:1rem}
.env.open .flap{transform:rotateX(180deg);opacity:0;transition:transform .5s,opacity .5s .3s}
.env.open .front{opacity:0;transition:opacity .5s .2s}
.env.open .paper{position:relative;left:auto;right:auto;bottom:auto;height:auto;padding:26px 24px;z-index:5;animation:unfold .9s ease both;font-size:1.05rem}
@keyframes unfold{from{opacity:0;transform:translateY(60px) scale(.8)}to{opacity:1;transform:none}}

/* ===== Final ===== */
.beat{font-size:clamp(4rem,16vw,7rem);animation:beat 1.5s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,60,120,.9));margin:.2em 0}
#finalDone .big{animation:in 1s ease both}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card,.timeline li{opacity:1;transform:none}
}
.cake-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cake-hint {
  opacity: 0.85;
  margin-bottom: 10px;
}

.cake-box {
  position: relative;
  width: 220px;
  height: 190px;
  margin: 25px auto 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  user-select: none;
}

/* Candles */
.candles {
  display: flex;
  gap: 24px;
  z-index: 2;
  margin-bottom: -4px;
}

.candle {
  width: 10px;
  height: 36px;
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 4px,
    #ff6b8b 4px,
    #ff6b8b 8px
  );
  border-radius: 3px 3px 0 0;
  position: relative;
}

/* Flickering Flame */
.flame {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 18px;
  background: radial-gradient(circle at 50% 80%, #fff 10%, #ffeb3b 45%, #ff9800 85%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 12px #ff9800, 0 0 24px #ffeb3b;
  animation: flicker 0.4s infinite alternate;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.flame.out {
  opacity: 0;
  transform: translateX(-50%) scale(0.2);
  animation: none;
}

@keyframes flicker {
  0% { transform: translateX(-50%) scale(1) rotate(-2deg); }
  100% { transform: translateX(-50%) scale(1.08) rotate(2deg); }
}

/* Cake Tiers */
.cake-top {
  width: 120px;
  height: 36px;
  background: #ff8fa3;
  border-radius: 10px 10px 0 0;
  border-top: 6px solid #fff0f3; /* Frosting */
  box-shadow: inset 0 -4px rgba(0, 0, 0, 0.08);
}

.cake-middle {
  width: 160px;
  height: 42px;
  background: #ff758f;
  border-radius: 8px 8px 0 0;
  border-top: 6px solid #fff0f3;
  box-shadow: inset 0 -4px rgba(0, 0, 0, 0.08);
}

.cake-bottom {
  width: 200px;
  height: 46px;
  background: #ff4d6d;
  border-radius: 8px 8px 4px 4px;
  border-top: 6px solid #fff0f3;
}

.cake-plate {
  width: 230px;
  height: 10px;
  background: #e9ecef;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.wish-msg {
  font-weight: bold;
  font-size: 1.15rem;
  color: #ffccd5;
  margin: 10px 0 18px;
  animation: popIn 0.5s ease;
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}