:root {
  --ink: #3d251d;
  --deep: #65331f;
  --cream: #fff0bf;
  font-family: "Courier New", "Microsoft YaHei", monospace;
  color: var(--ink);
  background: #183d2b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #183d2b; }
body { margin: 0; min-width: 320px; background: #183d2b; overflow-x: hidden; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.page { position: relative; width: min(100%, 680px); min-height: 100svh; margin: 0 auto; overflow: hidden; isolation: isolate; scroll-margin-top: 0; border-inline: 3px solid rgba(27,55,37,.48); }
.music-chip { position: fixed; z-index: 60; top: max(12px,env(safe-area-inset-top)); right: max(12px,calc((100vw - 680px)/2 + 12px)); display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px 6px 6px; border: 3px solid #4c2518; border-radius: 5px; background: rgba(255,233,170,.92); box-shadow: 0 3px 0 #8c4727; cursor: pointer; }
.music-chip span:last-child { display: grid; line-height: 1.05; text-align: left; }
.music-chip b { font-size: 12px; }
.music-chip small { font-size: 9px; opacity: .72; }
.music-disc { display: grid; width: 27px; aspect-ratio: 1; place-items: center; border: 3px solid #3a201a; border-radius: 50%; color: #fff6ce; background: #86462f; animation: spin 5s linear infinite; }

/* 01 — cover */
.hero-page { min-height: 100svh; background: #f07b53 url("./assets/hero-autumn.png") center/cover no-repeat; }
.hero-page::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(255,103,69,.15),transparent 48%,rgba(24,67,36,.2)); }
.hero-sign { position: absolute; z-index: 3; top: 17.5%; left: 50%; width: 70%; margin: 0; transform: translateX(-50%); color: #692c1b; font-family: Georgia,"Times New Roman",serif; font-size: clamp(31px,9.4vw,64px); line-height: .86; letter-spacing: .02em; text-align: center; text-shadow: 2px 0 #e9a85b,-2px 0 #e9a85b,0 2px #e9a85b,0 4px #48241a; }
.hero-sign span { display: block; }
.hero-cast { position: absolute; z-index: 4; top: 41%; left: 50%; width: 60%; height: 34%; transform: translateX(-50%); }
.hero-couple { position: absolute; inset: 0 auto auto 50%; width: 78%; max-height: 100%; object-fit: contain; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 5px 0 rgba(64,32,22,.3)); animation: float 3.2s ease-in-out infinite; }
.hero-pet { position: absolute; right: -9%; bottom: 6%; width: 25%; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(64,32,22,.28)); }
.hero-actions { position: absolute; z-index: 5; left: 50%; bottom: max(24px,env(safe-area-inset-bottom)); width: min(86%,530px); transform: translateX(-50%); display: grid; gap: 11px; }
.wood-line { min-height: 54px; display: grid; place-items: center; padding: 10px 18px; border: 4px solid #66301e; border-radius: 7px; color: #3e2419; background: linear-gradient(#ffd379,#dda451); box-shadow: inset 0 0 0 3px #f6bd63,0 5px 0 #884426,0 8px 16px rgba(43,25,14,.25); font-weight: 800; font-size: clamp(15px,4vw,21px); text-align: center; }
.wood-button { cursor: pointer; }
.wood-button:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px #f6bd63,0 1px 0 #884426; }
.petal-rain { position: absolute; inset: -14% 0 0; z-index: 8; pointer-events: none; }
.petal-rain img { position: absolute; top: -12%; left: -12%; width: clamp(14px,5vw,29px); image-rendering: pixelated; animation: petalFall 9s linear infinite; }
.petal-rain img:nth-child(2){left:5%;animation-delay:-5.1s;animation-duration:10s}.petal-rain img:nth-child(3){left:17%;animation-delay:-1.3s;animation-duration:8s}.petal-rain img:nth-child(4){left:29%;animation-delay:-6.8s;animation-duration:11s}.petal-rain img:nth-child(5){left:41%;animation-delay:-3.2s;animation-duration:9.5s}.petal-rain img:nth-child(6){left:53%;animation-delay:-7.9s;animation-duration:12s}.petal-rain img:nth-child(7){left:64%;animation-delay:-2.4s;animation-duration:8.8s}.petal-rain img:nth-child(8){left:74%;animation-delay:-6s;animation-duration:10.5s}.petal-rain img:nth-child(9){left:84%;animation-delay:-4.1s;animation-duration:9.2s}.petal-rain img:nth-child(10){left:94%;animation-delay:-8.8s;animation-duration:11.4s}

/* 02 — portraits */
.portrait-page { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: max(80px,10svh) 18px max(36px,env(safe-area-inset-bottom)); background: linear-gradient(180deg,#72d5eb 0 58%,#86c44e 58% 67%,#3f9448 67%); }
.portrait-page::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: 0; height: 35%; opacity: .38; background-image: radial-gradient(#fee46a 2px,transparent 3px),radial-gradient(#f9858e 2px,transparent 3px); background-position: 0 0,13px 13px; background-size: 28px 28px; }
.cloud { position: absolute; width: 104px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.78); box-shadow: 26px -18px 0 rgba(255,255,255,.78),54px -7px 0 rgba(255,255,255,.78); }
.cloud-one { top: 16%; left: -28px; }.cloud-two { top: 31%; right: -16px; transform: scale(.7); }
.wood-heading { position: relative; width: min(90%,520px); padding: 14px 20px; border: 5px solid #5d2e1e; border-radius: 5px; background: linear-gradient(90deg,#e89943,#ffc56b 50%,#e89943); box-shadow: inset 0 0 0 4px #ad5e2c,0 6px 0 #7b3c24; text-align: center; color: #743822; }
.wood-heading span,.wood-heading strong { display: block; }.wood-heading span { font-size: clamp(20px,6vw,38px); font-weight: 900; }.wood-heading strong { font-family: Georgia,serif; font-size: clamp(37px,12vw,72px); line-height: .95; }
.tiny-hint { margin: 0; padding: 6px 10px; border-radius: 3px; color: #185b5a; background: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; }.tiny-hint.dark { color: #63331f; background: rgba(255,245,208,.8); }
.couple-stage { display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 500px; min-height: 300px; }
.identity-card { width: min(38vw,220px); height: min(64vw,350px); padding: 0; border: 0; background: transparent; perspective: 900px; cursor: pointer; }
.identity-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); }.identity-card.is-flipped .identity-inner { transform: rotateY(180deg); }
.identity-face { position: absolute; inset: 0; display: grid; place-items: end center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }.identity-face img { width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(45,65,42,.23)); }
.identity-back { transform: rotateY(180deg); place-items: center; padding: 9px; border: 5px solid #7c3f27; border-radius: 5px; background: #fff2c5; box-shadow: inset 0 0 0 4px #e9ad57,0 7px 0 rgba(72,40,28,.35); }.identity-back img { height: 100%; object-fit: cover; image-rendering: auto; filter: none; }
.pixel-heart { align-self: center; margin: 0 -7px 42%; color: #ec5370; font-size: clamp(28px,8vw,48px); text-shadow: 3px 0 #fff2c5,-3px 0 #fff2c5,0 3px #8a3344; animation: pulse 1.5s ease-in-out infinite; }
.flower-bed { display: flex; width: 100%; max-width: 470px; justify-content: space-around; margin-top: -70px; pointer-events: none; }.flower-bed img { width: 44px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(40,72,36,.2)); }
.task-button { width: min(90%,480px); padding: 13px 18px; border: 4px solid #5c2c1b; border-radius: 6px; background: linear-gradient(#ffd06c,#e39b43); box-shadow: inset 0 0 0 3px #f6b85e,0 6px 0 #794022; cursor: pointer; }.task-button span,.task-button small { display: block; font-weight: 900; }.task-button span { font-size: clamp(17px,4.8vw,24px); }.task-button small { margin-top: 3px; letter-spacing: .1em; color: #85472a; }

/* 03 — invitation */
.invitation-page { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 78px 14px max(30px,env(safe-area-inset-bottom)); background: linear-gradient(rgba(244,188,117,.8),rgba(239,158,87,.84)),repeating-linear-gradient(45deg,#db9154 0 12px,#cb7e47 12px 14px,#e8a462 14px 26px); }
.invitation-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(255,221,142,.65),transparent 48%,rgba(98,61,37,.16)); }
.altar { position: relative; width: min(72%,420px); height: 35svh; min-height: 245px; display: grid; align-items: end; justify-items: center; border: 9px solid #8a5731; border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 0 6px #f8db88; background: linear-gradient(#bfe8ec 0 58%,#7fc35b 58%); }
.altar::before,.altar::after { content: "✿ ✿ ✿"; position: absolute; top: -21px; color: #f05e78; font-size: 23px; text-shadow: 8px 4px #fff0bf; }.altar::before { left: -18px; transform: rotate(-24deg); }.altar::after { right: -18px; transform: rotate(24deg); }
.altar-title { position: absolute; top: 17px; padding: 5px 10px; border: 3px solid #6e3521; background: #ffd879; font-size: 12px; font-weight: 900; }.altar img { width: 74%; max-height: 84%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 0 rgba(61,47,33,.23)); }
.crowd-wrap { width: min(96%,600px); padding: 7px 7px 3px; border: 4px solid #684027; border-radius: 4px; background: #65a84e; box-shadow: inset 0 0 0 3px #a9d564; }.crowd-grid { display: flex; align-items: flex-end; justify-content: center; min-height: 78px; overflow: hidden; }.crowd-grid img { flex: 0 0 auto; width: 10.3%; max-height: 74px; object-fit: contain; image-rendering: pixelated; margin-left: -1.2%; filter: drop-shadow(0 2px 0 rgba(41,50,30,.18)); }
.invite-board { position: relative; width: min(94%,570px); padding: 18px 19px 20px; border: 5px solid #6b351f; border-radius: 5px; background: #ffecb3; box-shadow: inset 0 0 0 4px #e9b45d,0 7px 0 #874a2b,0 13px 25px rgba(83,47,29,.2); }
.invite-kicker { margin: 0 0 6px; text-align: center; font-size: 12px; font-weight: 900; color: #a74435; letter-spacing: .15em; }.invite-board h2 { margin: 0 0 10px; color: #773723; font-family: Georgia,"STSong",serif; font-size: clamp(24px,7vw,38px); text-align: center; }.invite-board h2 span { color: #d45655; }
.invite-board dl { display: grid; gap: 4px; margin: 0; }.invite-board dl div { display: grid; grid-template-columns: 54px 1fr; align-items: baseline; padding: 4px 0; border-bottom: 2px dashed rgba(131,74,40,.3); }.invite-board dt { font-weight: 900; color: #ae5037; }.invite-board dd { margin: 0; font-weight: 700; font-size: 14px; }
.rsvp-button { display: block; margin: 15px 0 -7px auto; padding: 9px 13px; border: 3px solid #572b1b; border-radius: 4px; color: #fff7d8; background: #bd4c3e; box-shadow: 0 4px 0 #6b3022; font-weight: 900; cursor: pointer; }.rsvp-button span { margin-left: 8px; }

/* 04 — album */
.albums-page { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 74px 17px 54px; background: radial-gradient(circle at 12px 12px,rgba(255,239,159,.27) 0 3px,transparent 4px) 0 0/30px 30px,linear-gradient(#71ac50,#3f8849 75%,#347840); }
.section-title { text-align: center; color: #fff4c7; text-shadow: 0 3px #315d39; }.section-title span { display: inline-block; padding: 5px 9px; border: 3px solid #5a2d1d; background: #d67637; box-shadow: 0 3px 0 #794328; font-size: 12px; font-weight: 900; }.section-title h2 { margin: 9px 0 5px; font-family: Georgia,"STSong",serif; font-size: clamp(28px,8vw,44px); }.section-title p { margin: 0 auto; max-width: 330px; font-size: 12px; font-weight: 700; }
.album-board { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; width: 100%; max-width: 560px; margin: 0 auto; padding: 15px; border: 5px solid #5a331f; border-radius: 5px; background: #2e7043; box-shadow: inset 0 0 0 4px #79b05b,0 7px 0 #274f34; }
.album-card { position: relative; min-width: 0; min-height: 212px; padding: 13px 8px 10px; border: 4px solid #7c4427; border-radius: 5px; background: #fff8de; box-shadow: inset 0 0 0 3px #e7c575,0 5px 0 #56301f; cursor: pointer; overflow: hidden; }.album-card::before,.album-card::after { content: ""; position: absolute; width: 28px; height: 28px; background: url("./assets/peach-blossom.png") center/contain no-repeat; image-rendering: pixelated; }.album-card::before { top: 3px; left: 3px; }.album-card::after { right: 3px; bottom: 3px; transform: rotate(120deg); }
.album-card img { width: 100%; height: 145px; object-fit: contain; image-rendering: pixelated; }.album-card span { display: grid; position: relative; z-index: 1; }.album-card b { color: #773620; font-size: 18px; }.album-card small { margin-top: 2px; color: #8a6749; font-weight: 700; }.album-card:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px #e7c575,0 1px 0 #56301f; }
.page-arrow { align-self: center; width: 46px; height: 42px; border: 4px solid #542d1e; border-radius: 4px; color: #fff5c7; background: #c45a38; box-shadow: 0 4px 0 #713a27; font-size: 23px; font-weight: 900; cursor: pointer; animation: bob 1.7s ease-in-out infinite; }

/* 05 — people */
.party-page { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 74px 12px 54px; background: radial-gradient(circle at 10px 10px,#f6d57d 0 2px,transparent 3px) 0 0/25px 25px,linear-gradient(180deg,#82bf55,#4a984d); }
.season-note { width: min(82%,470px); padding: 10px 14px; border: 4px solid #6c3821; border-radius: 5px; background: #ffedb2; box-shadow: inset 0 0 0 3px #ebb55a,0 5px 0 #8c4c2b; text-align: center; }.season-note p { margin: 2px 0; font-size: clamp(13px,3.8vw,17px); font-weight: 900; }
.party-gallery { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; align-content: start; width: min(100%,610px); margin-top: 3px; }.party-gallery button { min-width: 0; aspect-ratio: .78; padding: 3px; border: 3px solid #6b3b25; border-radius: 3px; background: #fff7d5; box-shadow: inset 0 0 0 2px #ebc66e,0 3px 0 #315b36; cursor: zoom-in; overflow: hidden; }.party-gallery img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; transition: transform .18s ease; }.party-gallery button:active img { transform: scale(1.12); }.party-page .page-arrow { margin-top: 6px; }

/* 06 — map */
.travel-page { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 84px 18px max(26px,env(safe-area-inset-bottom)); background: radial-gradient(circle at 15px 15px,rgba(87,145,74,.16) 0 3px,transparent 4px) 0 0/36px 36px,#f7e5aa; }
.map-heading { display: flex; align-items: center; gap: 12px; color: #315e3b; }.map-heading>span { display: grid; width: 62px; aspect-ratio: 1; place-items: center; border: 5px solid #68351f; border-radius: 7px; color: #fff1b6; background: #de7b3b; box-shadow: inset 0 0 0 4px #f4b355,0 5px 0 #98502e; font-family: Georgia,serif; font-size: 34px; font-weight: 900; }.map-heading small,.map-heading h2 { display: block; margin: 0; }.map-heading small { font-weight: 900; letter-spacing: .12em; }.map-heading h2 { font-family: Georgia,"STSong",serif; font-size: clamp(27px,8vw,43px); }
.route-map { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(94%,550px); min-height: 170px; padding: 20px; border: 5px solid #704027; border-radius: 6px; background: #8fc461; box-shadow: inset 0 0 0 4px #c5df84,0 6px 0 #99613c; }.route-map::before { content: ""; position: absolute; inset: 9px; border: 3px dashed rgba(255,245,189,.52); border-radius: 3px; pointer-events: none; }.map-pin { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; min-width: 76px; }.map-pin span { display: grid; width: 60px; height: 60px; place-items: center; border: 4px solid #60311f; border-radius: 4px; background: #ffda74; box-shadow: 0 4px 0 #815036; font-size: 27px; }.venue-pin span { color: #fff; background: #d75c54; }.map-pin b { padding: 4px 6px; border: 2px solid #5d3523; background: #fff0b7; font-size: 13px; }.route-line { position: relative; display: flex; flex: 1; justify-content: space-around; border-top: 5px dashed #fff0ac; margin: 0 8px; }.route-line i { width: 9px; height: 9px; margin-top: -7px; transform: rotate(45deg); background: #da6946; }
.travel-board { width: min(96%,550px); padding: 18px; border: 5px solid #6c3923; border-radius: 5px; background: #fff2c4; box-shadow: inset 0 0 0 4px #e5b861,0 6px 0 #9e5b34; }.travel-board h3 { margin: 0 0 16px; color: #784027; text-align: center; font-size: 17px; }.travel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.travel-options>div { min-height: 122px; padding: 11px 8px; border: 3px solid #9b6037; border-radius: 4px; background: #fff9dc; text-align: center; }.travel-icon { display: block; font-size: 28px; }.travel-options b { display: block; margin: 5px 0; color: #9a4631; font-size: 17px; }.travel-options p { margin: 0; font-size: 12px; line-height: 1.55; font-weight: 700; }.nav-button { display: block; width: 100%; margin-top: 13px; padding: 10px; border: 3px solid #5c2f1e; border-radius: 4px; color: #fff8d6; background: #447d49; box-shadow: 0 4px 0 #2c5134; text-decoration: none; text-align: center; font-weight: 900; }.arrive-button { width: min(76%,390px); padding: 14px; border: 4px solid #5d2f1e; border-radius: 5px; color: #fff6cf; background: #cf5548; box-shadow: inset 0 0 0 3px #e97b5d,0 6px 0 #783b28; font-size: 20px; font-weight: 900; cursor: pointer; }.arrive-button.celebration { animation: celebrate .55s ease; }.travel-page footer { margin-top: auto; color: #5e402d; font-size: 12px; font-weight: 900; }.travel-page footer span { color: #cf5548; }

/* shared controls */
.chapter-nav { position: fixed; z-index: 55; top: 50%; right: max(7px,calc((100vw - 680px)/2 + 7px)); display: grid; gap: 8px; transform: translateY(-50%); }.chapter-nav a { width: 9px; height: 9px; border: 2px solid rgba(255,248,209,.9); background: rgba(64,47,30,.48); box-shadow: 0 1px 0 rgba(58,34,21,.4); }.chapter-nav a.active { transform: scale(1.35); background: #ffd451; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: max(24px,env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 40px); padding: 10px 14px; transform: translate(-50%,30px); border: 3px solid #5f321f; border-radius: 4px; color: #48271d; background: #fff0b5; box-shadow: 0 5px 0 #9a5b37; font-weight: 900; font-size: 13px; text-align: center; opacity: 0; pointer-events: none; transition: .25s ease; }.toast.show { transform: translate(-50%,0); opacity: 1; }
dialog { width: min(calc(100vw - 24px),620px); max-width: none; margin: auto; padding: 0; border: 5px solid #5d311f; border-radius: 6px; color: var(--ink); background: #fff1be; box-shadow: inset 0 0 0 4px #e8b45d,0 16px 55px rgba(35,24,17,.55); }dialog::backdrop { background: rgba(22,42,28,.82); backdrop-filter: blur(2px); }.dialog-close { position: absolute; z-index: 5; top: 8px; right: 8px; width: 36px; height: 36px; border: 3px solid #592d1d; border-radius: 3px; color: #fff1c2; background: #bd4c40; font-size: 26px; line-height: 1; cursor: pointer; }
.carousel-dialog { padding: 14px 12px 11px; }.carousel-title { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 47px 8px 6px; color: #753923; }.carousel-title b { font-size: 19px; }.carousel-title span { font-size: 12px; font-weight: 900; }.carousel-stage { position: relative; display: grid; place-items: center; height: min(72svh,760px); min-height: 410px; overflow: hidden; border: 4px solid #744329; background: #2c5e3d; touch-action: pan-y; }.carousel-stage img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }.carousel-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 39px; height: 48px; place-items: center; transform: translateY(-50%); border: 3px solid #5b301f; color: #fff5cf; background: rgba(188,76,57,.88); box-shadow: 0 3px 0 #6b3825; font-size: 34px; cursor: pointer; }.carousel-arrow.prev { left: 7px; }.carousel-arrow.next { right: 7px; }.carousel-dialog>p { margin: 8px 0 0; text-align: center; font-size: 11px; font-weight: 900; }.pixel-dialog { width: min(calc(100vw - 38px),440px); padding: 35px 22px 22px; background: #87be5c; }.pixel-dialog img { width: 100%; max-height: 70svh; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(48,52,29,.25)); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease,transform .65s ease; }.reveal.visible { opacity: 1; transform: none; }
@keyframes float { 0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)} }@keyframes petalFall { from{transform:translate(-8vw,-8vh) rotate(0)}to{transform:translate(118vw,118vh) rotate(560deg)} }@keyframes spin { to{transform:rotate(360deg)} }@keyframes pulse { 50%{transform:scale(1.14)} }@keyframes bob { 50%{transform:translateY(6px)} }@keyframes celebrate { 25%{transform:rotate(-3deg) scale(1.04)}65%{transform:rotate(3deg) scale(1.04)} }
@media (min-width:681px){body{background:linear-gradient(90deg,#173b29,#214c31 50%,#173b29)}.page{box-shadow:0 0 45px rgba(0,0,0,.35)}.party-gallery{grid-template-columns:repeat(8,1fr)}}
@media (max-width:390px){.hero-sign{top:18.4%;font-size:30px}.hero-cast{width:67%}.wood-line{min-height:50px;font-size:14px}.portrait-page{padding-inline:10px}.couple-stage{min-height:270px}.identity-card{width:39vw;height:62vw}.flower-bed{margin-top:-52px}.album-card{min-height:184px}.album-card img{height:119px}.party-gallery{gap:5px}.party-gallery button{border-width:2px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* September refinement: supplied Stardew decorations and sprite animations */
.hero-sign {
  top: 18.4%;
  width: 61%;
  font-size: clamp(25px, 7.3vw, 50px);
  line-height: .9;
  transform: translateX(-50%);
}
.hero-cast { top: 46%; width: 58%; height: 31%; }
.animated-couple { position: relative; display: block; }
.animated-couple > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; opacity: 0; }
.hero-wave { position: absolute; left: 50%; bottom: -1%; width: 91%; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 5px 0 rgba(64,32,22,.28)); }
.hero-wave .base-couple { z-index:1; opacity:1; }
.hero-wave .wave-frame { z-index:2; opacity:0; }
.hero-wave .wave-one { animation:waveOne 4.8s steps(1,end) infinite; }
.hero-wave .wave-two { animation:waveTwo 4.8s steps(1,end) infinite; }
.hero-wave .wave-three { animation:waveThree 4.8s steps(1,end) infinite; }
.hero-pet { right: -1%; bottom: 0; width: 23%; }
.hero-actions { width: min(59%, 365px); bottom: max(20px,env(safe-area-inset-bottom)); gap: 8px; }
.hero-actions::before,.hero-actions::after { content:""; position:absolute; z-index:2; top:50%; width:42px; height:42px; transform:translateY(-50%); background-image:url("./assets/decor-1.jpg"); background-size:400% 200%; image-rendering:pixelated; border-radius:50%; filter:drop-shadow(0 3px 0 rgba(79,38,24,.36)); }
.hero-actions::before { left:-29px; background-position:0 0; }.hero-actions::after { right:-28px; background-position:67% 100%; }
.wood-line { min-height: 42px; padding: 7px 10px; border-width: 3px; box-shadow: inset 0 0 0 2px #f6bd63,0 4px 0 #884426,0 6px 12px rgba(43,25,14,.22); font-size: clamp(12px,3.25vw,16px); }
.falling-leaf { width: clamp(18px,6.3vw,36px)!important; }
.petal-rain img:nth-child(11){left:1%;animation-delay:-2s;animation-duration:11.7s}.petal-rain img:nth-child(12){left:28%;animation-delay:-7.1s;animation-duration:13s}.petal-rain img:nth-child(13){left:57%;animation-delay:-4.2s;animation-duration:10.4s}.petal-rain img:nth-child(14){left:82%;animation-delay:-9s;animation-duration:12.5s}

.portrait-page { padding-top: max(100px,13svh); gap: 11px; }
.wood-heading { display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; width:min(88%,490px); padding:10px 16px 10px 9px; border-radius:20px 6px 6px 20px; background:linear-gradient(#ffd37b,#e8a54e); }
.wood-heading .title-star { grid-row:1/3; display:grid; width:52px; aspect-ratio:1; place-items:center; border:4px solid #73351f; border-radius:9px; color:#ffe95c; background:#fff4bd; box-shadow:inset 0 0 0 3px #e9a94e; font-style:normal; font-size:31px; text-shadow:2px 2px #9d5b25; }
.wood-heading span { font-size:clamp(17px,4.8vw,27px); line-height:1; }.wood-heading strong { font-size:clamp(28px,8vw,50px); line-height:.94; }
.framed-hint { display:flex; align-items:center; gap:6px; padding:7px 12px 7px 7px; border:3px solid #6b3420; border-radius:14px 4px 4px 14px; color:#6f3924; background:#ffe9a6; box-shadow:0 3px 0 #92512c; }
.framed-hint i { display:grid; width:24px; aspect-ratio:1; place-items:center; border:2px solid #713720; border-radius:5px; color:#ffdb43; background:#fff7c9; font-style:normal; text-shadow:1px 1px #945022; }
.couple-stage { position:relative; min-height:315px; max-width:440px; align-items:center; }
.couple-stage::before { content:""; position:absolute; z-index:0; left:5%; right:5%; bottom:0; height:48px; border:4px solid #784528; border-radius:4px; background:repeating-linear-gradient(90deg,#b76f35 0 54px,#8f4d29 54px 58px),linear-gradient(#d99146,#a85d31); box-shadow:inset 0 5px 0 rgba(255,205,105,.5),0 5px 0 rgba(47,82,42,.28); }
.couple-stage .animated-couple { position:absolute; z-index:1; left:50%; bottom:-18px; width:min(76vw,360px); height:calc(100% - 19px); transform:translateX(-50%); filter:drop-shadow(0 6px 0 rgba(45,65,42,.22)); }
.cheek-heart-animation .action-frame { z-index:2; opacity:0; mix-blend-mode:multiply; }
.cheek-heart-animation:not(.play-once) .action-one { opacity:1; }
.cheek-heart-animation.play-once .action-one { animation:actionOne 4.2s steps(1,end) 1 forwards; }
.cheek-heart-animation.play-once .action-two { animation:actionTwo 4.2s steps(1,end) 1 forwards; }
.cheek-heart-animation.play-once .action-three { animation:actionThree 4.2s steps(1,end) 1 forwards; }
.final-singles { position:absolute; z-index:1; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:0; opacity:0; }
.final-singles img { width:46%; height:100%; object-fit:contain; image-rendering:pixelated; }
.cheek-heart-animation.play-once .final-singles { animation:finalSingles 4.2s steps(1,end) 1 forwards; }
.identity-hotspot { position:absolute; z-index:4; bottom:0; height:92%; padding:0; border:0; background:transparent; cursor:pointer; }.groom-hotspot{left:11%;width:38%}.bride-hotspot{right:9%;width:40%}
.flower-bed { margin-top:-35px; }
.task-button { position:relative; overflow:visible; margin-top:2px; }

.invitation-page { padding-top:95px; }
.quest-tag { position:absolute; z-index:4; top:20px; left:14px; display:flex; align-items:center; gap:8px; min-height:48px; padding:7px 15px 7px 7px; border:4px solid #65321e; border-radius:18px 6px 6px 18px; color:#69351f; background:#ffd276; box-shadow:inset 0 0 0 3px #f3ae51,0 4px 0 #874724; font-family:"Microsoft YaHei",sans-serif; font-weight:900; }
.quest-tag span { display:grid; width:30px; aspect-ratio:1; place-items:center; border:3px solid #6e361e; border-radius:7px; color:#ffe84f; background:#fff2ad; text-shadow:1px 1px #9a512a; }
.altar { background:url("./assets/page3-bg.png") left center/cover no-repeat; }
.crowd-wrap { overflow:hidden; padding:9px 7px 5px; background-color:#65a84e; background-image:radial-gradient(circle,#fffce2 0 3px,transparent 4px); background-size:20px 20px; }
.crowd-grid { justify-content:flex-start; min-height:82px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:4px 9px; }.crowd-grid::-webkit-scrollbar{display:none}.crowd-grid img{width:58px;min-width:58px;max-height:78px;margin:0 2px;scroll-snap-align:center}
.invite-board,.invite-board dd,.invite-board dt,.section-title,.season-note,.travel-board { font-family:"Microsoft YaHei","Courier New",sans-serif; }
.invite-kicker,.invite-board h2,.section-title h2 { font-weight:900; letter-spacing:.02em; text-shadow:1px 1px 0 rgba(255,255,255,.55); }
.rsvp-button { position:relative; min-width:128px; margin-right:12px; overflow:visible; }
.rsvp-button::before,.rsvp-button::after { content:""; position:absolute; pointer-events:none; background-image:url("./assets/button-1.jpg"); background-size:150px 150px; background-repeat:no-repeat; image-rendering:pixelated; mix-blend-mode:multiply; }.rsvp-button::before{left:-55px;bottom:-15px;width:62px;height:58px;background-position:42% 72%}.rsvp-button::after{right:-28px;top:-36px;width:47px;height:48px;background-position:64% 5%}

.albums-page .section-title,.albums-page .album-board,.albums-page .page-arrow{position:relative;z-index:1}.section-title span,.section-title p,.album-card b,.album-card small{font-family:"Microsoft YaHei","Courier New",sans-serif;font-weight:900}

.party-page { background:#63aa52 url("./assets/page5-bg.jpg") center/cover no-repeat; }
.party-page::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(79,156,67,.08),rgba(40,108,51,.35)); }
.season-note { position:relative; z-index:2; background:rgba(255,237,178,.94); }
.party-gallery { position:relative; z-index:2; padding:8px; border:4px solid #6b3b25; border-radius:5px; background:rgba(83,151,69,.72); box-shadow:inset 0 0 0 3px rgba(255,245,197,.48); }
.party-gallery button { transition:transform .2s ease,filter .2s ease; animation:cardBreathe 4s ease-in-out infinite; }.party-gallery button:nth-child(3n){animation-delay:-1.2s}.party-gallery button:nth-child(4n){animation-delay:-2.4s}.party-gallery button:hover,.party-gallery button:focus-visible,.party-gallery button:active,.party-gallery button.is-peeking{position:relative;z-index:6;transform:scale(1.18);filter:drop-shadow(0 7px 4px rgba(45,59,34,.35))}.party-gallery button:hover img,.party-gallery button:active img,.party-gallery button.is-peeking img{transform:scale(1.08)}

.travel-page { background:radial-gradient(circle at 15px 15px,rgba(87,145,74,.13) 0 3px,transparent 4px) 0 0/36px 36px,linear-gradient(180deg,rgba(247,229,170,.6) 0,rgba(247,229,170,.92) 31%,#f7e5aa 47%),url("./assets/page5-bg.jpg") center top/auto 36% no-repeat,#f7e5aa; }
.travel-spring-decor { position:absolute; z-index:0; width:72px; height:72px; background-repeat:no-repeat; background-size:contain; image-rendering:pixelated; opacity:.82; pointer-events:none; filter:drop-shadow(0 4px 0 rgba(74,72,35,.18)); }.spring-left{left:4px;top:17%;background-image:url("./assets/maple-leaf.png");transform:rotate(-24deg)}.spring-right{right:7px;bottom:4%;background-image:url("./assets/peach-blossom.png");transform:rotate(18deg)}
.route-map::after { content:""; position:absolute; right:8px; top:-29px; width:52px; height:52px; background:url("./assets/peach-blossom.png") center/contain no-repeat; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(70,47,31,.2)); }

@keyframes waveOne{0%,17%,40%,100%{opacity:0}18%,39%{opacity:1}}@keyframes waveTwo{0%,39%,61%,100%{opacity:0}40%,60%{opacity:1}}@keyframes waveThree{0%,60%,80%,100%{opacity:0}61%,79%{opacity:1}}
@keyframes actionOne{0%,31%{opacity:1}32%,100%{opacity:0}}@keyframes actionTwo{0%,31%,64%,100%{opacity:0}32%,63%{opacity:1}}@keyframes actionThree{0%,63%,91%,100%{opacity:0}64%,90%{opacity:1}}@keyframes finalSingles{0%,90%{opacity:0}91%,100%{opacity:1}}
@keyframes cardBreathe{0%,100%{translate:0 0}50%{translate:0 -3px}}

@media (max-width:390px){.hero-sign{top:19%;font-size:25px}.hero-cast{width:63%;top:46%}.hero-actions{width:61%}.hero-actions::before{left:-25px}.hero-actions::after{right:-25px}.portrait-page{padding-top:96px}.couple-stage{min-height:285px}.couple-stage .animated-couple{width:82vw}.flower-bed{margin-top:-30px}.quest-tag{top:18px}.travel-spring-decor{opacity:.4}}
.pixel-dialog.real-photo-dialog { background:#fff1be; }
.pixel-dialog.real-photo-dialog img { max-height:76svh; object-fit:cover; image-rendering:auto; border:4px solid #704027; box-shadow:0 5px 0 #985633; filter:none; }

/* September refinement 2: seamless sprites, reference-led boards and galleries */
.hero-wave .base-couple {
  z-index: 2;
  opacity: 0;
  animation: heroBaseLoop 6s steps(1,end) infinite;
}
.hero-wave .wave-frame {
  z-index: 2;
  opacity: 0;
  transform: scale(1.03,1.065);
  transform-origin: 50% 78%;
}
.hero-wave .wave-one { animation: heroWaveOne 6s steps(1,end) infinite; }
.hero-wave .wave-two { animation: heroWaveTwo 6s steps(1,end) infinite; }
.hero-wave .wave-three { animation: heroWaveThree 6s steps(1,end) infinite; }
.petal-rain .left-extra-petal { width: clamp(15px,5.4vw,31px); }
.petal-rain img:nth-child(15){left:0%;animation-delay:-1.1s;animation-duration:8.6s}
.petal-rain img:nth-child(16){left:7%;animation-delay:-4.8s;animation-duration:10.8s}
.petal-rain img:nth-child(17){left:15%;animation-delay:-7.3s;animation-duration:9.4s}
.petal-rain img:nth-child(18){left:23%;animation-delay:-2.9s;animation-duration:11.6s}

.portrait-page { padding-top:max(82px,10svh); }
.wood-heading {
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:min(92%,520px);
  min-height:128px;
  padding:15px 42px 17px;
  border:6px solid #592817;
  border-radius:14px 14px 8px 8px;
  color:#ffe585;
  background:
    linear-gradient(90deg,transparent 0 31%,rgba(92,43,19,.23) 31% 32%,transparent 32% 67%,rgba(92,43,19,.23) 67% 68%,transparent 68%),
    repeating-linear-gradient(0deg,#a85125 0 22px,#b75e2b 22px 44px);
  box-shadow:inset 0 0 0 4px #df8240,inset 0 -8px 0 rgba(87,37,19,.18),0 7px 0 #71381f,0 12px 20px rgba(61,36,23,.2);
  text-align:center;
}
.wood-heading::before,.wood-heading::after {
  content:"";
  position:absolute;
  top:11px;
  width:11px;
  height:11px;
  border:2px solid #4d2518;
  border-radius:50%;
  background:#f2c170;
  box-shadow:0 87px 0 #f2c170;
}
.wood-heading::before { left:12px; }
.wood-heading::after { right:12px; }
.wood-heading span,.wood-heading strong {
  color:#ffe487;
  font-family:Impact,"Microsoft YaHei",sans-serif;
  font-weight:900;
  letter-spacing:.035em;
  -webkit-text-stroke:1px #572716;
  text-shadow:0 4px 0 #542516,2px 0 0 #542516,-2px 0 0 #542516;
}
.wood-heading span { font-size:clamp(16px,4.6vw,26px); line-height:1.05; }
.wood-heading strong { font-size:clamp(34px,10vw,62px); line-height:.96; }
.framed-hint {
  display:block;
  min-width:min(70%,360px);
  padding:8px 16px;
  border:4px solid #70351f;
  border-radius:4px;
  color:#5d2b1b;
  background:linear-gradient(#ffe59a,#efba62);
  box-shadow:inset 0 0 0 2px #fff0b3,0 4px 0 #8b4b29;
  text-align:center;
  font-size:13px;
}
.couple-stage .animated-couple { bottom:18px; }
.cheek-heart-animation .action-frame {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  opacity:0;
  background-image:url("./assets/cheek-actions-sprite.png");
  background-repeat:no-repeat;
  background-size:300% 100%;
  image-rendering:pixelated;
  mix-blend-mode:normal;
}
.cheek-heart-animation .action-one { background-position:0 0; }
.cheek-heart-animation .action-two { background-position:50% 0; }
.cheek-heart-animation .action-three { background-position:100% 0; }
.final-singles { display:block; }
.final-singles img {
  position:absolute;
  bottom:0;
  width:auto;
  height:100%;
  object-fit:contain;
}
.final-singles img:first-child { left:-8%; }
.final-singles img:last-child { right:-12%; }
.task-button { overflow:hidden; }

.crowd-wrap {
  width:min(96%,600px);
  padding:9px 0 6px;
  background-color:#65a84e;
  background-image:radial-gradient(circle,#fffce2 0 3px,transparent 4px);
  background-size:20px 20px;
}
.crowd-grid {
  display:block;
  min-height:102px;
  overflow:hidden;
  padding:5px 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.crowd-track {
  display:flex;
  align-items:flex-end;
  gap:5px;
  width:max-content;
  padding-inline:9px;
  animation:crowdMarquee 34s linear infinite;
  will-change:transform;
}
.crowd-person {
  flex:0 0 var(--crowd-width,66px);
  width:var(--crowd-width,66px);
  height:88px;
  display:grid;
  align-items:end;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  transform-origin:50% 100%;
  animation:crowdPulse var(--crowd-duration,3.2s) ease-in-out var(--crowd-delay,0s) infinite;
}
.crowd-wrap:hover .crowd-track,.crowd-wrap:focus-within .crowd-track { animation-play-state:paused; }
.invite-board { padding:16px 20px 18px; }
.invite-kicker { margin-bottom:4px; color:#a33d35; font-size:clamp(15px,4.1vw,20px); }
.invite-board h2 { margin-bottom:4px; font-size:clamp(25px,7vw,39px); }
.invite-subtitle { margin:0 0 10px; color:#9b4c36; text-align:center; font-size:12px; font-weight:800; letter-spacing:.08em; }
.invite-board dl { gap:1px; }
.invite-board dl div { grid-template-columns:86px 1fr; padding:5px 0; }
.invite-board dt { display:flex; align-items:center; gap:5px; color:#7c3b2a; }
.invite-icon {
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  color:#fff2b1;
  background:#c94e42;
  border:2px solid #763324;
  border-radius:3px;
  font-size:14px;
  line-height:1;
}
.invite-board dd { font-size:13px; line-height:1.35; }
.rsvp-button::before,.rsvp-button::after { content:none; }

.albums-page .section-title,.albums-page .album-board,.albums-page .page-arrow { position:relative; z-index:1; }
.album-card { padding-top:10px; }
.album-sprite {
  display:block;
  width:100%;
  height:148px;
  background-image:url("./assets/album-couples-sprite.png");
  background-size:200% 200%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 4px 0 rgba(62,51,31,.18));
}
.album-sprite-white { background-position:0 0; }
.album-sprite-retro { background-position:100% 0; }
.album-sprite-hepburn { background-position:0 100%; }
.album-sprite-mermaid { background-position:100% 100%; }

.pixel-dialog {
  overflow:hidden;
  transform-origin:50% 72%;
}
.pixel-dialog[open] { animation:dialogPop .34s cubic-bezier(.2,.9,.24,1.16); }
.pixel-dialog::after {
  content:"正在打开照片…";
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  padding:8px 11px;
  border:2px solid #67402b;
  border-radius:4px;
  color:#66412b;
  background:#fff0b8;
  font-size:12px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.pixel-dialog.is-loading::after { opacity:1; }
.pixel-dialog img {
  opacity:0;
  transform:scale(.96) translateY(7px);
  transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1);
}
.pixel-dialog img.is-ready { opacity:1; transform:none; }
.pixel-dialog-caption { margin:10px 0 0; color:#6a3523; text-align:center; font-weight:900; }
.pixel-dialog-caption:empty { display:none; }

@keyframes heroBaseLoop{0%,19%,81%,100%{opacity:1}20%,80%{opacity:0}}
@keyframes heroWaveOne{0%,19%,41%,100%{opacity:0}20%,40%{opacity:1}}
@keyframes heroWaveTwo{0%,40%,61%,100%{opacity:0}41%,60%{opacity:1}}
@keyframes heroWaveThree{0%,60%,81%,100%{opacity:0}61%,80%{opacity:1}}
@keyframes crowdMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes crowdPulse{0%,100%{transform:scale(.92)}50%{transform:scale(var(--crowd-scale,1.12))}}
@keyframes dialogPop{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}

@media (max-width:390px){
  .wood-heading{min-height:116px;padding-inline:34px}
  .couple-stage .animated-couple{width:86vw}
  .album-sprite{height:124px}
  .crowd-person{height:82px}
}

/* September refinement 3: compact controls, centered invitation, group photo, food and guest sharing */
.hero-actions::before,
.hero-actions::after { content:none; }

.wood-heading span { font-size:clamp(20px,5.8vw,34px); }
.wood-heading strong { font-size:clamp(42px,12vw,74px); }
.task-button {
  width:min(60%,320px);
  padding:9px 12px;
  border-width:3px;
  box-shadow:inset 0 0 0 2px #f6b85e,0 4px 0 #794022;
}
.task-button span { font-size:clamp(14px,3.9vw,19px); }
.task-button small { font-size:10px; letter-spacing:.07em; }

.invitation-page {
  justify-content:flex-start;
  gap:8px;
  padding:76px 12px max(12px,env(safe-area-inset-bottom));
}
.invitation-page .altar {
  order:1;
  width:min(62%,360px);
  height:27svh;
  min-height:190px;
}
.altar::before,
.altar::after { content:none; }
.invitation-page .invite-board {
  order:2;
  width:min(88%,520px);
  margin-inline:auto;
  padding:13px 18px 15px;
}
.invitation-page .crowd-wrap {
  order:3;
  width:min(64%,400px);
  margin-top:auto;
  padding-block:5px 3px;
}
.invitation-page .crowd-grid { min-height:70px; }
.invitation-page .crowd-person { height:64px; }
.invitation-page .invite-board dl div { padding:3px 0; }
.invitation-page .rsvp-button { margin-top:10px; }

.party-gallery button {
  background:rgba(62,132,60,.28);
  box-shadow:inset 0 0 0 2px rgba(255,240,174,.38),0 3px 0 #315b36;
}
.party-sprite,
.pixel-dialog-sprite {
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  transform-origin:50% 100%;
}
.party-gallery .party-sprite { transition:transform .18s ease; }
.party-gallery button:hover .party-sprite,
.party-gallery button:active .party-sprite,
.party-gallery button.is-peeking .party-sprite { transform:scale(1.08); }
.pixel-dialog-sprite {
  width:min(72vw,320px);
  height:min(64svh,520px);
  margin:auto;
  filter:drop-shadow(0 8px 0 rgba(48,52,29,.25));
}

.group-photo-dialog {
  width:min(calc(100vw - 18px),650px);
  padding:12px;
  background:#417b48;
}
.group-photo-dialog img {
  width:100%;
  max-height:72svh;
  object-fit:contain;
  border:4px solid #6c3b24;
  background:#e9c978;
  image-rendering:pixelated;
  box-shadow:0 5px 0 #294f32;
}
.group-photo-heading { display:grid; gap:2px; padding:1px 44px 10px 5px; color:#fff3c1; }
.group-photo-heading small { font-size:10px; font-weight:900; letter-spacing:.12em; }
.group-photo-heading b { font-size:clamp(15px,4vw,20px); }
.group-photo-dialog>p { margin:10px 0 2px; color:#fff1bd; text-align:center; font-size:12px; font-weight:900; }
.group-photo-dialog[open] { animation:dialogPop .36s cubic-bezier(.2,.9,.24,1.16); }

.food-section {
  width:min(96%,550px);
  padding:15px;
  border:5px solid #6c3923;
  border-radius:5px;
  background:#fff2c4;
  box-shadow:inset 0 0 0 4px #e5b861,0 6px 0 #9e5b34;
}
.food-section header { text-align:center; }
.food-section header small { color:#b6573a; font-size:10px; font-weight:900; letter-spacing:.13em; }
.food-section h3 { margin:3px 0 4px; color:#774027; font-size:22px; }
.food-section header p { margin:0 0 12px; color:#76533c; font-size:12px; font-weight:700; }
.food-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.food-card {
  overflow:hidden;
  border:3px solid #744027;
  border-radius:4px;
  background:#fff9dc;
  box-shadow:0 3px 0 #a86139;
}
.food-card img { width:100%; aspect-ratio:1; object-fit:cover; image-rendering:pixelated; }
.food-card div { display:grid; gap:2px; padding:8px; text-align:center; }
.food-card b { color:#a14531; font-size:16px; }
.food-card span { color:#76533c; font-size:10px; line-height:1.35; font-weight:700; }
.travel-page { min-height:auto; padding-bottom:40px; }
.travel-page>.page-arrow { margin-top:-4px; }

.share-page {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:100svh;
  padding:80px 14px max(30px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12px 12px,rgba(255,239,159,.22) 0 3px,transparent 4px) 0 0/30px 30px,
    linear-gradient(180deg,#5fa653,#2f7447);
}
.share-heading { color:#fff2bd; text-align:center; text-shadow:0 3px #315d39; }
.share-heading span { display:inline-block; padding:4px 8px; border:3px solid #5b2f1e; background:#ce683b; box-shadow:0 3px 0 #7b4429; font-size:10px; font-weight:900; letter-spacing:.12em; }
.share-heading h2 { margin:8px 0 5px; font-family:Georgia,"STSong",serif; font-size:clamp(29px,8.5vw,46px); }
.share-heading p { margin:0; font-size:12px; font-weight:800; }
.shared-album,
.blessing-board {
  width:min(100%,570px);
  margin-inline:auto;
  padding:14px;
  border:5px solid #63351f;
  border-radius:6px;
  background:#ffefb9;
  box-shadow:inset 0 0 0 4px #e9b75f,0 7px 0 #315e39;
}
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.panel-title small { color:#b75b3c; font-size:9px; font-weight:900; letter-spacing:.11em; }
.panel-title h3 { margin:1px 0 0; color:#743b25; font-size:21px; }
.upload-button,
.submit-blessing,
.handwrite-actions button {
  display:inline-grid;
  place-items:center;
  min-height:38px;
  padding:8px 11px;
  border:3px solid #5d301f;
  border-radius:4px;
  color:#fff5ca;
  background:#bd4e40;
  box-shadow:0 3px 0 #703825;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.shared-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; min-height:150px; }
.shared-photo-grid img { width:100%; aspect-ratio:1; object-fit:cover; border:3px solid #70402a; background:#d6b76e; }
.shared-empty { grid-column:1/-1; display:grid; place-items:center; align-content:center; gap:4px; min-height:150px; border:3px dashed #a66b3d; color:#795037; background:#fff8d8; text-align:center; }
.shared-empty span { font-size:28px; }.shared-empty b { font-size:13px; }.shared-empty small { font-size:10px; }
.shared-status { margin:10px 0 0; color:#865c3f; font-size:10px; line-height:1.45; font-weight:700; text-align:center; }
.blessing-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.blessing-tabs button { padding:8px; border:3px solid #7a4528; color:#764127; background:#e8bd6c; font-weight:900; cursor:pointer; }
.blessing-tabs button.active { color:#fff5cd; background:#4c884e; box-shadow:inset 0 0 0 2px #85b960; }
.blessing-panel { display:none; gap:10px; }
.blessing-panel.active { display:grid; }
.blessing-panel label { display:grid; gap:5px; color:#744229; font-size:12px; font-weight:900; }
.blessing-panel input,
.blessing-panel textarea { width:100%; padding:10px; border:3px solid #8b5732; border-radius:3px; color:#493024; background:#fffbe6; font:inherit; font-size:14px; resize:vertical; }
.canvas-wrap { position:relative; border:4px solid #75422a; background:#fffbe7; box-shadow:inset 0 0 0 3px #ecd28c; }
.canvas-wrap canvas { display:block; width:100%; height:220px; touch-action:none; cursor:crosshair; }
.canvas-wrap span { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:rgba(114,77,48,.34); font-weight:900; pointer-events:none; }
.canvas-wrap.has-ink span { display:none; }
.handwrite-actions { display:flex; justify-content:space-between; gap:8px; }
.handwrite-actions button:first-child { color:#75422a; background:#efc774; }
.blessing-list { display:grid; gap:8px; margin-top:14px; }
.blessing-empty { padding:12px; border:2px dashed #ad7746; color:#866044; background:#fff8d8; text-align:center; font-size:12px; font-weight:800; }
.blessing-item { padding:10px; border:3px solid #8c5734; background:#fff9dc; box-shadow:0 3px 0 #bb7e45; }
.blessing-item header { display:flex; justify-content:space-between; gap:8px; color:#a44834; font-size:11px; font-weight:900; }
.blessing-item p { margin:7px 0 0; color:#5f412e; line-height:1.55; font-size:13px; font-weight:700; }
.blessing-item img { width:100%; max-height:190px; margin-top:7px; object-fit:contain; border:2px solid #b6844f; background:#fffdf2; }
.share-page footer { margin-top:auto; color:#fff0bd; text-align:center; font-size:12px; font-weight:900; }
.share-page footer span { color:#ffd14e; }
.share-page footer a { display:block; margin-top:7px; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.guest-content-note { margin:4px 0 0; color:#6f5136; font-size:11px; line-height:1.5; text-align:center; }

@media (max-width:390px) {
  .task-button { width:64%; }
  .invitation-page .altar { min-height:175px; }
  .invitation-page .crowd-wrap { width:67%; }
  .food-section { padding:12px; }
  .food-grid { gap:7px; }
  .shared-album,.blessing-board { padding:11px; }
  .upload-button { padding-inline:8px; font-size:11px; }
  .canvas-wrap canvas { height:195px; }
}