:root{
  --pink:#ffc0cb; --ink:#0a0c10; --pill:rgba(10,12,16,.65); --blur:8px;
  --radius:14px; --shadow-lg:0 12px 25px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.2);
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang TC", "Noto Sans TC", "Heiti TC", "Microsoft JhengHei",
             "PMingLiU", sans-serif;
}
html,body{ height:100%; margin:0; }
body{ background:var(--pink); }

/* --- 漂浮相片背景 --- */
.tilted-photos-bg{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.tilted-photos-bg .photo{
  --img:url(''); --x:50%; --y:50%; --r:0deg;
  position:absolute; left:var(--x); top:var(--y);
  width:clamp(120px,15vw,220px); aspect-ratio:3/4;
  background:#fff; border-radius:10px; box-shadow:var(--shadow-lg);
  transform: translate(-50%,-50%) rotate(var(--r)) scale(.92);
  transition: left 6s ease-in-out, top 6s ease-in-out, transform 6s ease-in-out;
  overflow:visible;
}
.tilted-photos-bg .photo::before{
  content:""; position:absolute; inset:8% 8% 16% 8%;
  background-image:var(--img); background-size:cover; background-position:center; border-radius:6px;
}
.tilted-photos-bg .caption{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  background: var(--pill); color:#fff; padding:.35rem .6rem; border-radius:999px;
  font:600 13px/1.2 var(--font-ui); white-space:nowrap;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}

/* --- 心型粒子畫布 --- */
#c{
  position: fixed; inset: 0; z-index: 1; display:block;
  transition: opacity .35s ease;
}
#c.is-hidden{ opacity:0; pointer-events:none; }

/* --- 前景 UI --- */
.ui-foreground{
  position: relative; z-index: 2; min-height:100dvh;
  display:grid; place-items:center;
  padding: max(24px, env(safe-area-inset-top))
           max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom))
           max(24px, env(safe-area-inset-left));
  box-sizing:border-box;
  transition: opacity .35s ease;
}
.ui-foreground.is-hidden{ opacity:0; pointer-events:none; }

.container{ width:min(800px, 92vw); display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }

#mainImage{
  max-width:min(420px, 80vw); width:100%; height:auto; display:block; margin:0 auto;
  transform: translateY(0); transition: transform .3s ease;
  border-radius: 12px; box-shadow: var(--shadow-lg);
  will-change: transform;
}

#question{
  margin:0; font: 800 clamp(24px, 6vw, 42px)/1.2 var(--font-ui); color:#fff;
  display:inline-block; padding:.7rem 1.2rem; border-radius: var(--radius);
  background: var(--pill); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  transform: translateY(0); transition: transform .3s ease; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  will-change: transform;
}

.buttons{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; position: relative; }
.buttons button{
  appearance:none; border:0; border-radius:18px; padding:.9rem 1.4rem; font:600 18px/1 var(--font-ui);
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .2s ease, opacity .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.12), inset 0 -6px 12px rgba(0,0,0,.15), inset 0 6px 12px rgba(255,255,255,.35);
  position: relative; will-change: transform;
}
.buttons button::after{ content:""; position:absolute; inset:6px 10px auto 10px; height:12px; border-radius:999px; background: rgba(255,255,255,.6); filter: blur(1px); }

#yes{ background: linear-gradient(180deg, #ff7aa5, #ff477e); color:#fff; }
#yes:hover{ transform: translateY(-1px) scale(1.03) rotate(-.4deg); }
#yes:active{ transform: translateY(1px) scale(.98); box-shadow: inset 0 6px 14px rgba(0,0,0,.2), inset 0 -4px 10px rgba(255,255,255,.3); }

#no{ background: linear-gradient(180deg, #ffffff, #f2f2f2); color:var(--ink); }
#no:hover{ transform: translateY(-1px) scale(1.02) rotate(.4deg); }
#no:active{ transform: translateY(1px) scale(.98); box-shadow: inset 0 6px 14px rgba(0,0,0,.12), inset 0 -4px 10px rgba(255,255,255,.4); }

/* 與 #yes 一致的主按鈕樣式 */
.btn-primary{
  background: linear-gradient(180deg, #ff7aa5, #ff477e); color:#fff;
  border-radius:18px; padding:.9rem 1.4rem; font:600 18px/1 var(--font-ui);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), inset 0 -6px 12px rgba(0,0,0,.15), inset 0 6px 12px rgba(255,255,255,.35);
  border:0; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .2s ease, opacity .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px) scale(1.03) rotate(-.4deg); }
.btn-primary:active{ transform: translateY(1px) scale(.98); box-shadow: inset 0 6px 14px rgba(0,0,0,.2), inset 0 -4px 10px rgba(255,255,255,.3); }

/* --- YES 畫面 --- */
.yes-screen{
  position: fixed; inset: 0; z-index: 9; display: none; place-items: center;
  background: rgba(0,0,0,.88); color: #fff; text-align: center; padding: 24px;
}
.yes-screen[aria-hidden="false"]{ display:grid; }
.yes-card{ max-width: min(720px, 92vw); }
.yes-text{ font: 800 clamp(30px,6.5vw,52px)/1.05 var(--font-ui); margin: 0 0 16px; }
.yes-image{ max-width: min(520px, 86vw); height: auto; display: block; margin: 0 auto 16px; border-radius: 12px; box-shadow: var(--shadow-lg); }

.mt-12{ margin-top:12px; }

/* 動畫減少偏好 */
@media (prefers-reduced-motion: reduce){
  .tilted-photos-bg .photo{ transition: none; }
  #mainImage, #question, #c{ transition: none; }
}