*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#fff6ee;
  --paper2:#f9e2d2;
  --rose:#d4235c;
  --rose-soft:#eca8b8;
  --rose-deep:#a80f43;
  --gold:#c8854a;
  --ink:#7a4a55;
  --muted:#a9808a;
}
html,body{height:100%}
body{
  font-family:'El Messiri',sans-serif;
  background:radial-gradient(120% 90% at 50% 18%,#fff8f1 0%,var(--paper) 40%,var(--paper2) 100%);
  color:var(--ink);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.fh{
  position:absolute;bottom:-6vh;color:var(--rose-soft);
  animation:rise var(--dur) linear infinite;animation-delay:var(--delay);
  opacity:0;user-select:none;
}
@keyframes rise{
  0%{transform:translateY(0) rotate(var(--rot));opacity:0}
  10%{opacity:.5}
  85%{opacity:.18}
  100%{transform:translateY(-112vh) rotate(calc(var(--rot) + 160deg));opacity:0}
}
.lock{
  position:relative;z-index:1;text-align:center;
  padding:34px 26px;width:min(92vw,420px);
  background:rgba(255,252,248,.66);
  border:1px solid rgba(201,107,130,.16);
  border-radius:28px;
  box-shadow:0 24px 70px -30px rgba(160,40,80,.35);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.lock__heart{
  position:relative;width:88px;margin:0 auto 22px;
  filter:drop-shadow(0 12px 22px rgba(168,15,64,.32));
  animation:beat 2.4s ease-in-out infinite;
}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}34%{transform:scale(1.05)}48%{transform:scale(1)}}
.lock__heart svg{display:block;width:100%;height:auto}
.lock__keyhole{
  position:absolute;left:50%;top:38%;transform:translate(-50%,0);
  width:11px;height:11px;border-radius:50%;
  background:#7c0a34;
  box-shadow:0 12px 0 -3px #7c0a34;
}
.lock__keyhole::after{
  content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:13px solid #7c0a34;
}
.lock__eyebrow{font-size:13.5px;color:var(--muted);letter-spacing:.02em;margin-bottom:8px}
.lock__title{
  font-family:'Aref Ruqaa',serif;font-weight:700;
  font-size:clamp(32px,8vw,42px);color:var(--rose);
  line-height:1.8;margin:0 0 6px;
  text-shadow:0 2px 18px rgba(212,35,92,.18);
}
.lock__hint{font-size:13px;color:var(--muted);margin-bottom:20px}
.dots{display:flex;justify-content:center;gap:16px;margin-bottom:24px;direction:ltr}
.dot{
  width:15px;height:15px;border-radius:50%;
  border:1.6px solid rgba(201,107,130,.5);
  transition:background .18s ease,transform .18s ease,border-color .18s;
}
.dot.on{background:var(--rose);border-color:var(--rose);transform:scale(1.15)}
.dots.err{animation:shake .5s ease}
.dots.err .dot{border-color:#c62828}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  width:min(78vw,270px);margin:0 auto;
  direction:ltr;
}
.pad button{
  height:58px;border-radius:18px;border:1px solid rgba(201,107,130,.2);
  background:rgba(255,255,255,.75);
  font-family:'El Messiri',sans-serif;font-size:21px;font-weight:600;color:var(--ink);
  cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(160,40,80,.22);
  transition:transform .12s ease,background .15s ease;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pad button:active{transform:scale(.93);background:#fdeef2}
.pad__ghost{visibility:hidden}
.pad__del{color:var(--muted)}
.lock__msg{min-height:22px;margin-top:16px;font-size:14px;color:var(--rose-deep);font-weight:600}
.lock.opened{animation:openGlow 1s ease forwards}
@keyframes openGlow{
  0%{box-shadow:0 24px 70px -30px rgba(160,40,80,.35)}
  100%{box-shadow:0 0 0 14px rgba(255,214,150,0),0 30px 90px -20px rgba(212,35,92,.5)}
}
.spark{
  position:fixed;pointer-events:none;z-index:9;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,214,150,0) 70%);
}
@media(max-width:380px){
  .lock{padding:26px 16px}
  .pad button{height:52px}
}