.blessing-rsvp {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 64px 16px 0;
  background: linear-gradient(#efa88e 0 26%, #72ae49 26%);
  color: #44271f;
}

.blessing-rsvp::before {
  position: absolute;
  inset: 26% 0 0;
  background: radial-gradient(#4e933a 3px, transparent 4px);
  background-size: 34px 34px;
  content: "";
  opacity: 0.45;
}

.blessing-rsvp__junimos,
.blessing-rsvp__message,
.blessing-rsvp__portraits,
.blessing-rsvp__reply,
.blessing-rsvp__hut,
.blessing-rsvp__copyright {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin-inline: auto;
}

.blessing-rsvp__junimos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 24px;
  gap: 8px;
}

.blessing-rsvp__junimo {
  justify-self: center;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  filter: sepia(1) saturate(7) hue-rotate(60deg);
  animation: blessing-junimo 1.5s steps(2, end) infinite;
}

.blessing-rsvp__junimo[data-color="teal"] { filter: sepia(1) saturate(7) hue-rotate(120deg); animation-delay: -0.2s; }
.blessing-rsvp__junimo[data-color="blue"] { filter: sepia(1) saturate(7) hue-rotate(165deg); animation-delay: -0.4s; }
.blessing-rsvp__junimo[data-color="purple"] { filter: sepia(1) saturate(7) hue-rotate(235deg); animation-delay: -0.6s; }
.blessing-rsvp__junimo[data-color="pink"] { filter: sepia(1) saturate(7) hue-rotate(285deg); animation-delay: -0.8s; }
.blessing-rsvp__junimo[data-color="gold"] { filter: sepia(1) saturate(7) hue-rotate(5deg); animation-delay: -1s; }

.blessing-rsvp__message {
  padding: 26px 20px;
  border: 6px solid #6d3c27;
  background: #fff0bd;
  box-shadow: inset 0 0 0 3px #d89e58, 8px 9px 0 rgb(51 75 35 / 28%);
  text-align: center;
}

.blessing-rsvp__title { margin: 0 0 12px; color: #a43e4d; font-size: clamp(1.65rem, 8vw, 2.4rem); letter-spacing: 0; }
.blessing-rsvp__message p { margin: 0 auto 16px; max-width: 28em; line-height: 1.8; }
.blessing-rsvp__message strong { color: #72503c; font-family: STKaiti, KaiTi, serif; }

.blessing-rsvp__portraits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  padding: 8px;
  border: 6px solid #6d3c27;
  background: #f7dfaa;
  gap: 6px;
}

.blessing-rsvp__portrait {
  min-width: 0;
  margin: 0;
  border: 3px solid #8e5d3b;
  background: #fff2c6;
  text-align: center;
}

.blessing-rsvp__portrait img { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.blessing-rsvp__portrait figcaption { overflow: hidden; padding: 4px 2px; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }

.blessing-rsvp__reply {
  margin-top: 28px;
  padding: 24px 18px 26px;
  border: 7px solid #65402c;
  background: #f8e7b2 url("../../../assets/stardew/ui/letter-background.png") center / 100% 100% no-repeat;
  box-shadow: 8px 9px 0 rgb(51 75 35 / 30%);
}

.blessing-rsvp__reply-kicker { margin: 0; color: #b43c4e; font-size: 0.8rem; font-weight: 900; text-align: center; }
.blessing-rsvp__reply h3 { margin: 5px 0 8px; font-size: 1.35rem; text-align: center; }
.blessing-rsvp__reply-note,
.blessing-rsvp__deadline { margin: 0 0 8px; color: #72503c; font-size: 0.85rem; text-align: center; }

.blessing-rsvp__form { display: grid; margin-top: 20px; gap: 15px; }
.blessing-rsvp__fields { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
.blessing-rsvp__field { display: grid; min-width: 0; gap: 6px; font-weight: 700; }

.blessing-rsvp__field input,
.blessing-rsvp__field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 3px solid #8c5938;
  border-radius: 2px;
  background: #fff9df;
  color: #44271f;
  font: inherit;
}

.blessing-rsvp__field textarea { resize: vertical; }

.blessing-rsvp__attendance { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border: 0; gap: 7px; }
.blessing-rsvp__attendance legend { margin-bottom: 7px; font-weight: 700; }
.blessing-rsvp__attendance label { position: relative; min-width: 0; }
.blessing-rsvp__attendance input { position: absolute; opacity: 0; }
.blessing-rsvp__attendance span { display: grid; min-height: 44px; padding: 7px 4px; place-items: center; border: 3px solid #8c5938; background: #fff8d9; font-size: 0.78rem; text-align: center; }
.blessing-rsvp__attendance input:checked + span { background: #8cbf55; box-shadow: inset 0 -4px #65913c; }
.blessing-rsvp__attendance input:focus-visible + span { outline: 3px solid #356d95; outline-offset: 2px; }

.blessing-rsvp__submit {
  min-height: 50px;
  border: 4px solid #6f332a;
  border-radius: 3px;
  background: #c53f52;
  color: #fff3cd;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -5px #8f2d3d;
}

.blessing-rsvp__submit:disabled { opacity: 0.55; cursor: wait; }
.blessing-rsvp__status { min-height: 24px; margin: 12px 0 0; color: #73513e; font-size: 0.84rem; text-align: center; }

.blessing-rsvp__hut { display: block; width: 192px; height: auto; margin-top: 26px; image-rendering: pixelated; }
.blessing-rsvp__copyright { margin-top: 30px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); color: rgb(255 255 255 / 58%); font-size: 10px; line-height: 1.35; text-align: center; }

@keyframes blessing-junimo { 50% { transform: translateY(-5px); } }

@media (min-width: 640px) {
  .blessing-rsvp__portraits { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .blessing-rsvp__reply { padding-inline: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .blessing-rsvp__junimo { animation: none; }
}