:root{
  --pink:#ffc7dd;
  --pink-deep:#ff8fb8;
  --pink-soft:#ffe4ef;
  --green:#b7e4c7;      /* smiski green */
  --green-deep:#7cc99a;
  --green-soft:#e3f6ea;
  --ink:#6b4a58;
  --white:#fffafc;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Quicksand',sans-serif;
  background:linear-gradient(160deg,var(--pink-soft) 0%,var(--green-soft) 100%);
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
}

/* Floating hearts */
.hearts-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.float-heart{position:absolute;bottom:-40px;font-size:20px;opacity:.6;animation:floatUp linear forwards;}
@keyframes floatUp{
  to{transform:translateY(-110vh) rotate(360deg);opacity:0;}
}

/* Screens */
.screen{
  display:none;position:relative;z-index:1;
  min-height:100vh;width:100%;
  align-items:center;justify-content:center;flex-direction:column;
  padding:24px;
}
.screen.active{display:flex;animation:fadeIn .6s ease;}
@keyframes fadeIn{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:scale(1);}}

/* ===== Lock card ===== */
.lock-card{
  background:var(--white);
  border-radius:32px;
  padding:38px 30px 34px;
  box-shadow:0 20px 50px rgba(255,143,184,.28);
  text-align:center;
  max-width:360px;width:100%;
  border:3px solid var(--pink);
  animation:pop .6s cubic-bezier(.18,1.3,.4,1);
}
@keyframes pop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}

.greeting{
  font-family:'Dancing Script',cursive;
  font-size:34px;font-weight:700;
  color:var(--pink-deep);
  line-height:1.1;
}
.sub-greeting{margin-top:8px;font-size:15px;color:var(--green-deep);font-weight:600;}

.pin-display{display:flex;gap:12px;justify-content:center;margin:28px 0 8px;}
.pin-dot{
  width:16px;height:16px;border-radius:50%;
  background:var(--pink-soft);border:2px solid var(--pink);
  transition:all .25s ease;
}
.pin-dot.filled{background:var(--green-deep);border-color:var(--green-deep);transform:scale(1.15);}

.error-msg{height:18px;font-size:13px;color:var(--pink-deep);font-weight:600;opacity:0;transition:opacity .2s;}
.error-msg.show{opacity:1;animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}

.keypad{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-top:22px;
}
.key{
  font-family:'Quicksand',sans-serif;
  font-size:24px;font-weight:700;
  aspect-ratio:1;border:none;border-radius:22px;
  background:linear-gradient(145deg,var(--pink-soft),var(--white));
  color:var(--ink);
  box-shadow:0 6px 0 var(--pink),0 8px 14px rgba(255,143,184,.25);
  cursor:pointer;transition:transform .08s,box-shadow .08s;
}
.key:active{transform:translateY(5px);box-shadow:0 2px 0 var(--pink),0 3px 6px rgba(255,143,184,.25);}
.key-fn{
  font-size:20px;color:var(--green-deep);
  background:linear-gradient(145deg,var(--green-soft),var(--white));
  box-shadow:0 6px 0 var(--green),0 8px 14px rgba(124,201,154,.25);
}
.key-fn:active{box-shadow:0 2px 0 var(--green),0 3px 6px rgba(124,201,154,.25);}

/* ===== Loading ===== */
.loader{text-align:center;}
.loader-heart{font-size:70px;animation:beat 1s infinite ease-in-out;}
@keyframes beat{0%,100%{transform:scale(1);}20%{transform:scale(1.25);}40%{transform:scale(1);}}
.loader-text{margin-top:16px;font-size:18px;font-weight:600;color:var(--pink-deep);}
.loader-dots{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.loader-dots span{width:12px;height:12px;border-radius:50%;background:var(--green-deep);animation:bounce 1.2s infinite;}
.loader-dots span:nth-child(2){animation-delay:.2s;}
.loader-dots span:nth-child(3){animation-delay:.4s;}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.5;}40%{transform:scale(1);opacity:1;}}

/* ===== Gallery ===== */
#galleryScreen{justify-content:flex-start;padding-top:40px;}
.gallery-header{text-align:center;margin-bottom:30px;}
.gallery-header h1{
  font-family:'Dancing Script',cursive;
  font-size:40px;color:var(--pink-deep);
}
.gallery-header p{margin-top:6px;color:var(--green-deep);font-weight:600;}

.timeline{
  width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:34px;
}
.moment{
  background:var(--white);
  border-radius:26px;overflow:hidden;
  box-shadow:0 14px 34px rgba(255,143,184,.22);
  border:3px solid var(--green);
  opacity:0;transform:translateY(30px);
}
.moment.reveal{animation:riseIn .7s forwards cubic-bezier(.2,1,.3,1);}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}
.moment:nth-child(even){border-color:var(--pink);}

.moment-img{width:100%;display:block;background:var(--pink-soft);}
.moment-info{padding:16px 20px 18px;}
.moment-date{font-family:'Dancing Script',cursive;font-size:26px;color:var(--pink-deep);font-weight:700;}
.moment-meta{margin-top:4px;font-size:14px;color:var(--green-deep);font-weight:600;display:flex;flex-wrap:wrap;gap:12px;}
.moment-meta span{display:inline-flex;align-items:center;gap:4px;}

.gallery-footer{
  text-align:center;margin:44px 0 30px;
  font-family:'Dancing Script',cursive;font-size:24px;color:var(--pink-deep);
}

@media(max-width:400px){
  .greeting{font-size:28px;}
  .key{font-size:21px;border-radius:18px;}
}