/* Mobile-first glassmorphism + breathing gradient background */

:root{
  --bg-1: #2b003b;
  --bg-2: #7a0037;
  --bg-3: #ff2d95;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --muted: rgba(255,255,255,0.72);
  --accent: rgba(255,255,255,0.9);
  --glass-radius: 18px;
  --card-padding: 18px;
  --gap: 14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,body,#app{height:100%;margin:0}
body{
  background: linear-gradient(120deg,var(--bg-1),var(--bg-2) 40%,var(--bg-3));
  color:var(--accent);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-sizing:border-box;
  overflow:hidden;
}

/* Breath background */
.breath-bg{
  position:fixed;
  inset:0;
  z-index:0;
  filter:blur(60px) saturate(120%);
  mix-blend-mode:overlay;
  background:
    radial-gradient(800px 600px at 10% 20%, rgba(255,45,149,0.18), transparent 10%),
    radial-gradient(700px 500px at 90% 80%, rgba(122,0,55,0.14), transparent 8%);
  animation: breathe 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.03) translateY(-10px)}
  100%{transform:scale(1) translateY(0)}
}

/* Initial Blur State (Aesthetic Start) */
.initial-blur {
  filter: blur(12px) brightness(0.8);
  transform: scale(1.1);
  transition: filter 1.5s ease, transform 1.5s ease;
}

.container{
  width:100%;
  max-width:520px;
  z-index:5;
  position:relative;
}

/* Scenes */
.scene{display:none}
.scene.active{display:block}

/* Glass card styling */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: var(--card-padding);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  color:var(--accent);
  position:relative;
}

/* Sizes */
.big-card{padding:22px; min-height:300px}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* Overlay */
.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:40;padding:20px;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
}
.overlay-card{max-width:360px;width:100%;text-align:center;}

/* Buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.03); font-weight:600;
  backdrop-filter: blur(6px);
}
.btn.subtle{opacity:0.85;font-weight:500;padding:8px 12px}

/* Meter */
.meter-wrap{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.meter-track{
  width:100%;height:18px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.03); overflow:hidden;position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.meter-fill{
  height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#ff9bc5 0%, #ff2d95 50%, #7a00b9 100%);
  box-shadow: 0 6px 18px rgba(255,45,149,0.14);
  transition:width 0.12s linear;
}
.meter-tips{font-weight:700;letter-spacing:0.6px}

/* Envelope (Updated for better visibility/gloss) */
.envelope{width:220px;height:140px;position:relative;cursor:pointer}
.env-top{
  position:absolute;left:0;right:0;top:0;height:60px;
  /* Brighter gradient and glossier highlight */
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  border-bottom:1px solid rgba(255,255,255,0.15); 
  /* Top white edge shine */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  transform-origin:center;
  border-top-left-radius:12px;border-top-right-radius:12px;
  backdrop-filter: blur(4px);
}
.env-body{
  position:absolute;left:0;right:0;bottom:0;height:110px;
  /* More visible frosty body */
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border-radius:12px;
  /* Stronger border and depth shadow */
  border: 1px solid rgba(255,255,255,0.25); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(4px);
}
.env-seal{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg, #ff2d95, #7a00b9);box-shadow:0 8px 26px rgba(122,0,185,0.2)}

/* Deck and Cards (Larger Size) */
.deck{
  position:relative;
  width:360px; /* Bigger */
  height:280px; 
  display:flex;align-items:center;justify-content:center;overflow:visible
}
.card-item{
  position:absolute;
  width:300px; /* Bigger */
  height:220px;
  border-radius:16px;display:flex;flex-direction:column;padding:18px;
  justify-content:space-between;cursor:pointer;
  user-select:none;-webkit-user-select:none;transform-origin:center;
  font-size: 1.1em;
}
.card-item .title{font-weight:700;font-size:18px}
.card-item .body{font-size:13px;opacity:0.9}

/* Footer */
.footer{position:fixed;left:16px;bottom:16px;padding:8px 12px;border-radius:12px;opacity:0.85;font-size:12px}

/* Helper classes */
.hidden{display:none!important}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.card-image-box {
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
}

/* Scene 4: Glossy GIF Card */
.video-card {
  padding: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; 
  /* Glossy Effect */
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6); 
  box-shadow: 0 15px 35px rgba(0,0,0,0.2), inset 0 0 20px rgba(255,255,255,0.4);
  position: relative;
}
.video-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
  z-index: 10;
}
.video-card img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; display: block;
}

/* Emoji Particles */
.emoji-particle {
  position: fixed;
  pointer-events: none;
  font-size: 40px; 
  z-index: 100;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.6));
  will-change: transform, opacity;
}

/* Final Message Overlay (Static Color & Glassy Platform) */
#finalOverlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  background: rgba(0, 0, 0, 0.1); 
}

.final-msg-card {
  max-width: 85%; 
  text-align: center; 
  padding: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 6px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
}

.final-text {
  font-size: 2.2rem; 
  font-weight: 800; 
  line-height: 1.4;
  color: var(--accent);
  text-shadow: 0 5px 15px rgba(255, 45, 149, 0.3);
}

@media (min-width:520px){
  .big-card{min-height:380px}
  .deck{width:420px;height:300px}
}