/* ==========================================================================
   password.css — §4.1 / §4.2
   ========================================================================== */

#password-screen,
#countdown-screen {
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  background: var(--pastel-pink);
}

/* --------------------------------------------------------------------------
   Plaid. Built from stacked repeating gradients — no raster texture. (§4.1)
   -------------------------------------------------------------------------- */
.plaid {
  position: absolute;
  inset: 0;
  background-color: var(--pastel-pink);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .55) 0 22px,
      transparent 22px 68px),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .55) 0 22px,
      transparent 22px 68px),
    repeating-linear-gradient(90deg,
      rgba(223, 160, 179, .38) 0 8px,
      transparent 8px 68px),
    repeating-linear-gradient(0deg,
      rgba(223, 160, 179, .38) 0 8px,
      transparent 8px 68px),
    repeating-linear-gradient(90deg,
      rgba(243, 195, 210, .5) 0 3px,
      transparent 3px 34px),
    repeating-linear-gradient(0deg,
      rgba(243, 195, 210, .5) 0 3px,
      transparent 3px 34px);
}
.plaid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    transparent 30%,
    rgba(223, 160, 179, .30) 100%);
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.pw-card {
  position: relative;
  width: min(384px, 100%);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  text-align: center;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-strong);
}

.pw-eyebrow {
  font-family: var(--font-cute);
  font-size: 20px;
  color: var(--dusty-pink);
  margin: 0 0 var(--sp-2);
}

.pw-lock {
  width: 46px;
  margin: 0 auto var(--sp-2);
  color: var(--wine);
  transition: transform var(--dur-medium) var(--ease-bounce);
}
.pw-lock svg { width: 100%; height: auto; }

.pw-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.1;
  color: var(--burgundy);
  margin: 0 0 var(--sp);
}

.pw-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wine);
  opacity: .82;
  margin: 0 auto var(--sp-3);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Heart indicators
   -------------------------------------------------------------------------- */
.pw-hearts {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.pw-heart {
  width: 26px;
  height: 24px;
  display: block;
}
.pw-heart svg {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: var(--dusty-pink);
  stroke-width: 2;
  transition:
    fill      var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-bounce);
}
.pw-heart.is-filled svg {
  fill: var(--wine);
  stroke: var(--wine);
  animation: heart-pop 380ms var(--ease-bounce);
}
@keyframes heart-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.42); }
  100% { transform: scale(1); }
}

/* correct-code flourish (§4.1, outcome 1) */
.pw-hearts.is-correct .pw-heart svg {
  fill: var(--gold);
  stroke: var(--gold);
  filter: drop-shadow(0 0 10px rgba(205, 163, 92, .95));
  animation: heart-glow 900ms var(--ease-premium);
}
.pw-hearts.is-correct .pw-heart:nth-child(2) svg { animation-delay: 70ms; }
.pw-hearts.is-correct .pw-heart:nth-child(3) svg { animation-delay: 140ms; }
.pw-hearts.is-correct .pw-heart:nth-child(4) svg { animation-delay: 210ms; }
@keyframes heart-glow {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55) rotate(-6deg); }
  100% { transform: scale(1); }
}

.pw-lock.is-open {
  transform: translateY(-6px) rotate(-14deg) scale(1.18);
  color: var(--gold);
  filter: drop-shadow(0 0 14px rgba(205, 163, 92, .8));
}

/* --------------------------------------------------------------------------
   Keypad
   -------------------------------------------------------------------------- */
.pw-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--sp-2);
}

.key {
  appearance: none;
  cursor: pointer;
  height: 58px;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  color: var(--burgundy);
  background: var(--cream);
  border: 1.5px solid var(--dusty-pink);
  border-radius: var(--r-sm);
  box-shadow: 0 3px 0 rgba(223, 160, 179, .55), var(--shadow-soft);
  transition:
    transform  var(--dur-fast) var(--ease-bounce),
    background var(--dur-fast) var(--ease-soft);
}
.key:hover { background: var(--cream-dark); }
.key:active,
.key.is-pressed {
  animation: key-press 250ms var(--ease-bounce);
}
@keyframes key-press {
  0%   { transform: scale(1);   box-shadow: 0 3px 0 rgba(223,160,179,.55), var(--shadow-soft); }
  40%  { transform: scale(.9);  box-shadow: 0 0 0 rgba(223,160,179,.55), var(--shadow-soft); }
  100% { transform: scale(1);   box-shadow: 0 3px 0 rgba(223,160,179,.55), var(--shadow-soft); }
}

.key--soft {
  font-family: var(--font-cute);
  font-size: 18px;
  color: var(--wine);
  background: rgba(255, 248, 239, .6);
}

.pw-hint {
  font-family: var(--font-cute);
  font-size: 18px;
  color: var(--wine);
  opacity: .78;
  margin: 0;
}

.pw-note {
  font-family: var(--font-cute);
  font-size: 18px;
  color: var(--wine);
  min-height: 26px;
  margin: var(--sp) 0 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-premium);
}
.pw-note.is-on { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Wrong guess — shake, ±14px, decaying, 600ms (§4.1, outcome 3)
   -------------------------------------------------------------------------- */
.pw-card.is-shaking { animation: shake 600ms var(--ease-soft); }
@keyframes shake {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(-14px); }
  26%  { transform: translateX(12px); }
  40%  { transform: translateX(-9px); }
  54%  { transform: translateX(6px); }
  68%  { transform: translateX(-4px); }
  82%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Sad popup
   -------------------------------------------------------------------------- */
.pw-popup {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  background: rgba(74, 22, 38, .34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--dur-medium) var(--ease-soft),
    visibility 0s linear var(--dur-medium);
}
.pw-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity    var(--dur-medium) var(--ease-soft),
    visibility 0s linear 0s;
}

.pw-popup__box {
  width: min(330px, 100%);
  padding: var(--sp-3);
  text-align: center;
  background: var(--cream);
  border: 1.5px solid var(--dusty-pink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  transform: translateY(18px) scale(.94);
  transition: transform var(--dur-medium) var(--ease-bounce);
}
.pw-popup.is-open .pw-popup__box { transform: none; }

.pw-popup__art {
  width: 108px;
  height: 108px;
  margin: 0 auto var(--sp-2);
  animation: sad-sway 3.4s var(--ease-soft) infinite;
}
.pw-popup__art svg { width: 100%; height: 100%; }
@keyframes sad-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(3px); }
}

.pw-popup__box h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  color: var(--burgundy);
  margin: 0 0 var(--sp);
}
.pw-popup__box p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--wine);
  opacity: .85;
  margin: 0 0 var(--sp-3);
}


/* ==========================================================================
   COUNTDOWN — the same locked-door language as the password card, shown
   only if the site is opened before her birthday actually starts.
   ========================================================================== */
.countdown-card {
  position: relative;
  width: min(384px, 100%);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-strong);
}

.countdown-lock {
  width: 42px;
  margin: 0 auto var(--sp-2);
  color: var(--wine);
}
.countdown-lock svg { width: 100%; height: auto; }

.countdown-eyebrow {
  font-family: var(--font-cute);
  font-size: 20px;
  color: var(--dusty-pink);
  margin: 0 0 var(--sp);
}

.countdown-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.2;
  color: var(--burgundy);
  margin: 0 0 var(--sp-3);
}

.countdown-clock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--sp-3);
}

.countdown-unit {
  display: grid;
  gap: 4px;
  padding: 12px 4px;
  border-radius: var(--r-sm);
  background: var(--cream);
  border: 1.5px solid var(--dusty-pink);
  box-shadow: 0 3px 0 rgba(223, 160, 179, .55);
}

.countdown-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 30px);
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-family: var(--font-cute);
  font-size: 12px;
  color: var(--wine);
  opacity: .78;
  text-transform: lowercase;
}

.countdown-sub {
  font-family: var(--font-cute);
  font-size: 18px;
  color: var(--wine);
  opacity: .78;
  margin: 0;
}