html, body { margin: 0; height: 100%; overflow: hidden; background: #f4efe6; color: #3d2f26; font: 14px/1.5 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
#stage canvas, #video { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; }
#video { display: none; background: #000; }
#snap { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 58%, rgba(20, 30, 45, 0.22) 100%); }
/* one full-screen colour layer for every seam (cloud white, milk tea, …); scenes set its colour and opacity */
#white { position: fixed; inset: 0; pointer-events: none; background: #f7fbff; opacity: 0; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

#reader { position: fixed; inset: 0; display: none; place-items: center; background: rgba(10, 25, 40, 0.25); z-index: 20; }
#reader.open { display: grid; }
#reader .card { max-width: min(80vw, 420px); padding: 18px 22px; border-radius: 12px; background: #fbf7ee; color: #4a3428; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); font: 16px/1.6 "Songti SC", "Hiragino Sans GB", "PingFang SC", serif; }
#reader-name { font-size: 13px; color: #8a6b55; margin-bottom: 6px; }
#reader .hint { margin-top: 10px; font-size: 11px; color: #a89382; }

#start { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #fbf6ec 0%, #efe4d2 100%); z-index: 30; transition: opacity 0.8s; }
#start.gone { opacity: 0; pointer-events: none; }
#start .inner { text-align: center; padding: 24px; }
#start .date { letter-spacing: 0.3em; font-size: 12px; color: #9b7b62; }
#start h1 { margin: 10px 0 2px; font: 400 34px/1.2 "Songti SC", "STSong", serif; letter-spacing: 0.18em; color: #4a3428; }
#start .en { font: italic 15px/1.4 Georgia, serif; color: #8a6b55; }
#start .buttons { display: flex; gap: 12px; justify-content: center; margin: 26px 0 14px; flex-wrap: wrap; }
#start button { border: 1px solid #c9ad8e; background: #fffaf2; color: #4a3428; padding: 10px 18px; border-radius: 22px; font-size: 14px; }
#start button:disabled { opacity: 0.45; }
#start button:not(:disabled):active { background: #f1e3cf; }
#load { width: 180px; height: 2px; margin: 0 auto 14px; background: rgba(155, 123, 98, 0.2); }
#load-bar { width: 0; height: 100%; background: #b88f6a; transition: width 0.3s; }
#start .tip { font-size: 11px; color: #a89382; }

#track { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.15); }
#bar { height: 100%; width: 0; background: rgba(255, 236, 200, 0.85); }
#play { position: fixed; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 18px; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 14px; }
#mute { position: fixed; right: 56px; bottom: 12px; width: 36px; height: 36px; border-radius: 18px; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 14px; }
#home { position: fixed; right: 100px; bottom: 12px; width: 36px; height: 36px; border-radius: 18px; border: 0; background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 17px; line-height: 36px; padding: 0; }
/* the end of the journey (exploring): back to the start page */
#again { position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 8px); z-index: 15; border: 1px solid rgba(201, 173, 142, 0.9); background: rgba(255, 250, 242, 0.92); color: #4a3428; padding: 11px 22px; border-radius: 24px; font: 15px/1.2 "Songti SC", "STSong", "PingFang SC", serif; letter-spacing: 0.06em; box-shadow: 0 6px 22px rgba(40, 20, 8, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.5s, transform 0.5s; }
#again.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#again:active { background: #f1e3cf; }
body.can-tap, body.can-tap canvas { cursor: pointer; }
#reflection { position: fixed; left: 0; top: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; filter: saturate(0.7) brightness(0.9); -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 35%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 42%, #000 35%, transparent 72%); }
#busy { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.85); font-size: 28px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); display: none; pointer-events: none; }
#hud { position: fixed; left: 10px; top: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); color: #fff; font-variant-numeric: tabular-nums; font-size: 12px; display: none; pointer-events: none; }
body.debug #hud { display: block; }
.spot-label { position: absolute; left: 0; top: 0; text-align: center; color: #fff8ec; text-shadow: 0 1px 4px rgba(40, 20, 10, 0.7); opacity: 0; transition: opacity 0.4s; white-space: nowrap; pointer-events: none; }
.spot-label b { display: block; font: 500 15px/1.3 "Songti SC", "STSong", serif; letter-spacing: 0.12em; }
.spot-label span { display: block; font: italic 11px/1.3 Georgia, serif; opacity: 0.85; }

/* ---------------------------------------------------------------- modals (album, gift, notes) */
.modal { position: fixed; inset: 0; z-index: 25; background: rgba(30, 20, 14, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; animation: fadein 0.35s ease; touch-action: pan-y; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal-close { position: fixed; right: 14px; top: 12px; width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(255, 250, 242, 0.92); color: #4a3428; font-size: 24px; line-height: 40px; z-index: 3; }
.gift-title b { display: block; font: 500 22px/1.3 "Songti SC", "STSong", serif; letter-spacing: 0.15em; color: #4a3428; }
.gift-title span { font: italic 13px/1.3 Georgia, serif; color: #8a6b55; }
.gift-note { font-size: 13px; color: #6b5444; margin: 10px 0 14px; }
.gift-note i { color: #9b8070; font-size: 12px; }

/* album: the ring */
.album-modal { background: radial-gradient(ellipse at 50% 45%, rgba(60, 40, 28, 0.55), rgba(20, 12, 8, 0.85)); }
.album-stage { perspective: 900px; width: 100vw; height: 100vh; display: grid; place-items: center; touch-action: none; }
.album-ring { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.album-card { position: absolute; left: 0; top: 0; width: var(--card-w, min(46vw, 300px)); aspect-ratio: 4 / 3; margin: calc(var(--card-w, min(46vw, 300px)) * -0.375) 0 0 calc(var(--card-w, min(46vw, 300px)) * -0.5); background: #fffaf2; padding: 8px 8px 22px; box-sizing: content-box; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backface-visibility: hidden; transition: filter 0.2s; }
.album-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card .ph, .slide-card .ph { width: 100%; height: 100%; }
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5a4436; font: 18px "Songti SC", serif; text-align: center; }
.ph small { font: 11px -apple-system, sans-serif; opacity: 0.6; margin-top: 6px; }
.album-caption { position: fixed; left: 0; right: 0; bottom: 70px; text-align: center; color: #fff6e8; font: 15px "Songti SC", serif; letter-spacing: 0.08em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none; }
.album-nav { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; color: #f4e7d2; font-size: 13px; }
.album-nav button { width: 38px; height: 38px; border-radius: 19px; border: 1px solid rgba(255, 240, 220, 0.5); background: rgba(255, 250, 242, 0.12); color: #fff6e8; font-size: 22px; line-height: 34px; }
.album-big { position: fixed; inset: 0; display: none; place-items: center; background: rgba(15, 10, 6, 0.9); z-index: 2; }
.album-big.open { display: grid; }
.album-big .big-inner { max-width: 92vw; max-height: 86vh; text-align: center; }
.album-big img { max-width: 92vw; max-height: 80vh; border: 8px solid #fffaf2; border-radius: 3px; }
.album-big .ph { width: min(80vw, 640px); aspect-ratio: 4 / 3; }
.big-cap { color: #f4e7d2; font: 15px "Songti SC", serif; margin-top: 10px; }

/* the slideshow over the 3D view (auto-play rest) */
.slide-card { position: fixed; left: 0; top: 0; z-index: 10; /* above the labels and postcards it covers */ width: min(38vw, 340px); height: calc(min(38vw, 340px) * 0.75); /* JS sets the real size per photo (album.js ALBUM.slide) */ background: #fffaf2; padding: 7px 7px 20px; box-sizing: content-box; border-radius: 3px; box-shadow: 0 12px 34px rgba(30, 15, 5, 0.4); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* gift */
.gift-card, .notes-card { width: min(88vw, 400px); max-height: 86vh; overflow: auto; padding: 22px 22px 18px; border-radius: 14px; background: #fbf7ee; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3); text-align: center; animation: rise 0.5s 0.35s both cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.gift-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.gift-tabs button { border: 1px solid #d8c2a6; background: #fffaf2; color: #6b5444; padding: 6px 14px; border-radius: 16px; font-size: 13px; }
.gift-tabs button.on { background: #b88f6a; border-color: #b88f6a; color: #fff; }
.gift-qr img { width: min(62vw, 240px); height: auto; display: block; margin: 0 auto; -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.gift-empty { padding: 40px 0; color: #9b8070; font-size: 13px; }
.gift-text { font-size: 12px; color: #6b5444; margin-top: 8px; user-select: text; -webkit-user-select: text; word-break: break-all; }
.gift-hint { font-size: 11px; color: #a89382; margin-top: 8px; }
.gift-sparks { position: fixed; inset: 0; pointer-events: none; }
.gift-sparks i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 3px; background: radial-gradient(circle, #fff6d8, #f2c76b 60%, transparent 70%); box-shadow: 0 0 8px #f6d98c; animation: spark 0.9s ease-out both; }
@keyframes spark { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* notes (read-only fallback until the guestbook arrives) */
.notes-list { text-align: left; }
.note { padding: 10px 0; border-top: 1px dashed #e2d2bd; }
.note-text { font: 15px/1.6 "Songti SC", "STSong", serif; color: #4a3428; }
.note-name { font-size: 12px; color: #9b8070; text-align: right; margin-top: 2px; }

/* postcards beside the moon (featured notes) */
.postcard { position: absolute; left: 0; top: 0; width: 92px; padding: 7px 8px 8px; background: #fffaf2; border-radius: 3px; box-shadow: 0 6px 16px rgba(40, 20, 8, 0.35); font: 11px/1.35 "Songti SC", serif; color: #4a3428; opacity: 0; pointer-events: auto; cursor: pointer; transition: opacity 0.4s; }
.postcard::before { content: ''; position: absolute; right: 6px; top: 6px; width: 14px; height: 16px; border: 1px dashed #d4b48e; border-radius: 2px; }
.postcard .pc-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-right: 16px; }
.postcard .pc-name { font-size: 10px; color: #9b8070; margin-top: 4px; text-align: right; }
#swipe-hint { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#swipe-hint.on { opacity: 0.9; }
#swipe-hint span { display: block; font-size: 22px; animation: nudge 1.4s ease-in-out infinite; }
#swipe-hint small { opacity: 0.8; font-size: 11px; }
@keyframes nudge { 0%, 100% { transform: translateY(4px); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
body.record * { transition: none !important; animation: none !important; }