:root{
  --bg-1: #0f1724;
  --accent-1: #ff6b9a;
  --accent-2: #ffd1e0;
  --muted: rgba(255,255,255,0.7);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,107,154,0.08), transparent 8%),
              radial-gradient(900px 500px at 90% 90%, rgba(255,209,224,0.06), transparent 10%),
              var(--bg-1);
  color: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* Background blobs */
.bg-blob{position:fixed;filter: blur(60px) saturate(120%);opacity:0.9;pointer-events:none;mix-blend-mode:screen}
.blob-1{width:520px;height:520px;background:linear-gradient(135deg,#ff6b9a,#ff9ccf);left:-120px;top:-80px}
.blob-2{width:420px;height:420px;background:linear-gradient(135deg,#ffd1e0,#ff9ccf);right:-100px;bottom:-120px}
.blob-3{width:260px;height:260px;background:linear-gradient(135deg,#ffb3d0,#ff6b9a);left:10%;bottom:10%}

/* Panels */
.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.center{display:flex;align-items:center;justify-content:center}

/* Card / glass (compact variants) */
.card{
  width:min(820px,92vw);
  max-width:1100px;
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.card.large{padding:28px}
.card.compact{padding:18px;max-width:720px} /* compact card for "You made my day" */

/* Typography */
.title{font-weight:700;margin:0 0 6px 0;font-size:20px;letter-spacing:0.2px}
.title.big{font-size:28px}
.subtitle{margin:0 0 12px 0;color:var(--muted);font-weight:400}

/* Input row */
.input-row{display:flex;gap:12px;align-items:center;justify-content:center}
input[type="password"]{
  min-width:160px;padding:10px 12px;border-radius:12px;border:none;outline:none;font-size:15px;
  background: rgba(255,255,255,0.03);color: #fff;box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.btn{border:none;padding:10px 16px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent-1),#ff8fb3);color:#081226;box-shadow:0 8px 24px rgba(255,107,154,0.18)}
.btn.yes{background:linear-gradient(90deg,#ff9ccf,#ffd1e0);color:#081226}
.btn.no{background:linear-gradient(90deg,#ffeef3,#ffd1e0);color:#081226;position:relative}

/* Button row */
.btn-row{display:flex;gap:18px;align-items:center;justify-content:center;position:relative;height:110px}
.btn-row .btn{min-width:110px;padding:12px 18px;font-size:15px}

/* Image stage (full-bleed layer) */
.image-stage{
  position:fixed;
  inset:0;
  z-index:12;
  pointer-events:none;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 20%);
}

/* flying image style */
.image-stage img{
  position:absolute;
  width:120px;height:auto;border-radius:12px;transform-origin:center;will-change:transform,opacity;
  pointer-events:none;box-shadow: 0 12px 30px rgba(2,6,23,0.6);border: 1px solid rgba(255,255,255,0.06);
}

/* Particles */
#particle-layer{position:fixed;inset:0;pointer-events:none;z-index:8}

/* Muted text */
.muted{color:rgba(255,255,255,0.6);font-size:14px;margin-top:12px}

/* Hidden helper */
.hidden{display:none}

/* Responsive */
@media (max-width:720px){
  .card{padding:14px;border-radius:12px}
  .title.big{font-size:22px}
  .btn-row{height:90px}
  .image-stage img{width:90px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}