:root{
  --shadow: 0 25px 60px rgba(0,0,0,.35);
  --glass: rgba(255,255,255,.12);
  --glass2: rgba(255,255,255,.18);
  --stroke: rgba(255,255,255,.22);
  --txt: #fff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0b0b12;
  color:var(--txt);
  overflow:hidden;
}

/* ====== Views ====== */
.view{ position:fixed; inset:0; display:none; }
.view.active{ display:block; }

/* ====== View 1: Card ====== */
.card-stage{
  inset:0; display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(255,80,80,.35), transparent 60%),
    radial-gradient(900px 700px at 15% 75%, rgba(255,200,120,.25), transparent 55%),
    linear-gradient(180deg, #120916, #07070d);
  padding:24px;
}

.card-wrap{
  width:min(920px, 92vw);
  aspect-ratio: 16/9;
  perspective: 1400px;
  position:relative;
}

.card{
  width:100%; height:100%;
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition: transform 1.2s cubic-bezier(.34,.1,.68,.55);
  cursor:pointer;
  filter: drop-shadow(var(--shadow));
  border-radius:22px;
  outline: 1px solid rgba(255,255,255,.14);
  overflow:hidden;
}

/* Front */
.card-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background:#111;
  display:grid;
  place-items:center;
}
.card-front{
  background:
    radial-gradient(1200px 800px at 30% 30%, rgba(255,255,255,.08), transparent 55%),
    #1a0f14;
}
.card-front img{
  width:100%; height:100%;
  object-fit:cover;
  transform: translateZ(1px);
  user-select:none; -webkit-user-drag:none;
  transition: filter 1.2s ease;
}

/* Inside (back) */
.card-back{
  transform: rotateY(180deg);
  background:
    radial-gradient(900px 700px at 50% 40%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,70,70,.25), rgba(255,200,120,.15)),
    #130a10;
  padding:20px;
}
.inside{
  height:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  display:none;
  place-items:center;
  text-align:center;
  padding:24px;
  animation: slideIn .8s ease 0.4s both;
  transform: scaleX(-1);
}
.inside h1{ margin:0 0 8px; font-size: clamp(20px, 3vw, 34px); }
.inside p{ margin:0; opacity:.9; font-size: clamp(14px, 2.2vw, 18px); line-height:1.4; }

.hint{
  margin-top:14px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size:14px;
  opacity:.95;
  animation: pulse 1.5s ease-in-out infinite 0.6s;
}

.card.open{
  transform: rotateY(180deg) scale(1.02);
}

.card.open .card-front img{
  filter: blur(2px) brightness(.8);
}

@keyframes slideIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes pulse{
  0%, 100%{ transform: scale(1); opacity:.95; }
  50%{ transform: scale(1.05); opacity:1; }
}

/* Sparkles */
.spark{
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 35%, rgba(255,225,170,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 75%, rgba(255,120,120,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 60%, rgba(255,255,255,.45) 0 1.5px, transparent 3px);
  opacity:.35;
  filter: blur(.2px);
  animation: float 10s linear infinite;
  pointer-events:none;
}
@keyframes float{
  from{ transform: translate3d(0,0,0) rotate(0deg); }
  to{ transform: translate3d(2%, -2%, 0) rotate(360deg); }
}

/* ====== View 2: Main ====== */
.main{
  inset:0;
  background:#000;
}
.scene{
  position:absolute; inset:0;
  background:#000;
}
.scene img{
  width:100%; height:100%;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
  filter: contrast(1.03) saturate(1.05);
  transform: scale(1.02);
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(1200px 800px at 50% 40%, transparent 30%, rgba(0,0,0,.55) 78%);
  pointer-events:none;
}

/* Envelopes layer */
.envelopes{
  position:absolute; inset:0;
  pointer-events:none;
}
.env{
  position:absolute;
  width: min(62px, 12vw);
  height: min(82px, 16vw);
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(255,225,170,.15);
  box-shadow: none;
  transform: translate(-50%,-50%) rotate(var(--r, 0deg));
  pointer-events:auto;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .18s ease, filter .18s ease;
  overflow:hidden;
  opacity: 0.3;
}
.env::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(140px 120px at 30% 30%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(160px 140px at 70% 70%, rgba(255,215,140,.18), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.env::after{
  content:"";
  display:none;
}
.env:hover{ transform: translate(-50%,-55%) rotate(var(--r, 0deg)) scale(1.04); filter: brightness(1.06); }
.env.locked{
  opacity:.45;
  filter: grayscale(.25);
  cursor:not-allowed;
}

/* Top UI */
.topbar{
  position:absolute; left:16px; right:16px; top:14px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  pointer-events:none;
}
.badge{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  font-size:14px;
  max-width:min(560px, 92vw);
}
.badge b{ font-weight:800 }
.btn{
  pointer-events:auto;
  border:none;
  border-radius:999px;
  padding:10px 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16); }
.btn:active{ transform: translateY(0px) scale(.99); }

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.modal.show{ display:grid; }
.dialog{
  width:min(500px, 95vw);
  max-height:90vh;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(255,70,70,.22), rgba(255,200,120,.14)),
    rgba(0,0,0,.35);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dialog-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.dialog-head h2{
  margin:0;
  font-size:14px;
  letter-spacing:.1px;
}
.dialog-body{
  padding:12px;
  overflow-y:auto;
  flex:1;
}
.wish{
  margin:0;
  font-size: clamp(13px, 2vw, 16px);
  line-height:1.4;
  font-weight:600;
  text-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.media{
  margin-top:10px;
  display:none;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  background: rgba(0,0,0,.15);
}
.media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  max-height:200px;
}
.note{
  margin:12px 0 0;
  opacity:.85;
  font-size:13px;
  line-height:1.4;
}
.row{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:10px;
}
.row .btn{ background: rgba(0,0,0,.25); }
.small{
  opacity:.8; font-size:12px;
}

/* Tiny snowfall (simple) */
.snow{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 90px 110px, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 160px 60px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 220px 140px, rgba(255,255,255,.6), transparent 60%);
  background-size: 260px 200px;
  animation: snow 7s linear infinite;
  filter: blur(.15px);
}
@keyframes snow{
  from{ transform: translateY(-20px); }
  to{ transform: translateY(220px); }
}

/* Falling cherry blossoms */
.petals{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.petal{
  position:absolute;
  opacity:0.8;
  animation: fall-petal linear infinite;
  animation-duration: var(--duration, 12s);
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.15));
}

/* Petal shapes with 5 petals */
.petal::before,
.petal::after{
  content:"";
  position:absolute;
  border-radius:50% 0;
  opacity:0.95;
}

.petal::before{
  width:14px;
  height:14px;
  top:0;
  left:3px;
}

.petal::after{
  width:14px;
  height:14px;
  top:3px;
  left:0;
}

/* Different color variations - lighter colors */
.petal:nth-child(1)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFB3D9 100%); }
.petal:nth-child(1)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFCCE5 100%); }

.petal:nth-child(2)::before { background:linear-gradient(135deg, #FFF0F5 0%, #FFD1E8 100%); }
.petal:nth-child(2)::after { background:linear-gradient(135deg, #FFF5FA 0%, #FFE0F0 100%); }

.petal:nth-child(3)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFBDD9 100%); }
.petal:nth-child(3)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFD1E5 100%); }

.petal:nth-child(4)::before { background:linear-gradient(135deg, #FFE8ED 0%, #FFC9DF 100%); }
.petal:nth-child(4)::after { background:linear-gradient(135deg, #FFF3F8 0%, #FFE0F0 100%); }

.petal:nth-child(5)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFB3D9 100%); }
.petal:nth-child(5)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFD1E5 100%); }

.petal:nth-child(6)::before { background:linear-gradient(135deg, #FFF0F5 0%, #FFD1E8 100%); }
.petal:nth-child(6)::after { background:linear-gradient(135deg, #FFF5FA 0%, #FFE5F3 100%); }

.petal:nth-child(7)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFCCE5 100%); }
.petal:nth-child(7)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFD1E5 100%); }

.petal:nth-child(8)::before { background:linear-gradient(135deg, #FFE8ED 0%, #FFBDD9 100%); }
.petal:nth-child(8)::after { background:linear-gradient(135deg, #FFF3F8 0%, #FFE0F0 100%); }

.petal:nth-child(9)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFC9DF 100%); }
.petal:nth-child(9)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFE0F0 100%); }

.petal:nth-child(10)::before { background:linear-gradient(135deg, #FFF0F5 0%, #FFB3D9 100%); }
.petal:nth-child(10)::after { background:linear-gradient(135deg, #FFF5FA 0%, #FFD1E5 100%); }

.petal:nth-child(11)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFD1E8 100%); }
.petal:nth-child(11)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFE0F0 100%); }

.petal:nth-child(12)::before { background:linear-gradient(135deg, #FFE8ED 0%, #FFCCE5 100%); }
.petal:nth-child(12)::after { background:linear-gradient(135deg, #FFF3F8 0%, #FFD1E5 100%); }

.petal:nth-child(13)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFBDD9 100%); }
.petal:nth-child(13)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFE0F0 100%); }

.petal:nth-child(14)::before { background:linear-gradient(135deg, #FFF0F5 0%, #FFC9DF 100%); }
.petal:nth-child(14)::after { background:linear-gradient(135deg, #FFF5FA 0%, #FFD1E5 100%); }

.petal:nth-child(15)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFD1E8 100%); }
.petal:nth-child(15)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFE5F3 100%); }

.petal:nth-child(16)::before { background:linear-gradient(135deg, #FFE8ED 0%, #FFCCE5 100%); }
.petal:nth-child(16)::after { background:linear-gradient(135deg, #FFF3F8 0%, #FFE0F0 100%); }

.petal:nth-child(17)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFB3D9 100%); }
.petal:nth-child(17)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFD1E5 100%); }

.petal:nth-child(18)::before { background:linear-gradient(135deg, #FFF0F5 0%, #FFBDD9 100%); }
.petal:nth-child(18)::after { background:linear-gradient(135deg, #FFF5FA 0%, #FFE0F0 100%); }

.petal:nth-child(19)::before { background:linear-gradient(135deg, #FFD9E3 0%, #FFD1E8 100%); }
.petal:nth-child(19)::after { background:linear-gradient(135deg, #FFE8ED 0%, #FFE5F3 100%); }

/* Position & Animation - Random continuous falling */
/* Styles will be applied dynamically via JavaScript */

@keyframes fall-petal{
  0%{
    top:-30px;
    opacity:0.8;
    transform: translateX(0) rotateZ(0deg) rotateX(0deg);
  }
  25%{
    opacity:0.8;
  }
  75%{
    opacity:0.8;
  }
  100%{
    top:100vh;
    opacity:0;
    transform: translateX(60px) rotateZ(720deg) rotateX(360deg);
  }
}