@font-face { font-family: 'Zen Maru Gothic'; font-weight: 500; font-display: swap; src: url(fonts/zen-maru-gothic-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Maru Gothic'; font-weight: 500; font-display: swap; src: url(fonts/zen-maru-gothic-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zen Maru Gothic'; font-weight: 700; font-display: swap; src: url(fonts/zen-maru-gothic-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Maru Gothic'; font-weight: 700; font-display: swap; src: url(fonts/zen-maru-gothic-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Klee One'; font-weight: 600; font-display: swap; src: url(fonts/klee-one-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Klee One'; font-weight: 600; font-display: swap; src: url(fonts/klee-one-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kaisei Tokumin'; font-weight: 700; font-display: swap; src: url(fonts/kaisei-tokumin-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kaisei Tokumin'; font-weight: 700; font-display: swap; src: url(fonts/kaisei-tokumin-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kaisei Tokumin'; font-weight: 700; font-display: swap; src: url(fonts/kaisei-tokumin-700-kana.woff2) format('woff2'); unicode-range: U+3000-30FF, U+4E00-9FFF; }

:root {
  --night: #151a3a; --deep: #0d1030; --ink: #22203a; --lantern: #ee5d3b; --amber: #ffb14e;
  --paper: #f7ebd8; --paper-edge: #e3cfad; --gold: #ffd67e; --sakura: #ff9cc2; --mint: #79e3c6;
  --text: #fff8ec; --muted: #cfc8ea;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 14px; --pill: 999px;
  --ui: 'Zen Maru Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Klee One', 'Zen Maru Gothic', 'Bradley Hand', cursive;
  --title: 'Kaisei Tokumin', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22,.7,.2,1);
  --backdrop: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--deep); color: var(--text); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body::before { content: ''; position: fixed; inset: -60px; background: var(--backdrop) center / cover no-repeat, var(--deep); filter: blur(30px) brightness(.42) saturate(1.15); transform: translateZ(0); }
button, a, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- the frame */
.film { position: fixed; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; container-type: size; background: var(--deep); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (min-aspect-ratio: 10/16) { .film { width: calc(100vh * 9 / 16); width: calc(100dvh * 9 / 16); box-shadow: 0 0 80px #000a; } }
.stage { position: absolute; inset: 0; overflow: hidden; }
.art { position: absolute; }
.plate, .shot, .fx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.plate { z-index: 0; }
.shot { z-index: 1; opacity: 0; }
.shot.on { opacity: 1; }
.fx { z-index: 4; pointer-events: none; }
.scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); background: linear-gradient(#0b0d2733, #0b0d2799 45%, #0b0d27dd); }
.film[data-focus="true"] .scrim { opacity: 1; }
.props { position: absolute; inset: 0; z-index: 5; }
.flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: 0; }

/* Film finish: grain, vignette and a faint gate weave, all at 12 frames a second. */
.film-finish { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.film-finish i { position: absolute; inset: 0; }
.grain { inset: -50% !important; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(12) infinite; }
.vignette { background: radial-gradient(125% 90% at 50% 45%, transparent 55%, #07081a88 100%); }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-7%,4%) } 50% { transform: translate(5%,-6%) } 75% { transform: translate(-3%,-2%) } 100% { transform: translate(0,0) } }
.art { animation: weave 2s steps(24) infinite; }
@keyframes weave { 0%,100% { translate: 0 0 } 20% { translate: .4px -.3px } 40% { translate: -.3px .2px } 60% { translate: .2px .4px } 80% { translate: -.4px -.2px } }

/* ---------------------------------------------------------------- chrome */
.chrome { position: absolute; z-index: 20; top: max(var(--s4), env(safe-area-inset-top)); right: max(var(--s4), env(safe-area-inset-right)); display: flex; gap: var(--s2); align-items: center; }
.icon-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff33; background: #0d103066; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 0; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .spk { fill: var(--text); stroke: none; }
.icon-button[data-state="off"] .wave, .icon-button[data-state="on"] .mute { display: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s5); border-radius: var(--pill); border: 1px solid #ffe7b566; background: linear-gradient(#ffd67ef0, #ffb14ef0); color: #3a1d12; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 6px 20px #0006, inset 0 1px 0 #fff8; }
.pill.small { min-height: 36px; padding: var(--s1) var(--s4); font-size: 13px; background: #0d103066; color: var(--text); border-color: #ffffff33; box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pill.quiet { background: #ffffff14; color: var(--text); border-color: #ffffff33; box-shadow: none; }
.pill:disabled { opacity: .6; }
.link { background: none; border: 0; padding: var(--s2); min-height: 44px; color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #ffffff66; font-size: 14px; }

/* ---------------------------------------------------------------- subtitles, hints, choices */
.subtitle { position: absolute; z-index: 12; left: 5%; right: 5%; bottom: calc(env(safe-area-inset-bottom) + 6.5%); margin: 0; text-align: center; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.subtitle[data-on="true"] { opacity: 1; }
.sub { margin: 0; display: grid; justify-items: center; gap: var(--s1); }
.sub-name { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px #000c; }
.sub-text { font-size: 18px; font-size: clamp(16px, 4.7cqw, 24px); line-height: 1.42; font-weight: 700; text-wrap: balance; max-width: 26em; color: #fffdf6;
  text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 10px #0009, 1px 1px 0 #1b0f22, -1px -1px 0 #1b0f22, 1px -1px 0 #1b0f22, -1px 1px 0 #1b0f22; }
.sub-vivian .sub-text { color: #fff0f5; }
.sub-kenneth .sub-text { color: #effff8; }
.sub-vivian .sub-name { color: var(--sakura); }
.sub-kenneth .sub-name { color: var(--mint); }
.sub-text { animation: subIn .35s var(--ease); }
@keyframes subIn { from { opacity: 0; transform: translateY(6px) } }
.hint { position: absolute; z-index: 12; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 18%); margin: 0; text-align: center; font-size: 14px; letter-spacing: .06em; color: var(--paper); text-shadow: 0 1px 6px #000; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hint[data-on="true"] { opacity: 1; animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55 } }
.choices { position: absolute; z-index: 13; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 8%); display: flex; justify-content: center; gap: var(--s4); padding: 0 var(--s4); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); flex-wrap: wrap; }
.choices[data-on="true"] { opacity: 1; pointer-events: auto; }
.lantern-choice { position: relative; min-width: 136px; min-height: 64px; padding: var(--s4) var(--s5) var(--s3); border-radius: 26px; border: 0; background: radial-gradient(120% 90% at 50% 40%, #fff6e4, #f3d9ac 70%, #d9a36d); color: #4a1f14; font-weight: 700; font-size: 16px; box-shadow: 0 0 0 3px var(--lantern) inset, 0 0 26px #ffb14e88, 0 10px 24px #000a; animation: sway 3.2s ease-in-out infinite; transform-origin: 50% -30px; }
.lantern-choice:nth-child(2) { animation-delay: -1.1s; }
.lantern-choice .lantern-cap { position: absolute; left: 30%; right: 30%; top: -6px; height: 10px; border-radius: 4px; background: #2a1c1c; }
.lantern-choice.quiet { background: radial-gradient(120% 90% at 50% 40%, #e9e4f7, #bfb6e0 75%); color: #26213f; box-shadow: 0 0 0 3px #6d6497 inset, 0 10px 24px #000a; }
.lantern-choice small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.lantern-choice:active { transform: scale(.97); }
@keyframes sway { 50% { rotate: 2deg } }

/* ---------------------------------------------------------------- opening: Lunet's letter */
.opening { position: absolute; z-index: 14; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 2.5%); display: grid; justify-items: center; gap: var(--s1); opacity: 0; pointer-events: none; transition: opacity .6s; }
.opening[data-on="true"] { opacity: 1; pointer-events: auto; }
.opening .link { font-size: 13px; color: #fff8ecd9; text-shadow: 0 1px 4px #000; }
.envelope { position: absolute; z-index: 11; left: 50%; top: 58%; width: 72%; aspect-ratio: 1.55; padding: 0; border: 0; background: none; transform: translate(-50%, 140%) rotate(-4deg); transition: transform 1s var(--ease), opacity .8s; opacity: 0; perspective: 900px; }
.envelope[data-on="true"] { transform: translate(-50%, -50%) rotate(-2deg); opacity: 1; }
.envelope[data-on="true"]:not(.open) { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -6px } }
.envelope-back, .envelope-front, .envelope-flap, .envelope-card { position: absolute; inset: 0; border-radius: 6px; }
.envelope-back { background: #e9dcc3; box-shadow: 0 18px 40px #0008; }
.envelope-front { background: linear-gradient(160deg, #fbf3e3, #efe1c6); clip-path: polygon(0 32%, 50% 62%, 100% 32%, 100% 100%, 0 100%); display: grid; place-content: end center; padding-bottom: 9%; text-align: center; color: #3b2a2a; }
.envelope-for { font-family: var(--hand); font-size: 15px; font-size: clamp(13px, 3.4cqw, 17px); opacity: .7; }
.envelope-name { font-family: var(--hand); font-weight: 600; font-size: 24px; font-size: clamp(20px, 6.2cqw, 32px); line-height: 1.2; max-width: 16ch; min-height: 1.2em; overflow-wrap: anywhere; }
.envelope-seal { position: absolute; left: 50%; top: 57%; width: 13%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a6b, #d63b2b 60%, #a82a20); box-shadow: 0 2px 6px #0006; }
.envelope-seal::after { content: ''; position: absolute; inset: 26%; border-radius: 50% 50% 50% 0; background: #ffd0a8; transform: rotate(-45deg); opacity: .8; }
.envelope-flap { background: linear-gradient(#f4e7cf, #e7d5b3); clip-path: polygon(0 0, 100% 0, 50% 62%); transform-origin: 50% 0; transition: transform .7s var(--ease); z-index: 3; }
.envelope.open .envelope-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.open .envelope-card { transform: translateY(-62%); opacity: 1; }
.envelope-card { inset: 6% 6%; opacity: 0; background: #fffaf0; display: grid; place-content: center; text-align: center; gap: var(--s1); color: #2b2240; transition: transform 1s .35s var(--ease), opacity .3s .3s; z-index: 1; box-shadow: 0 6px 16px #0003; }
.envelope.open .envelope-front { z-index: 2; }
.card-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lantern); }
.card-couple { font-family: var(--title); font-size: 26px; font-size: clamp(20px, 6.4cqw, 34px); }
.card-line { font-family: var(--hand); font-size: 15px; }
.word { display: inline-block; white-space: nowrap; }
.envelope .ink, .lantern-name .ink, .tag-date .ink, .poster-venue .ink, .shell-wish .ink { opacity: 0; animation: ink .3s ease-out forwards; display: inline-block; white-space: pre; }
@keyframes ink { from { opacity: 0; filter: blur(2px); transform: translateY(1px) } to { opacity: 1; filter: none; transform: none } }
.title-card { position: absolute; z-index: 10; inset: 14% 0 auto; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); color: #fffaf0; text-shadow: 0 2px 16px #1b1a4a, 0 0 2px #0008; }
.title-card[data-on="true"] { opacity: 1; }
.title-kicker { margin: 0; font-family: var(--title); letter-spacing: .3em; font-size: 14px; color: var(--gold); }
.title-couple { margin: var(--s2) 0; font-family: var(--title); font-size: 40px; font-size: clamp(32px, 11cqw, 60px); line-height: 1.05; }
.title-line { margin: 0; font-family: var(--hand); font-size: 18px; }

/* ---------------------------------------------------------------- props in the art (percent of the 9:16 painting) */
.prop { position: absolute; opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.prop.in { opacity: 1; }
.prop.out { opacity: 0; pointer-events: none; }
.name-lantern { left: 60%; top: 6%; width: 27%; transform: translateY(-12%); cursor: pointer; transform-origin: 50% 0; animation: hang 4s ease-in-out infinite; }
.name-lantern.in { transform: none; }
.name-lantern img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 18px #0009) brightness(.82) saturate(.9); transition: filter 1s; }
.lantern-name { position: absolute; left: 10%; right: 10%; top: 44%; text-align: center; font-family: var(--hand); font-weight: 600; font-size: 20px; font-size: calc(var(--art-scale, .5) * 64px); line-height: 1.05; color: #2b1a1a; overflow-wrap: anywhere; }
.lantern-light { position: absolute; inset: 22% 4% 24%; border-radius: 45%; background: radial-gradient(circle, #fff3c8, #ffb14ecc 45%, #ee5d3b00 75%); mix-blend-mode: screen; opacity: 0; transition: opacity 1s; }
.name-lantern.lit img { filter: drop-shadow(0 0 30px #ffb14ecc) brightness(1.18) saturate(1.2); }
.name-lantern.lit .lantern-light { opacity: .95; animation: flicker 2.4s steps(6) infinite; }
.name-lantern.lit .lantern-name { color: #5a1d0e; }
.name-lantern.fade { opacity: 0; transition: opacity 2.5s; }
@keyframes hang { 50% { rotate: 1.2deg } }
@keyframes flicker { 30% { opacity: .82 } 60% { opacity: 1 } 80% { opacity: .9 } }
.hotspot { cursor: pointer; }
.water { left: 6%; top: 28%; width: 88%; height: 46%; border-radius: 30px; }
.scoop { width: 16%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 3px #ee5d3b, inset 0 0 20px #ffffffaa; background: #ffffff33; animation: scoop 1s var(--ease) forwards; }
@keyframes scoop { 0% { transform: scale(.4) translateY(40px); opacity: 0 } 40% { opacity: 1 } 100% { transform: scale(1) translateY(-60px) } }
.fish-tag { left: 50%; top: 54%; width: 56%; translate: -50% 0; transform: translateY(-10px) rotate(3deg); transform-origin: 50% 0; }
.fish-tag.in { transform: rotate(-2deg); animation: hang 3.4s ease-in-out infinite; }
.tag-string { display: block; width: 2px; height: calc(var(--art-scale, .5) * 60px); margin: 0 auto; background: #c93a2c; }
.tag-paper { background: var(--paper); color: #3a2320; border-radius: 6px 6px 10px 10px; padding: 12% 8% 10%; text-align: center; box-shadow: 0 10px 24px #0008; position: relative; }
.tag-paper::before { content: ''; position: absolute; top: 5%; left: 50%; width: 8px; height: 8px; translate: -50% 0; border-radius: 50%; background: #3a2320; }
.tag-date { margin: 0; font-family: var(--hand); font-weight: 600; font-size: 20px; font-size: calc(var(--art-scale, .5) * 48px); white-space: nowrap; line-height: 1.2; min-height: 1.2em; }
.tag-time { margin: 2% 0 8%; font-size: 13px; opacity: .75; }
.tag-action { border: 1px dashed #b3542f; background: #fff8ea; color: #7a2a14; border-radius: var(--pill); padding: var(--s2) var(--s3); min-height: 40px; font-weight: 700; font-size: 13px; }
.mask-hook { top: 44%; width: 17%; translate: -50% 0; transform: translateY(-20px); transform-origin: 50% 0; }
.mask-hook.in { transform: none; animation: hang 3.6s ease-in-out infinite; }
.mask-hook-left { left: 42.5%; }
.mask-hook-right { left: 57.5%; animation-delay: -1.3s !important; }
.mask { display: block; width: 100%; padding: 0; border: 0; background: none; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.mask img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px #0008); }
.mask.turned { transform: rotateY(180deg) scale(1.08); }
.poster { left: 21%; top: 25%; width: 58%; height: 48%; display: grid; align-content: center; justify-items: center; text-align: center; gap: 1.5%; color: #2b2230; padding: 4%; }
.poster p { margin: 0; }
.poster-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lantern); }
.poster-venue { font-family: var(--hand); font-weight: 600; font-size: 22px; font-size: calc(var(--art-scale, .5) * 58px); line-height: 1.15; min-height: 1.15em; }
.poster-city { font-size: 14px; opacity: .8; }
.poster-when { font-family: var(--hand); font-size: 15px; font-size: calc(var(--art-scale, .5) * 36px); min-height: 1.2em; }
.poster-times { list-style: none; margin: 2% 0; padding: 0; display: grid; gap: 2px; font-size: 13px; font-size: calc(var(--art-scale, .5) * 30px); }
.poster-times li { display: flex; gap: var(--s3); justify-content: center; }
.poster-attire { font-size: 12px; font-size: calc(var(--art-scale, .5) * 28px); font-style: italic; opacity: .85; }
.poster-map { margin-top: 2%; color: #7a2a14; font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; }
.charm { left: 50%; top: 11%; width: 56%; translate: -50% 0; transform: translateY(40%) rotate(8deg); }
.charm.in { transform: rotate(-1.5deg); animation: hang 4s ease-in-out infinite; }
.charm > img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px #000a); }
.charm-qr { position: absolute; left: 22%; top: 22.5%; width: 56%; aspect-ratio: 1; image-rendering: pixelated; border-radius: 4px; background: #fff; }
.charm-for { position: absolute; left: 0; right: 0; top: 54.5%; text-align: center; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b3a2a; }
.charm-name { position: absolute; left: 10%; right: 10%; top: 58%; text-align: center; margin: 0; font-family: var(--hand); font-weight: 600; font-size: 18px; font-size: calc(var(--art-scale, .5) * 42px); line-height: 1.15; color: #22203a; overflow-wrap: anywhere; }
.charm-actions { left: 0; right: 0; top: 79%; display: flex; justify-content: center; }
.shell { left: 50%; top: 11%; width: 34%; translate: -50% 0; transition: transform 1s cubic-bezier(.5,0,.8,.6), opacity .8s; }
.shell img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 20px #000a); }
.shell-wish { position: absolute; inset: 26% 16% 22%; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; font-family: var(--hand); font-weight: 600; font-size: 14px; font-size: calc(var(--art-scale, .5) * 29px); line-height: 1.25; color: #3b2016; overflow-wrap: anywhere; }
.shell.launch { transform: translateY(-160%) scale(.25); opacity: 0; }
.wish { left: 7%; right: 7%; top: 47%; display: grid; gap: var(--s3); }
.wish-input { width: 100%; resize: none; border-radius: var(--radius); border: 1px solid #ffe7b577; background: #fff8ecf2; color: #2b1d1d; padding: var(--s3) var(--s4); font-family: var(--hand); font-size: 18px; line-height: 1.4; box-shadow: 0 10px 30px #0009; user-select: text; -webkit-user-select: text; }
.wish-actions { display: flex; justify-content: center; gap: var(--s3); }
.fuse { left: 0; right: 0; top: 60%; display: grid; justify-items: center; gap: var(--s3); }
.fuse-button { position: relative; width: 132px; height: 132px; border-radius: 50%; border: 0; padding: 0 var(--s4); background: radial-gradient(circle, #3b1b18, #1c0f14); color: var(--paper); font-weight: 700; font-size: 13px; line-height: 1.3; box-shadow: 0 0 30px #ee5d3b66, 0 12px 30px #000b; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fuse-button svg { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); }
.fuse-button span { position: relative; }
.ring-track { fill: none; stroke: #ffffff22; stroke-width: 4; }
.ring-progress { fill: none; stroke: var(--amber); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px #ffb14e); }
.fuse-button.holding { transform: scale(.96); box-shadow: 0 0 50px #ffb14eaa, 0 12px 30px #000b; }
.fuse-button.fizzled { animation: fizz .5s; }
@keyframes fizz { 20%, 60% { translate: -6px 0 } 40%, 80% { translate: 6px 0 } }
.fuse-status { margin: 0; min-height: 1.4em; max-width: 28ch; text-align: center; font-size: 14px; color: var(--paper); text-shadow: 0 1px 6px #000; }
.seat-picker { left: 4%; right: 4%; top: 46%; display: grid; justify-items: center; gap: var(--s3); }
.seats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); max-width: 100%; }
.seat { position: relative; width: 64px; height: 110px; padding: 0; border: 0; background: none; transition: transform .2s; }
.seat img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.55) saturate(.7) drop-shadow(0 6px 8px #000a); transition: filter .4s; }
.seat.lit img { filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 16px #ffb14e); }
.seat span { position: absolute; inset: 44% 0 auto; font-weight: 700; font-size: 18px; color: #3a1d12; }
.seat-note { margin: 0; font-size: 15px; color: var(--paper); text-shadow: 0 1px 6px #000; text-align: center; }

/* ---------------------------------------------------------------- memories, つづく, credits */
.memory { position: absolute; z-index: 9; inset: 0; background: #1b1512; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease); display: grid; place-items: center; }
.memory[data-on="true"] { opacity: 1; }
.memory-frame { position: absolute; inset: 0; overflow: hidden; }
.memory-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 90px 30px #1b1512; background: linear-gradient(115deg, #ffb37a22, transparent 40%, #ffe7b51a 80%); mix-blend-mode: screen; }
#memory-image { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.85) contrast(.95) brightness(1.02); transform: scale(1.02); }
#memory-image.drift { animation: drift 14s ease-out forwards; }
.memory.rain .memory-frame::before { content: ''; position: absolute; inset: -20%; z-index: 1; background: repeating-linear-gradient(100deg, transparent 0 14px, #d8e6ff22 14px 15px); animation: rain .5s steps(6) infinite; }
@keyframes drift { from { transform: scale(1.02) } to { transform: scale(1.12) translateY(-2%) } }
@keyframes rain { to { transform: translate(-6%, 18%) } }
.tsuzuku { position: absolute; z-index: 15; inset: 0; display: grid; place-content: center; text-align: center; gap: var(--s2); background: #0d1030d9; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.tsuzuku[data-on="true"] { opacity: 1; }
.tsuzuku p { margin: 0; }
.tsuzuku-mark { font-family: var(--title); font-size: 56px; font-size: clamp(44px, 16cqw, 80px); letter-spacing: .12em; color: var(--paper); text-shadow: 0 0 30px #ffb14e66; }
.tsuzuku-line { font-family: var(--hand); font-size: 18px; color: var(--gold); }
.tsuzuku-date { font-size: 14px; letter-spacing: .14em; color: var(--muted); }
.tsuzuku-ending { font-size: 13px; color: var(--sakura); min-height: 1.2em; }
.credits { position: absolute; z-index: 15; inset: 0; background: #07081a; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
.credits[data-on="true"] { opacity: 1; pointer-events: auto; }
.credits-image { position: absolute; inset: 0 0 42%; width: 100%; height: 58%; object-fit: cover; filter: sepia(.2) brightness(.85); mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); animation: drift 6s ease-in-out infinite alternate; }
.credits-mask { position: absolute; inset: 44% 0 10%; overflow: hidden; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.credits-roll { text-align: center; padding: 0 var(--s5); transform: translateY(100%); }
.credits-roll.rolling { animation: roll 27s linear forwards; }
@keyframes roll { to { transform: translateY(-100%) } }
.credits-roll h3 { margin: var(--s6) 0 var(--s1); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.credits-roll p { margin: 2px 0; font-size: 16px; color: var(--text); }
.credit-title { font-family: var(--title); font-size: 30px !important; }
.credit-sub { font-family: var(--hand); color: var(--muted) !important; }
.credit-guest { font-family: var(--hand); font-size: 24px !important; color: var(--sakura) !important; }
.credit-end { margin-top: var(--s7) !important; color: var(--muted) !important; font-size: 13px !important; }
.credits-skip { position: absolute; right: var(--s3); bottom: calc(env(safe-area-inset-bottom) + var(--s2)); font-size: 12px; }

/* ---------------------------------------------------------------- details */
.details { position: fixed; z-index: 40; inset: 0; opacity: 0; transition: opacity .4s var(--ease); background: #0b0d27d9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.details[data-on="true"] { opacity: 1; }
.details-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: max(var(--s7), env(safe-area-inset-top)) var(--s4) calc(env(safe-area-inset-bottom) + var(--s7)); display: grid; gap: var(--s4); justify-items: center; align-content: start; }
.details-scroll > * { width: 100%; max-width: 460px; }
.details-head { text-align: center; }
.details-head h1 { margin: var(--s1) 0; font-family: var(--title); font-size: 38px; line-height: 1.1; font-weight: 700; }
.details-guest { margin: 0; font-family: var(--hand); color: var(--gold); font-size: 16px; }
.details-date { margin: 0; color: var(--muted); letter-spacing: .04em; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s4); }
.countdown p { margin: 0; padding: var(--s3) 0; border-radius: var(--radius); background: #ffffff0d; border: 1px solid #ffffff1a; display: grid; }
.countdown b { font-family: var(--title); font-size: 26px; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cd-status { margin: var(--s2) 0 0; color: var(--gold); min-height: 1.2em; }
.sheet { background: linear-gradient(#f9efdd, #f1e2c6); color: #2b2230; border-radius: var(--radius); padding: var(--s5) var(--s5); box-shadow: 0 16px 40px #0007; display: grid; gap: var(--s3); justify-items: start; }
.sheet-kicker { margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lantern); font-weight: 700; }
.pass-sheet { justify-items: center; text-align: center; }
.pass-qr { width: min(64vw, 240px); aspect-ratio: 1; image-rendering: pixelated; border-radius: 8px; background: #fff; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--lantern); }
.pass-name { margin: var(--s2) 0 0; font-family: var(--hand); font-weight: 600; font-size: 24px; }
.pass-note { margin: 0; font-size: 14px; opacity: .8; }
.times { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); width: 100%; }
.times li { display: flex; justify-content: space-between; border-bottom: 1px dashed #b78f5a66; padding: var(--s2) 0; }
.times time { font-weight: 700; }
.venue { margin: 0; display: grid; }
.venue b { font-family: var(--title); font-size: 20px; }
.attire { margin: 0; font-size: 14px; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.reply-line { margin: 0; font-size: 16px; }
.families p { margin: 0 0 var(--s2); display: grid; }
.families span { font-size: 14px; opacity: .8; }
.details-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.details-foot { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
.details-foot p { margin: 0 0 var(--s2); }

/* ---------------------------------------------------------------- dialogs */
.paper-dialog { border: 0; border-radius: 18px; padding: var(--s6) var(--s5) var(--s5); width: min(92vw, 420px); background: linear-gradient(#fbf3e3, #f1e1c3); color: #2b2230; box-shadow: 0 30px 80px #000c; text-align: center; }
.paper-dialog::backdrop { background: #07081acc; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.paper-dialog h2 { margin: 0 0 var(--s3); font-family: var(--title); font-size: 26px; line-height: 1.2; }
.paper-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); text-align: left; margin: 0 0 var(--s4); }
.paper-dialog dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lantern); font-weight: 700; padding-top: 3px; }
.paper-dialog dd { margin: 0; font-size: 15px; }
.profile-portrait { width: 96px; height: 144px; object-fit: contain; margin: calc(-1 * var(--s7)) auto var(--s2); display: block; filter: drop-shadow(0 8px 12px #0006); }
.dialog-actions { display: flex; justify-content: center; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dialog-actions.column { flex-direction: column; }
.paper-dialog .link { color: #5a3a2a; text-decoration-color: #5a3a2a66; }
.angpao { width: 110px; height: 150px; margin: 0 auto var(--s4); border-radius: 10px; background: linear-gradient(#e2302a, #b81f1f); box-shadow: 0 12px 24px #0005, inset 0 0 0 4px #f7c65a; display: grid; place-items: center; }
.angpao span { font-size: 54px; color: #f7c65a; font-family: var(--title), 'PingFang SC', 'Noto Serif CJK SC', 'Noto Sans CJK SC', serif; }
.gift-dialog p { line-height: 1.6; }
.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--s6); background: var(--night); z-index: 100; }

/* ---------------------------------------------------------------- scene tweaks */
.film[data-scene="details"] .chrome #details-open { display: none; }

/* Phones on their side: keep the portrait film and say why. */
@media (orientation: landscape) and (max-height: 500px) {
  .film::after { content: 'Turn your phone upright for the full picture'; position: absolute; z-index: 30; left: 0; right: 0; top: 6px; text-align: center; font-size: 11px; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .art, .grain, .hint[data-on="true"], .lantern-choice, .name-lantern, .fish-tag.in, .mask-hook.in, .charm.in, .envelope[data-on="true"]:not(.open), #memory-image.drift, .credits-image, .memory.rain .memory-frame::before { animation: none !important; }
  .credits-roll.rolling { animation-duration: 9s; }
  * { transition-duration: .01ms !important; }
}