/* Phong cách game pixel, tông pastel ấm.
   Hoạ tiết (mèo, tim, mây, cỏ) do pixel.js vẽ; biến --px-* là ảnh nền nó sinh ra. */
:root {
  --bg: #fff4e6;
  --bg-2: #fde6d6;
  --card: #fffaf1;
  --card-shade: #f3e0c7;
  --ink: #4a3428;
  --ink-soft: #7a5d4e;
  --pink: #f6a6ba;
  --pink-deep: #a3305c; /* chữ nhấn: ≥4,5:1 trên mọi nền sáng trừ --pink (chỉ 3,5:1), kể cả ô caro bạc hà #b3e1cd — đừng làm nhạt lại */
  --mint: #bfe8d6;
  --butter: #ffdf94;
  --sky-1: #fff0de;
  --sky-2: #ffe1d6;
  --sky-3: #fcd3dc;
  --dirt: #c98d5f;
  --dirt-deep: #8c5a3a;
  --ok: #2f7a55;
  --err: #b23a3a;

  --f-px: "VT323", ui-monospace, "Courier New", monospace;
  --f-sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;

  /* thang cỡ chữ: VT323 gồm 5 bậc, chữ thường 2 bậc; đừng thêm cỡ lẻ.
     Chữ ≥1.5rem (24px) được tính là "chữ lớn" khi xét tương phản, nên --fs-body trở lên không được hạ. */
  --fs-small: .9rem;   /* chữ be bé, Be Vietnam Pro */
  --fs-label: 1.3rem;  /* nhãn, eyebrow, lỗi, ngày trong lịch */
  --fs-body: 1.5rem;   /* nút, lời trích, dòng chính */
  --fs-lead: 1.8rem;   /* tên địa điểm, tiêu đề phụ */
  --fs-title: 2.4rem;  /* tên cô dâu chú rể, số đếm ngược */
  --fs-num: 3.2rem;    /* giờ, ngày lớn, tên ở chân trang */

  --px: 4px;   /* 1 "điểm ảnh" của khung viền */
  --w: 560px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-bottom: 88px; } /* chừa chỗ cho nút nhạc cố định khi Tab/cuộn tới ô nhập */
body {
  margin: 0;
  color: var(--ink);
  font: 400 16px/1.65 var(--f-sans);
  background-color: var(--bg);
  /* ô caro rất nhạt như nền game */
  background-image: repeating-conic-gradient(#fdeedd 0 25%, transparent 0 50%);
  background-size: 32px 32px;
}
body.is-sealed { overflow: hidden; }
img, canvas { max-width: 100%; display: block; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
[hidden] { display: none !important; }
::selection { background: var(--pink); color: var(--ink); }

/* ---------- khung pixel dùng chung ----------
   Viền 4 cạnh bằng box-shadow để góc bị "khuyết" như hộp thoại game 8-bit. */
.envelope__card, .event, .wish, .gift__card, .countdown__grid div, .cal,
.quote, .form, .hero__photo, .gallery__item, .btn, .choice label,
input, select, textarea, .music, .bubble {
  --bd: var(--ink);
  --shade: var(--card-shade);
  border: 0;
  border-radius: 0;
  margin: var(--px);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--bd),
    0 var(--px) 0 0 var(--bd),
    calc(-1 * var(--px)) 0 0 0 var(--bd),
    var(--px) 0 0 0 var(--bd),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--shade);
}
/* hộp lớn có thêm bóng đổ cứng */
.envelope__card, .event, .quote, .form, .hero__photo, .cal {
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--bd),
    0 var(--px) 0 0 var(--bd),
    calc(-1 * var(--px)) 0 0 0 var(--bd),
    var(--px) 0 0 0 var(--bd),
    inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--shade),
    0 calc(3 * var(--px)) 0 0 rgba(74, 52, 40, .16);
}

/* ---------- chữ ---------- */
.eyebrow {
  margin: 0 0 .25rem;
  font: 400 var(--fs-label)/1 var(--f-px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-deep);
}
.eyebrow--light { color: var(--butter); }

.section {
  max-width: var(--w);
  margin: 0 auto;
  padding: 4.5rem 1.25rem;
  text-align: center;
}
.section__title {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  margin: 0 0 2rem;
  text-wrap: balance;
  font: 400 clamp(2.4rem, 10vw, 3rem)/1 var(--f-px);
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--pink);
}
.section__title::before, .section__title::after {
  content: "";
  flex: none;
  width: 27px; height: 24px;
  background: var(--px-heart) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* ---------- biểu tượng pixel ----------
   Thay cho ký tự ▶ ▼ ◀ ♪: font hệ thống vẽ mỗi máy một kiểu (iOS có thể hiện emoji màu).
   Mỗi biểu tượng là lưới pixel SVG dùng làm mặt nạ nên tô theo màu chữ (currentColor).
   Kích thước luôn là bội nguyên của lưới để mép không bị nhoè. */
:root {
  --ic-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --ic-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3zM2 1h1v5H2zM1 2h1v3H1zM0 3h1v1H0z'/%3E%3C/svg%3E");
  --ic-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --ic-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3zM4 0h2v1H4zM6 1h1v2H6zM5 3h1v1H5zM1 5h3v1H1zM0 6h4v2H0zM1 8h2v1H1z'/%3E%3C/svg%3E");
}
.btn--start::before, .choice label::before, .gift__open-text::before, .quote::after,
.hero__scroll::before, .music::before, .lightbox__nav::before {
  content: "";
  display: inline-block; flex: none;
  background: currentColor;
  -webkit-mask: var(--ic) center / 100% 100% no-repeat;
  mask: var(--ic) center / 100% 100% no-repeat;
}

/* ---------- nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: .55rem 1.3rem .45rem;
  background: var(--card);
  color: var(--ink);
  font: 400 var(--fs-body)/1 var(--f-px);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .05s steps(1);
}
.btn:active { transform: translateY(var(--px)); }
.btn--primary { background: var(--pink); --shade: #e48aa1; }
.btn--primary:hover { background: #f8b6c6; }
.btn:not(.btn--primary):hover { background: #fff3e1; }
.btn--block { width: calc(100% - 2 * var(--px)); }
.btn--sm { min-height: 44px; padding: .45rem 1rem .35rem; font-size: var(--fs-label); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--start::before { --ic: var(--ic-right); width: 12px; height: 21px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes blink-fade { 50% { opacity: 0; } } /* visibility:hidden làm Tab bỏ qua phần tử, opacity thì không */

/* viền 8-bit đổi mực → hồng đậm chỉ chênh ~1.7:1, nên thêm vòng outline đậm bên ngoài */
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.music:focus-visible, .gallery__item:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: calc(var(--px) + 2px);
}

/* ---------- mèo, tim, sân khấu ---------- */
/* hai bé ngồi sát vai, tim bay phía trên giữa hai đầu */
.stage {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: 2.5rem;
}
.cat, .heart { position: relative; display: block; line-height: 0; }
.cat { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cat:nth-of-type(1) { animation: bob 1.2s steps(2) infinite; }
.cat:nth-of-type(3) { animation: bob 1.2s steps(2) .6s infinite; }
.heart { animation: beat 1s steps(2) infinite; }
.stage > .heart { position: absolute; top: 0; left: 50%; translate: -50% 0; }
.cat.is-hop { animation: hop .45s steps(4); }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes beat { 50% { transform: scale(1.2); } }
@keyframes hop { 50% { transform: translateY(-20px); } }

.bubble {
  position: absolute; left: 50%; bottom: calc(100% + 14px);
  transform: translateX(-50%);
  padding: .25rem .6rem .15rem;
  background: #fff;
  font: 400 var(--fs-label)/1 var(--f-px);
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* nền cỏ + đất, lát gạch bằng hoạ tiết pixel */
.ground {
  height: 64px;
  background:
    var(--px-grass) 0 0 / 32px 32px repeat-x,
    linear-gradient(var(--dirt), var(--dirt)) 0 32px / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* mèo đi ngang bãi cỏ: pixel.js tự sinh từng lượt (số lượng, màu, hướng, tốc độ ngẫu nhiên) */
.ground { position: relative; clip-path: inset(-80px 0 0 0); } /* cắt hai bên, chừa phía trên cho mèo */
.runner {
  position: absolute; left: -80px; bottom: calc(100% - 10px);
  line-height: 0;
  animation: run 10s linear both; /* thời lượng, độ trễ, hướng do pixel.js đặt */
}
@keyframes run {
  from { left: -80px; }
  to { left: 100%; }
}

/* ---------- màn hình mở đầu ---------- */
.envelope {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: linear-gradient(var(--sky-3) 0 30%, var(--sky-2) 30% 60%, var(--sky-1) 60%);
  transition: opacity .5s steps(5), visibility .5s;
}
.envelope__card {
  width: min(100% - 2 * var(--px), 360px);
  padding: 2rem 1.5rem 1.75rem;
  background: var(--card);
  text-align: center;
}
.envelope__to {
  margin: .5rem 0 1.5rem;
  font: 400 var(--fs-body)/1.2 var(--f-px);
  color: var(--ink);
}
.envelope__to strong { display: inline-block; margin-top: .2rem; font-weight: 400; font-size: 1.25em; color: var(--pink-deep); }
.stage--envelope { margin: 0 0 1.75rem; }
.envelope.is-open { opacity: 0; visibility: hidden; }

/* ---------- hero: màn hình tiêu đề ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto auto;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(var(--sky-3) 0 22%, var(--sky-2) 22% 48%, var(--sky-1) 48%);
}
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute;
  width: 96px; height: 30px;
  background: var(--px-cloud) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: drift 40s steps(80) infinite alternate;
}
.cloud--1 { top: 9%; left: 6%; }
.cloud--2 { top: 20%; right: 4%; width: 128px; height: 40px; animation-duration: 55s; animation-direction: alternate-reverse; }
.cloud--3 { top: 40%; left: 52%; width: 64px; height: 20px; animation-duration: 32s; }
@keyframes drift { to { transform: translateX(60px); } }

.hero__content {
  position: relative;
  align-self: center;
  padding: 3.5rem 1.25rem 1.5rem;
}
.hero__photo {
  width: min(64vw, 240px);
  aspect-ratio: 4 / 5;
  margin: 1rem auto 1.5rem;
  background: var(--mint) center / cover no-repeat;
  outline: 8px solid #fff;  /* viền trắng như ảnh dán */
  outline-offset: -8px;
}
/* tranh pixel tạm: chỉ hiện khi chưa có ảnh bìa thật */
.hero__photo:not([hidden]) + .hero__art { display: none; }
.hero__art { line-height: 0; overflow: hidden; }
.hero__art canvas { width: 100%; height: 100%; }
.hero__names {
  margin: 0;
  font: 400 clamp(3.6rem, 17vw, 6rem)/.9 var(--f-px);
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--pink);
}
.hero__names:focus { outline: none; } /* chỉ nhận focus bằng script sau khi mở phong bì */
.hero__names .amp { color: var(--pink-deep); text-shadow: 4px 4px 0 var(--butter); margin: 0 .1em; }
.hero__date {
  display: inline-block;
  margin: 1rem 0 0;
  padding: .3rem .8rem .2rem;
  background: var(--butter);
  font: 400 var(--fs-body)/1 var(--f-px);
  letter-spacing: .2em;
}
.stage--hero { position: relative; z-index: 1; margin-bottom: -6px; } /* mèo ngồi che mèo chạy phía sau */
.hero__scroll {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--ink); text-decoration: none; font: 400 var(--fs-body)/1 var(--f-px);
  animation: blink-fade 1.2s steps(1) infinite;
}
.hero__scroll::before { --ic: var(--ic-down); width: 21px; height: 12px; }
.hero__scroll:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; animation: none; }

/* ---------- lời mời ---------- */
.invite__to {
  margin: 0;
  font: 400 var(--fs-lead)/1.2 var(--f-px);
  color: var(--pink-deep);
}
.invite__guest { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.invite__lead { margin: .4rem 0 0; color: var(--ink-soft); }
.families {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 2.25rem;
}
.family__side {
  margin: 0 0 .4rem;
  font: 400 var(--fs-label)/1 var(--f-px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink-deep);
}
.family__parents { margin: 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; text-wrap: balance; } /* chia dòng cân, không để lẻ một chữ */
.family__home { margin: .35rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.invite__announce { margin: 0 0 2rem; font: 400 var(--fs-body)/1.2 var(--f-px); color: var(--ink); }
.couple { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.couple__role {
  margin: 0;
  font: 400 var(--fs-label)/1 var(--f-px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink-deep);
}
.couple__name {
  margin: .4rem 0 .3rem;
  text-wrap: balance;
  font: 400 var(--fs-title)/1.05 var(--f-px);
  color: var(--ink);
}
.couple__order { margin: 0; font: 400 var(--fs-label)/1.1 var(--f-px); color: var(--ink-soft); }
.couple__amp { display: grid; place-items: center; }
.couple__amp > span { animation: beat 1s steps(2) infinite; }
.quote {
  position: relative;
  margin: 3rem auto 0; max-width: 26rem;
  padding: 1.25rem 1.4rem 1.6rem;
  background: var(--card);
  font: 400 var(--fs-body)/1.3 var(--f-px);
  color: var(--ink);
  text-align: left;
}
/* mũi tên "bấm tiếp" của hộp thoại RPG */
.quote::after {
  --ic: var(--ic-down);
  position: absolute; right: .8rem; bottom: .45rem;
  width: 14px; height: 8px; color: var(--pink-deep);
  animation: blink 1s steps(1) infinite;
}

/* ---------- đếm ngược ---------- */
.countdown { padding-top: 0; padding-bottom: 2rem; } /* lịch ngay sau đã có padding-top */
.countdown__date {
  margin: 0;
  font: 400 var(--fs-num)/1 var(--f-px);
  letter-spacing: .08em;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--mint);
}
.countdown__lunar { text-wrap: balance; margin: .5rem 0 2rem; font-size: var(--fs-small); color: var(--ink-soft); }
.countdown__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
}
.countdown__grid div {
  padding: .8rem .2rem .6rem;
  background: #4a3428;
  --shade: #3a281e;
  --bd: #2e2019;
}
.countdown__grid span {
  display: block;
  font: 400 var(--fs-title)/1 var(--f-px);
  font-variant-numeric: tabular-nums;
  color: var(--butter);
}
.countdown__grid small {
  display: block; margin-top: .25rem;
  font: 400 var(--fs-label)/1 var(--f-px); letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink);
}
.countdown.is-done .countdown__grid { display: none; }

/* ---------- lịch tháng ---------- */
.calendar__months { display: grid; gap: 1.75rem; justify-items: center; }
.cal {
  width: min(100% - 2 * var(--px), 22rem);
  border-collapse: separate; border-spacing: 2px;
  table-layout: fixed; /* 7 cột bằng nhau, tim không làm dãn cột */
  padding: .6rem .5rem .5rem;
  background: var(--card);
}
.cal caption { padding-bottom: .9rem; font: 400 var(--fs-lead)/1 var(--f-px); color: var(--ink); }
.cal th { padding: .2rem 0 .4rem; font: 400 var(--fs-label)/1 var(--f-px); color: var(--ink-soft); }
.cal td { height: 2.5rem; padding: 0; text-align: center; font: 400 var(--fs-label)/1 var(--f-px); color: var(--ink); }
/* ngày cưới: số nằm trong trái tim pixel đang đập */
.cal td.is-wed span {
  display: grid; place-items: center;
  width: 2.25rem; max-width: 100%; height: 2rem; margin: 0 auto; padding-bottom: .2rem;
  font-size: var(--fs-body); /* 24px: chuẩn tương phản chữ lớn (3:1) trên nền tim hồng */
  background: var(--px-heart) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: beat-soft 1s steps(2) infinite;
}
@keyframes beat-soft { 50% { transform: scale(1.06); } }
.calendar__legend {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: .45rem;
  font: 400 var(--fs-label)/1.2 var(--f-px); color: var(--ink);
}
.calendar__legend li { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.calendar__heart {
  flex: none; width: 18px; height: 16px;
  background: var(--px-heart) center / 100% 100% no-repeat; image-rendering: pixelated;
}

/* ---------- tiệc ---------- */
.events {
  max-width: none;
  background: var(--mint);
  background-image: repeating-conic-gradient(#b3e1cd 0 25%, transparent 0 50%);
  background-size: 32px 32px;
}
.events__list { max-width: var(--w); margin: 0 auto; display: grid; gap: 1.5rem; }
.event {
  padding: 1.5rem 1.25rem 1.4rem;
  background: var(--card);
  text-align: center;
}
.event__title {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .25rem .7rem .15rem;
  background: var(--pink);
  font: 400 var(--fs-label)/1 var(--f-px);
  letter-spacing: .1em; text-transform: uppercase;
}
.event__time {
  margin: 0;
  font: 400 var(--fs-num)/1 var(--f-px);
  color: var(--ink);
}
.event__until { margin: .1rem 0 0; font: 400 var(--fs-label)/1.2 var(--f-px); color: var(--ink-soft); }
.event__day { margin: .3rem 0 1.1rem; color: var(--ink); font-weight: 500; }
.event__lunar { text-wrap: balance; margin: -.9rem 0 1.1rem; font-size: var(--fs-small); color: var(--ink-soft); }
.event__venue { margin: 0; font: 400 var(--fs-lead)/1.1 var(--f-px); color: var(--pink-deep); }
.event__addr { margin: .3rem 0 1.25rem; font-size: var(--fs-small); color: var(--ink-soft); }
/* lễ nhà thờ: nhãn màu bạc hà để phân biệt với các tiệc */
.event--ceremony .event__title { background: var(--mint); }
.event__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* ---------- album ---------- */
.gallery__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
}
.gallery__item {
  position: relative; padding: 6px; cursor: zoom-in;
  aspect-ratio: 3 / 4; overflow: hidden;
  background: #fff;
}
.gallery__item:nth-child(3n + 1) { grid-column: span 2; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item.is-missing {
  cursor: default;
  background: repeating-conic-gradient(var(--sky-2) 0 25%, var(--sky-1) 0 50%) 0 0 / 24px 24px;
}
.gallery__item.is-missing::after {
  content: "Ảnh " attr(data-n);
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 var(--fs-body)/1 var(--f-px); color: var(--ink-soft);
}

.lightbox {
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(46, 32, 25, .94);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 88svh; object-fit: contain; outline: 6px solid #fff; }
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 48px; height: 48px; border: 0;
  background: var(--pink); color: var(--ink); font: 400 var(--fs-body)/1 var(--f-px); cursor: pointer;
}
.lightbox__nav { display: grid; place-items: center; }
.lightbox__nav::before { width: 12px; height: 21px; }
.lightbox__nav--prev::before { --ic: var(--ic-left); }
.lightbox__nav--next::before { --ic: var(--ic-right); }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__count {
  position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
  margin: 0; padding: .25rem .7rem .15rem;
  background: var(--butter); color: var(--ink); font: 400 var(--fs-label)/1 var(--f-px);
}
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__count { display: none; }
.lightbox__nav:focus-visible, .lightbox__close:focus-visible { outline: 3px solid var(--butter); outline-offset: 2px; }
.lightbox__close {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 48px; height: 48px; border: 0;
  background: var(--pink); color: var(--ink); font: 400 var(--fs-lead)/1 var(--f-px); cursor: pointer;
}

/* ---------- form ---------- */
.rsvp__deadline { margin: -1rem 0 2.5rem; color: var(--ink-soft); font-size: var(--fs-small); }
.form {
  position: relative;
  display: grid; gap: 1.1rem;
  padding: 1.75rem 1.25rem 1.4rem;
  background: var(--card);
  text-align: left;
}
/* mèo ngồi trên mép hộp form */
.form__cat { position: absolute; bottom: 100%; right: 18px; }
/* form tự chừa chỗ cho bé mèo (cao 60px) ngồi trên mép, dù phía trên là tiêu đề hay dòng hạn phản hồi.
   Lề trên gộp với lề dưới của phần tử phía trên (margin collapse) nên phải tự đủ 76px. */
.rsvp .form { margin-top: 4.75rem; }
.field { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend {
  font: 400 var(--fs-label)/1.1 var(--f-px); color: var(--ink); padding: 0;
}
.field em { font-style: normal; color: var(--ink-soft); }
.field__count { margin: -.6rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); text-align: right; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; gap: .75rem; } }
input, select, textarea {
  --shade: transparent;
  width: calc(100% - 2 * var(--px));
  min-height: 46px;
  padding: .65rem .8rem;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.4 var(--f-sans); /* >=16px để iOS không tự zoom */
}
input:focus, select:focus, textarea:focus { background: #fffdf6; }
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' width='15' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%234a3428' d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z'/%3E%3C/svg%3E") right .7rem center no-repeat;
}
textarea { resize: vertical; }

/* lựa chọn kiểu menu RPG: mũi tên ▶ trỏ vào dòng đang chọn */
.choice { display: grid; gap: .5rem; }
.choice label {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .6rem .8rem;
  background: #fff;
  --shade: transparent;
  font: 400 var(--fs-label)/1.1 var(--f-px);
  cursor: pointer;
}
.choice label::before {
  --ic: var(--ic-right); width: 12px; height: 21px; color: var(--pink-deep); visibility: hidden;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice label:has(input:checked) { background: var(--butter); }
.choice label:has(input:checked)::before { visibility: visible; animation: blink 1s steps(1) infinite; }
/* tách riêng khỏi danh sách trên: nếu trình duyệt không hiểu :has() thì cả danh sách không bị bỏ */
.choice label:has(input:focus-visible) { outline: 3px solid var(--pink-deep); outline-offset: calc(var(--px) + 2px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field__err { margin: -.6rem 0 0; font: 400 var(--fs-label)/1.2 var(--f-px); color: var(--err); }
.form__status { margin: 0; min-height: 1.4em; font: 400 var(--fs-label)/1.2 var(--f-px); text-align: center; }
.form__status.is-ok { color: var(--ok); }
.form__status.is-err { color: var(--err); }

/* ---------- lời chúc ---------- */
.wishes { padding-top: 0; }
.wishes__list {
  list-style: none; margin: 0; padding: var(--px);
  display: grid; gap: .9rem; text-align: left;
  max-height: 480px; overflow-y: auto;
}
.wish { padding: .9rem 1rem; background: var(--card); }
.wish__text { margin: 0 0 .4rem; white-space: pre-line; overflow-wrap: anywhere; }
.wish__name { margin: 0; font: 400 var(--fs-label)/1 var(--f-px); color: var(--pink-deep); }
.wishes__empty { font: 400 var(--fs-label)/1.2 var(--f-px); color: var(--ink-soft); text-align: center; }

/* ---------- mừng cưới ---------- */
.gift__note { margin: -1rem 0 2rem; color: var(--ink-soft); }
.gift__open {
  display: inline-flex; flex-direction: column; align-items: center; gap: .75rem;
  margin: 0 auto; padding: .5rem 1rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.gift__box { line-height: 0; animation: bob 1.2s steps(2) infinite; }
.gift__open.is-open .gift__box { animation: hop .45s steps(4); }
.gift__open-text {
  padding: .3rem .8rem .2rem;
  background: var(--butter);
  font: 400 var(--fs-label)/1 var(--f-px);
}
.gift__open-text::before { display: none; }
.gift__open:not(.is-open) .gift__open-text::before {
  --ic: var(--ic-right); display: inline-block; width: 8px; height: 14px; margin-right: .5rem;
  animation: blink 1s steps(1) infinite;
}
.gift__open:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }
.gift__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.gift__grid:not([hidden]) { animation: pop .4s steps(4); }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } }
.gift__card { padding: 1rem; background: var(--card); }
.gift__card img { aspect-ratio: 1; object-fit: contain; margin: .5rem 0; background: #fff; }
.gift__qr-missing {
  display: grid; place-items: center; aspect-ratio: 1; margin: .5rem 0;
  background: repeating-conic-gradient(var(--sky-2) 0 25%, var(--sky-1) 0 50%) 0 0 / 24px 24px;
  font: 400 var(--fs-label)/1.1 var(--f-px); color: var(--ink-soft);
}
.gift__label { margin: 0; font: 400 var(--fs-label)/1 var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-deep); }
.gift__meta { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer {
  padding: 3rem 1.25rem calc(5rem + env(safe-area-inset-bottom));
  background: var(--dirt-deep); /* nền sẫm: chữ vàng ≈4,46:1 nên chỉ dùng cỡ chữ lớn (≥24px), chữ kem ≈5,3:1 */
  background-image: repeating-conic-gradient(rgba(74, 52, 40, .18) 0 25%, transparent 0 50%);
  background-size: 32px 32px;
  color: #fff4e6;
  text-align: center;
}
/* mèo ngồi trên nền trời, cỏ ở giữa, đất phía dưới */
.stage--footer { margin: -3rem -1.25rem -6px; padding-top: 2.5rem; background: var(--sky-1); }
.ground--footer { height: 32px; margin: 0 -1.25rem 2.5rem; background-color: var(--sky-1); background-size: 32px 32px, 0 0; }
.footer__names {
  margin: .25rem 0 0;
  font: 400 var(--fs-num)/1 var(--f-px);
  color: var(--butter);
  text-shadow: 3px 3px 0 rgba(46, 32, 25, .6);
}
.footer .eyebrow { font-size: var(--fs-body); } /* 24px: chữ lớn, đủ tương phản trên nền đất sẫm */
.footer__thanks { margin: 1rem auto 0; max-width: 22rem; font-size: var(--fs-small); }

/* ---------- nút nhạc ---------- */
.music {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 48px; height: 48px;
  background: var(--butter); color: var(--ink);
  font: 400 var(--fs-lead)/1 var(--f-px);
  cursor: pointer;
}
.music { display: grid; place-items: center; }
.music::before { --ic: var(--ic-note); width: 21px; height: 27px; }
.music[aria-pressed="true"] { animation: bob 1s steps(2) infinite; }
.music[aria-pressed="false"]::before { opacity: .4; } /* nốt nhạc mờ để vạch gạch chéo (bên dưới) nổi lên */
/* tắt nhạc: nốt nhạc bị gạch chéo, khác hẳn trạng thái bật kể cả khi giảm chuyển động */
.music[aria-pressed="false"] {
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' shape-rendering='crispEdges' fill='%23a3305c'%3E%3Crect x='2' y='2' width='6' height='4'/%3E%3Crect x='6' y='6' width='6' height='4'/%3E%3Crect x='10' y='10' width='6' height='4'/%3E%3Crect x='14' y='14' width='6' height='4'/%3E%3Crect x='18' y='18' width='6' height='4'/%3E%3Crect x='22' y='22' width='4' height='4'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  color: var(--ink-soft);
}

/* ---------- hiện dần khi cuộn ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s steps(4), transform .6s steps(4); }
.reveal.is-in { opacity: 1; transform: none; }

/* màn 320px: chip ngày kép ('10 & 17 · 01 · 2027') hẹp lại cho vừa */
@media (max-width: 359px) { .hero__date { letter-spacing: .1em; } }

@media (min-width: 640px) {
  .couple { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery__item:nth-child(3n + 1) { grid-column: auto; aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}