/* Giữ nhãn pixel không bị che bởi các đường trang trí của lá thư. */
.letter::before,
.letter::after {
  display: none;
}

.flower-rain {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.pixel-flower {
  --petal: #f08bb0;
  position: absolute;
  top: -18px;
  left: var(--left);
  width: 8px;
  height: 8px;
  background: var(--petal);
  box-shadow: 0 -7px 0 var(--petal), 7px 0 0 var(--petal), 0 7px 0 var(--petal), -7px 0 0 var(--petal);
  animation: pixel-flower-fall var(--duration) steps(70, end) var(--delay) forwards;
}

.pixel-flower::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 2px;
  background: #8e2338;
}

.rose-leaf {
  position: absolute;
  top: 10px;
  left: -5px;
  width: 8px;
  height: 5px;
  background: #60aa70;
  box-shadow: 9px 4px 0 #4b9162, 4px 5px 0 #72bd7f;
}

@keyframes pixel-flower-fall {
  from { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  to { transform: translate3d(var(--drift), 110vh, 0) rotate(360deg); opacity: .8; }
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  gap: 20px;
  background: #fbd6e3;
  color: #a85877;
  font: 12px/1.9 "Press Start 2P", monospace;
  text-align: center;
  transition: opacity .45s ease, visibility .45s ease;
}

.intro-screen.hidden { opacity: 0; visibility: hidden; }
.intro-heart { color: #df668d; font-size: 52px; animation: intro-pulse .7s steps(2) infinite; }
@keyframes intro-pulse { 50% { transform: scale(1.18); } }

.scene::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 52%, transparent 0 17%, rgba(100, 44, 68, .26) 72%);
  opacity: 0;
  transition: opacity .8s ease;
}
.scene.letter-opened::after { opacity: 1; }
.scene > header, .scene > .mail-area, .scene > footer { position: relative; z-index: 3; }

.envelope:not(.open) { animation: envelope-nudge 2.4s steps(2, end) infinite; }
@keyframes envelope-nudge { 0%, 72%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-4px) rotate(-1deg); } 84% { transform: translateY(-4px) rotate(1deg); } 90% { transform: translateY(0) rotate(0); } }

.heart-burst { position: fixed; left: 50%; top: 55%; z-index: 9; pointer-events: none; }
.pixel-heart { position: absolute; width: 8px; height: 8px; background: #ee7eaa; box-shadow: -5px -5px 0 #ee7eaa, 5px -5px 0 #ee7eaa, -5px 0 0 #ee7eaa, 5px 0 0 #ee7eaa, 0 5px 0 #ee7eaa; animation: heart-float 1.2s steps(14, end) var(--delay) forwards; }
@keyframes heart-float { from { transform: translate(0, 0) scale(.7); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1.15); opacity: 0; } }

.card-rose { --rose-red: #d83c56; position: absolute; width: 7px; height: 7px; background: var(--rose-red); box-shadow: 0 -6px 0 var(--rose-red), 6px 0 0 var(--rose-red), 0 6px 0 var(--rose-red), -6px 0 0 var(--rose-red); }
.card-rose::after { content: ''; position: absolute; inset: 2px; background: #8e2338; }
.card-rose::before { content: ''; position: absolute; top: 8px; left: -4px; width: 7px; height: 4px; background: #61a86f; box-shadow: 7px 4px 0 #4d9261; }
.rose-top-left { top: 22px; left: 20px; }.rose-top-right { top: 22px; right: 52px; }.rose-bottom-left { bottom: 23px; left: 20px; }.rose-bottom-right { bottom: 23px; right: 52px; }
.close { z-index: 4; }

.reaction-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 78px;
  margin: 19px 22px 6px;
}
.cat-sticker, .meme-reaction {
  display: block;
  overflow: hidden;
  border: 3px solid #714b63;
  background: #fff;
  box-shadow: 3px 3px 0 #e898b4;
}
.cat-sticker { width: 54px; height: 54px; object-fit: cover; }
.cat-bouquet { transform: rotate(-5deg); }
.cat-rose { transform: rotate(5deg); }
.meme-reaction { width: 72px; height: 66px; animation: happy-cat 1.2s steps(2, end) infinite; }
.meme-reaction img { width: 100%; height: 100%; object-fit: cover; }
@keyframes happy-cat { 50% { transform: translateY(-5px) rotate(2deg); } }
.reaction-media-pair { display: flex; align-items: center; justify-content: center; gap: 10px; }
.random-reaction { display: block; width: 88px; height: 70px; object-fit: cover; overflow: hidden; border: 3px solid #714b63; background: #fff; box-shadow: 3px 3px 0 #e898b4; animation: happy-cat 1.2s steps(2, end) infinite; }
.random-reaction:nth-child(2) { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .envelope:not(.open), .intro-heart, .pixel-flower, .pixel-heart { animation: none; }
}

@media (max-width: 500px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .scene { min-height: 100svh; padding-bottom: 20px; }
  .mail-area { height: 340px; }
  footer {
    position: relative;
    bottom: auto;
    width: 100%;
    margin-top: 18px;
    padding: 0 14px;
    flex-shrink: 0;
  }
}