:root{--bg:#1b1b2f;--card:#fff;--accent:#ff4d6d;--muted:#9aa0a6}
*{box-sizing:border-box}html,body,#page{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;color:rgba(11,12,17,.95);background:radial-gradient(1200px 500px at 10% 15%,#2b2740 0%,transparent 20%),linear-gradient(180deg,#0f0f1a 0%,#14121b 100%);display:grid;place-items:center;padding:28px}
.card{width:min(720px,94vw);background:linear-gradient(180deg,rgba(255,255,255,.98),#fff);border-radius:20px;padding:34px 36px;box-shadow:0 12px 40px rgba(10,12,20,.45);text-align:center}
h1{margin:0 0 8px;font-size:2rem;letter-spacing:-0.02em;color:#0b1020}
p{margin:.5rem 0;color:var(--muted)}
.buttons{position:relative;height:124px;margin:22px 0 6px;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:nowrap}
.btn{appearance:none;border:0;padding:14px 22px;border-radius:999px;font-size:1.05rem;cursor:pointer;user-select:none;transition:transform .18s cubic-bezier(.2,.9,.4,1),box-shadow .18s,left .28s cubic-bezier(.2,.9,.2,1),top .28s cubic-bezier(.2,.9,.2,1);box-shadow:0 8px 20px rgba(12,16,24,.12);flex:0 1 auto;min-width:0}
.btn:focus{outline:4px solid rgba(255,77,109,.14);transform:translateY(-2px)}
.btn-yes{background:linear-gradient(135deg,#ff7a9b,#ff4d6d);color:white}
.btn-no{background:transparent;border:2px solid #e6e6e9;color:#2b2d33;font-weight:600;padding:12px 18px}
.option-plain{display:inline-flex;gap:.5rem;align-items:center;margin-top:8px;color:var(--muted);font-size:.92rem}
.hint{margin-top:12px;color:var(--muted);font-size:.86rem}
.celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:72}

/* overlay message that appears over the video/modal */
.modal-message{position:fixed;left:50%;top:14vh;transform:translateX(-50%);background:linear-gradient(180deg,#fff,#fff);padding:14px 20px;border-radius:12px;box-shadow:0 18px 50px rgba(6,8,20,.5);color:#111;font-weight:700;z-index:76;pointer-events:none}

@media (max-width:520px){
  .buttons{height:110px;gap:.45rem}
  .card{padding:22px}
  .btn{padding:12px 14px;font-size:.98rem}
}
@media (max-width:360px){
  /* extremely small screens: stack to keep content readable */
  .buttons{flex-direction:column;height:160px;gap:14px}
  .btn{width:100%}
} 
.heart{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%) scale(.8);opacity:0;will-change:transform,opacity}
.heart::before,.heart::after{content:"";position:absolute;width:100%;height:100%;background:conic-gradient(from 120deg,#ff9bb8,#ff4d6d);border-radius:50%}
.heart::before{transform:translateX(-50%) rotate(-45deg)}
.heart::after{transform:translateX(0%) rotate(45deg)}

/* video modal */
.video-modal{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(6,8,15,.45),rgba(6,8,15,.6));backdrop-filter:blur(6px);z-index:60;padding:24px;pointer-events:auto}
.video-modal[aria-hidden="true"]{display:none}
.video-content{background:linear-gradient(180deg,#fff,#fff);border-radius:14px;padding:18px;max-width:920px;width:min(96vw,760px);box-shadow:0 18px 50px rgba(6,8,20,.6);display:flex;gap:12px;align-items:center;flex-direction:column}
.video-content video{width:100%;height:auto;border-radius:10px;background:#000;display:block}
.btn-close{background:transparent;border:0;color:#334;cursor:pointer;margin-top:8px;font-weight:700}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:520px){.buttons{height:160px;flex-direction:column;gap:14px}.card{padding:22px}.btn{width:100%}}