:root{
  --bg1:#120018;
  --bg2:#2b003a;
  --accent:#ff4d6d;
  --accent2:#ffb3c1;
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --glass:rgba(255,255,255,.14);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  min-height:100svh;
  background:
    radial-gradient(1200px 700px at 20% 10%, #ff4d6d33, transparent 55%),
    radial-gradient(900px 600px at 80% 20%, #c77dff22, transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}
.wrap{max-width:980px;margin:0 auto;padding:18px 16px 40px;}
.top{display:flex;gap:12px;align-items:center;margin:8px 0 18px;}
.badge{
  width:52px;height:52px;display:grid;place-items:center;
  background: linear-gradient(135deg, #ff4d6d, #c77dff);
  border-radius: 16px;box-shadow: var(--shadow);font-size:24px;
}
.title h1{margin:0;font-size:clamp(22px,4.2vw,34px);letter-spacing:.2px;}
.subtitle{margin:4px 0 0;color:var(--muted);}
.intro,.card-area{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.intro{text-align:center;}
.intro h2{margin:14px 0 8px;font-size:clamp(20px,4vw,28px);}
.name{color:var(--accent2)}
.intro-text{color:var(--muted);margin:0 0 14px}
.tiny{margin:14px 0 0;font-size:12px;color:rgba(255,255,255,.65);}
.btn{
  appearance:none;border:0;padding:12px 16px;border-radius:16px;
  color:#1a001f;font-weight:700;
  background: linear-gradient(135deg, #ffb3c1, #ff4d6d);
  box-shadow: 0 12px 30px rgba(255,77,109,.28);
  cursor:pointer;
}
.btn:active{transform: translateY(1px)}
.btn.ghost{
  background: transparent;color: var(--text);
  border: 1px solid rgba(255,255,255,.22);box-shadow:none;
}
.envelope{width:140px;height:96px;margin:6px auto 8px;position:relative;}
.env-body{
  position:absolute; inset:0;border-radius:18px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
}
.env-top{
  position:absolute; left:0; right:0; top:-2px;height:55px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.18);border-bottom:0;
  border-radius:18px 18px 10px 10px;
}
.seal{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-10%);
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:999px;
  background: linear-gradient(135deg, #ff4d6d, #c77dff);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.card-area{margin-top:16px;text-align:center;}
.hidden{display:none;}
.card{
  width: min(520px, 92vw);
  height: min(720px, 85vh);
  margin: 18px auto 8px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  border-radius: var(--radius);
}


.card.is-flipped{transform: rotateY(180deg);}
.card-face{
  position:absolute;inset:0;border-radius:var(--radius);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  backface-visibility:hidden;overflow:hidden;
}
.card-front{display:grid;place-items:center;}
.front-inner{padding:22px;}
.front-kicker{margin:0 0 10px;color:rgba(255,255,255,.75);letter-spacing:.4px;}
.card-front h3{margin:0;font-size:clamp(32px,7vw,48px);}
.front-line{margin:10px 0 0;color:rgba(255,255,255,.75);}
.hearts{margin-top:18px;font-size:28px;display:flex;gap:10px;justify-content:center;opacity:.9;}
.hearts span{animation: float 2.8s ease-in-out infinite;}
.hearts span:nth-child(2){animation-delay:.2s}
.hearts span:nth-child(3){animation-delay:.4s}
.hearts span:nth-child(4){animation-delay:.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.card-back{
  transform: rotateY(180deg);
  text-align: left;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.back-inner{
  padding: 18px 18px 16px;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-back h3{margin:6px 0 0;font-size:22px;}
.love-list{margin:0;padding-left:18px;color:rgba(255,255,255,.88);line-height:1.5;}
.note{
  margin-top:6px;padding:14px;border-radius:18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
}
.note p{margin:0 0 10px;color:rgba(255,255,255,.88);}
.sig{margin:0;font-weight:700;color: var(--accent2);}
.gallery{margin-top:4px;padding-top:4px;}
.gallery h4{margin:6px 0 10px;color:rgba(255,255,255,.92);}
.grid{display:grid;grid-template-columns: repeat(2,1fr);gap:10px;}
.grid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:16px;border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.tap-hint{margin:0 0 10px;color:rgba(255,255,255,.7);}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:99;}
@media (max-width: 480px){
  .grid{
    grid-template-columns: 1fr;
  }
}
.confetti{
  mix-blend-mode: screen;
}
/* --- Layout polish: avoid nested scrollbars --- */

/* The big purple panel that holds the card */
.container, .wrap, .page, main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* The card itself */
.card {
  width: min(520px, 92vw);
  margin: 0 auto;
}

/* If your card has an inner content panel that scrolls, stop it on desktop */
@media (min-width: 900px) {
  .card,
  .card-face,
  .card-inner,
  .card-content,
  .front,
  .back {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* --- Photo grid: clean, consistent tiles --- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;      /* perfect squares */
  object-fit: cover;         /* crop nicely */
  border-radius: 14px;
  display: block;
}

/* Give the photos more room on desktop */
@media (min-width: 900px) {
  .card {
    width: min(640px, 70vw);
  }
  .photo-grid {
    gap: 14px;
  }
}
h1, .title {
  letter-spacing: -0.02em;
}

.subtitle {
  opacity: 0.85;
}

.section-title {
  margin: 18px 0 10px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

li {
  line-height: 1.5;
  margin: 8px 0;
}

.quote {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  opacity: 0.95;
}