.root-fonts{font-family:'Poppins',system-ui,Segoe UI,Arial}
:root{
  --burgundy:#7A1F3D;
  --burgundy-2:#800020;
  --pink:#ffd3e0;
  --gold:#d4af37;
  --bg:#fff5f7;
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
.root-fonts,body{font-family:'Poppins', 'Playfair Display', system-ui,Segoe UI,Arial;background:linear-gradient(180deg,#fff5f7,#fff);margin:0;color:#2b2b2b}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;background: radial-gradient(circle at 10% 20%, rgba(250,230,235,0.6), transparent 20%), linear-gradient(180deg,#fff5f7,#fff)}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:24px}
.screen{width:100%;max-width:900px;height:80vh;display:flex;align-items:center;justify-content:center;position:relative}
.hidden{display:none}
.card{background:linear-gradient(135deg,var(--glass),rgba(255,248,250,0.95));border-radius:18px;padding:28px;backdrop-filter:blur(6px);box-shadow:0 10px 40px rgba(122,31,61,0.12);text-align:center;width:100%;border:1px solid rgba(122,31,61,0.06)}
.title{color:var(--burgundy-2);margin:0 0 12px;font-size:1.8rem;font-family:'Playfair Display',serif}
.typed{color:var(--burgundy);min-height:3.2rem;font-weight:500}
.cta{background:linear-gradient(90deg,var(--burgundy-2),#91243a);color:#fff;padding:10px 18px;border-radius:12px;border:0;font-weight:700;cursor:pointer;margin-top:12px;box-shadow:0 6px 18px rgba(122,31,61,0.18)}

.panel{background:linear-gradient(180deg, rgba(255,245,248,0.95), rgba(255,255,255,0.98));border-radius:16px;padding:28px;text-align:center;box-shadow:0 12px 40px rgba(122,31,61,0.06);border:1px solid rgba(122,31,61,0.04)}
.panel h2{color:var(--burgundy-2);margin:0 0 8px;font-family:'Playfair Display',serif}
.sub{color:#6b6b6b;margin:0 0 18px}
.choices{display:flex;gap:14px;justify-content:center}
.yes{background:linear-gradient(90deg,#ffd3e0,#ffd6c7);color:var(--burgundy-2);border:0;padding:12px 28px;border-radius:999px;font-weight:800;cursor:pointer;transition:transform .18s, box-shadow .18s}
.yes:hover{transform:scale(1.06);box-shadow:0 10px 30px rgba(217,98,123,0.12)}
.no{background:#fff;border:2px solid var(--burgundy);color:var(--burgundy-2);padding:10px 22px;border-radius:999px;font-weight:700;cursor:pointer;position:relative}


.resultCard{background:linear-gradient(135deg,#fff, #fff7fb);padding:26px;border-radius:16px;text-align:center;box-shadow:0 14px 36px rgba(122,31,61,0.08)}
.resultCard h2{font-family:'Playfair Display',serif;color:var(--burgundy-2)}
#confetti, #hearts{position:absolute;right:8px;bottom:8px;width:180px;height:180px;pointer-events:none}

/* background heart container */
.bg-hearts{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;opacity:0.9}
.bg-hearts lottie-player{width:220px;height:220px;transform:translate(10px,10px);filter:drop-shadow(0 12px 20px rgba(122,31,61,0.14))}

/* Mobile first */
@media(min-width:700px){
  .card{padding:44px}
  .title{font-size:2.6rem}
  #hearts,#confetti{width:320px;height:320px}
  .bg-hearts lottie-player{width:320px;height:320px}
}

/* Gallery styles */
.galleryWrap{margin-top:22px;text-align:center}
.galleryTitle{color:var(--burgundy-2);font-family:'Playfair Display',serif;margin:10px 0}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:center}
.gallery img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:4px solid rgba(255,255,255,0.6);box-shadow:0 8px 20px rgba(122,31,61,0.08);cursor:pointer;transition:transform .25s, box-shadow .25s}
.gallery img:hover{transform:scale(1.03);box-shadow:0 18px 40px rgba(122,31,61,0.12)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1200;backdrop-filter:blur(4px)}
.lightbox img{max-width:92%;max-height:86%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}

/* tiny hearts that pop on click */
.pop-heart{position:fixed;pointer-events:none;font-size:20px;color:var(--burgundy-2);transform-origin:center;z-index:1300}

/* idle toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:linear-gradient(90deg,var(--pink),#fff);padding:10px 16px;border-radius:999px;border:1px solid rgba(122,31,61,0.06);box-shadow:0 8px 30px rgba(122,31,61,0.08);display:none;z-index:1400}
.toast.show{display:block}

/* playful small touches */
.typed .cursor{color:var(--burgundy)}