*{box-sizing:border-box}body{margin:0;background:#080807;color:#e8dfcf;font-family:Georgia,'Yu Mincho',serif;overflow:hidden}#story,.backdrop,.veil{position:fixed;inset:0;width:100%;height:100%;border:0}.backdrop{background:center/cover;pointer-events:none;transition:opacity .55s ease-in-out}.veil{background:radial-gradient(ellipse at center,#000d,#000e);pointer-events:none;transition:opacity 1s}.leaving .veil{opacity:0}header{position:fixed;z-index:8;top:0;width:100%;display:flex;justify-content:space-between;gap:8px;padding:12px;font:11px system-ui;color:#c4bba9}nav{display:flex;gap:6px}button,a{font:inherit;cursor:pointer;color:inherit;background:#151311;border:1px solid #80735f;padding:7px 10px;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #e0ceb1;outline-offset:3px}.brand{position:fixed;z-index:7;top:65px;left:50%;transform:translateX(-50%);width:140px;pointer-events:none}.brand img{width:100%;filter:invert(91%) sepia(12%) saturate(320%)}main{position:fixed;inset:110px 0 0;display:flex;justify-content:center;align-items:flex-start;pointer-events:none}.scroll{--p:0;position:relative;width:min(540px,96vw,calc((100dvh - 115px)*.75));aspect-ratio:3/4;pointer-events:auto;transform-origin:0 0}.paper{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 0 calc(16% + 66% * (1 - var(--p))) 0)}.bottom-roll{position:absolute;left:0;width:100%;height:16%;top:calc(18% + 66% * var(--p));background:url('assets/scroll-v04/scroll.webp') center bottom/100% 625% no-repeat}.copy{position:absolute;left:17%;right:17%;top:30%;color:#38312c;text-align:center;opacity:0;transition:opacity .4s}.ready .copy{opacity:1}.eyebrow{font-size:clamp(8px,1.4vw,11px);letter-spacing:.13em;margin:0 0 24px}h1{font-weight:400;font-size:clamp(13px,2vw,20px);line-height:1.9;margin:0}.instructions{font-size:clamp(11px,1.4vw,14px);line-height:1.9;margin:22px 0}.continue{color:#493c32;background:transparent;border:0;border-bottom:1px solid #958771;font-size:clamp(11px,1.4vw,14px);padding:10px 0}.continue:disabled{opacity:.3}.leaving .instructions,.leaving .continue{opacity:0;transition:opacity .15s}#notice{position:fixed;bottom:12px}.settled main,.settled .backdrop,.settled .veil{display:none}.settled #story{z-index:2}.settled #skip{display:none}@media(max-width:600px){.brand{width:115px;top:62px}.copy{left:16%;right:16%}.eyebrow{margin-bottom:14px}.instructions{margin:15px 0}header>span{max-width:80px}}@media(prefers-reduced-motion:reduce){.copy,.veil{transition:none}}
/* Once open, display the unbroken source to avoid subpixel seams between animation slices. */
.scroll .paper{clip-path:inset(0 0 calc(86.3% - 77.3% * var(--p)) 0)}
/* Move only the cylindrical roller, not the printed border above it. The
   paper extends beneath its opaque centre so no straight cut edge is exposed. */
.scroll .bottom-roll{height:10.2%;top:calc(12.5% + 77.3% * var(--p));background-size:100% 980.392157%}
.scroll.ready .paper{clip-path:none}
.scroll.ready .bottom-roll{visibility:hidden}

/* Invitation sender is printed within the paper, revealed with the copy, not a page overlay. */
.scroll .copy{top:22%}
.scroll .brand{position:static;transform:none;width:36%;max-width:150px;margin:0 auto 20px;pointer-events:none}
.scroll .brand img{display:block;width:100%;filter:none;mix-blend-mode:multiply}
.scroll .eyebrow{margin-bottom:18px}
.scroll h1{font-size:clamp(13px,1.8vw,19px);line-height:1.75}
.scroll h1{margin-top:12%} /* Move body and following controls down, preserving sender/logo position. */
@media(max-width:600px){.scroll .brand{margin-bottom:14px;width:42%}.scroll .eyebrow{margin-bottom:12px}.scroll .instructions{margin:14px 0}}
/* Ribbon entrance v40: same paper, calmer wall, game-UI action. */
.backdrop{background-image:url('assets/scroll-ribbon-v01/gothic-wall.webp')}
.veil{background:radial-gradient(ellipse at center,#0004,#000a)}
main{inset:45px 0 0;align-items:center}
.scroll{width:min(580px,94vw,calc((100dvh - 70px)*.75));transform:translateY(28%);transform-origin:center;transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.scroll.opening,.scroll.ready{transform:translateY(0)}
.scroll .copy{top:21%;left:14%;right:14%;pointer-events:none}
.scroll.ready .copy{pointer-events:auto}
.scroll .brand{width:38%;margin:0 auto 5%}
.scroll h1{font-size:clamp(25px,4vw,42px);line-height:1.22;letter-spacing:.10em;margin:0;color:#493332}
.scroll .instructions{font-size:clamp(13px,2vw,18px);line-height:1.9;margin:9% 0 8%}
.scroll .continue{display:block;width:95%;min-height:48px;margin:auto;padding:13px 8px;border:0;color:#fff3df;font-size:clamp(14px,2vw,18px);background:linear-gradient(90deg,transparent,rgba(43,31,27,.72) 25%,rgba(43,31,27,.72) 75%,transparent);transition:filter .2s}
.scroll .continue:hover{filter:brightness(1.2)}
.ribbon{position:absolute;z-index:3;left:35%;top:2%;width:30%;height:46%;border:0;padding:0;background:transparent;touch-action:none;cursor:grab;transform:translateY(var(--pull,0px));color:#e9d8c0}
.ribbon svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px #140608)}
.ribbon span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.08em;text-shadow:0 1px 5px #000}
.ribbon:active{cursor:grabbing}.ribbon:disabled{cursor:default}
.untying .ribbon{animation:ribbon-fall .95s ease-in forwards;pointer-events:none}
.untying .ribbon .bow{transform-origin:60px 43px;animation:untie .3s forwards}
.untying .ribbon span,.scroll.ready .ribbon{visibility:hidden}
@keyframes untie{to{transform:scaleX(.15) translateY(22px);opacity:0}}
@keyframes ribbon-fall{0%{transform:translateY(var(--pull,0px)) rotate(0);opacity:1}25%{transform:translate(8%,28px) rotate(8deg);opacity:1}65%{transform:translate(-24%,160px) rotate(-16deg);opacity:.9}100%{transform:translate(18%,55vh) rotate(24deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.scroll{transition:none}.untying .ribbon{animation:none;visibility:hidden}}
/* v41: Japanese invitation restored; existing generated lace frame reused. */
.scroll .copy{top:22%;left:13%;right:13%}
.scroll .brand{width:42%;margin:0 auto 15%}
.scroll h1{font-weight:400;letter-spacing:0;color:#38312c;line-height:1.85}
.intro-line{display:block;font-size:clamp(12px,1.8vw,18px)}
.party-line{display:block;font-size:clamp(16px,2.2vw,23px);margin-top:4px}
.scroll .instructions{font-size:clamp(12px,1.7vw,16px);margin:12% 0 10%;line-height:1.95}
.scroll .continue{position:relative;isolation:isolate;background:transparent;color:#493c32;width:94%;min-height:56px;padding:17px 16px;font-size:clamp(13px,1.7vw,16px);border:0;filter:none}
.scroll .continue::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/dialogue-v01/frame.webp') center/100% 100% no-repeat;filter:brightness(.66) drop-shadow(0 2px 2px #3d2d2229);opacity:.8;pointer-events:none}
.scroll .continue:hover{filter:none;background:#8b765508}
.ribbon{width:50%;height:auto;aspect-ratio:1;left:25%;top:2%;pointer-events:none;cursor:default;transform:none}
.untying .ribbon{animation:none;visibility:visible}
.scroll.ready .ribbon{visibility:hidden}
/* v42: ivory-compatible action; no lace frame or dark fill. */
.scroll .continue{background:linear-gradient(90deg,transparent,rgba(180,164,142,.25) 24%,rgba(180,164,142,.32) 50%,rgba(180,164,142,.25) 76%,transparent);color:#493d33;box-shadow:none}
.scroll .continue::before{display:none}
.scroll .continue:hover{background:linear-gradient(90deg,transparent,rgba(180,164,142,.38) 25%,rgba(180,164,142,.38) 75%,transparent)}
/* v44: approved independent ribbon animation over the unchanged original paper. */
.scroll canvas.ribbon{display:block;inset:0;width:100%;height:100%;aspect-ratio:auto;visibility:visible;z-index:3;transform:none;animation:none}
.scroll.ready canvas.ribbon{visibility:hidden}
.scroll .ribbon-back{position:absolute;left:48.6%;width:2.8%;top:5.5%;height:17%;background:#53252d;border-radius:50%;z-index:-1;opacity:0}
.scroll.ready .ribbon-back{display:none}
.scroll .copy{z-index:1}
/* Tablet copy scales independently of desktop; keep inside original parchment. */
body[data-device="ipad"] .scroll .intro-line,body[data-device="ipad-landscape"] .scroll .intro-line{font-size:21px}
body[data-device="ipad"] .scroll .party-line,body[data-device="ipad-landscape"] .scroll .party-line{font-size:28px}
body[data-device="ipad"] .scroll .instructions,body[data-device="ipad-landscape"] .scroll .instructions{font-size:20px;margin:9% 0 8%}
body[data-device="ipad"] .scroll .continue,body[data-device="ipad-landscape"] .scroll .continue{font-size:21px}
body[data-device="ipad"] .scroll .brand,body[data-device="ipad-landscape"] .scroll .brand{margin-bottom:10%}
/* V55: readable invitation copy; original artwork and ribbon stay unchanged. */
.scroll{width:min(660px,98vw,calc((100dvh - 45px)*.75))}
.scroll .copy{top:21%;left:11%;right:11%}
.scroll .brand{margin-bottom:6%}
.scroll .intro-line{font-size:22px;line-height:1.6}
.scroll .intro-line,.scroll .party-line,.scroll .instructions{text-wrap:balance;overflow-wrap:normal;word-break:normal}
.mobile-copy-break{display:none}
@media(max-width:600px){.mobile-copy-break{display:block}.scroll .intro-line{text-wrap:wrap}}
.scroll .party-line{font-size:28px;line-height:1.5}
.scroll .instructions{font-size:21px;line-height:1.7;margin:7% 0 6%}
.scroll .continue{font-size:22px;padding:12px 8px;min-height:48px}
body[data-device="ipad"] .scroll .intro-line,body[data-device="ipad-landscape"] .scroll .intro-line{font-size:24px}
body[data-device="ipad"] .scroll .party-line,body[data-device="ipad-landscape"] .scroll .party-line{font-size:30px}
body[data-device="ipad"] .scroll .instructions,body[data-device="ipad-landscape"] .scroll .instructions{font-size:22px;margin:6% 0}
body[data-device="ipad"] .scroll .continue,body[data-device="ipad-landscape"] .scroll .continue{font-size:24px}
body[data-device="ipad"] .scroll .brand,body[data-device="ipad-landscape"] .scroll .brand{margin-bottom:6%}
@media(max-width:600px){.scroll .copy{top:20%;left:10%;right:10%}.scroll .brand{width:42%;margin-bottom:6%}.scroll .intro-line{font-size:18px;line-height:1.55}.scroll .party-line{font-size:22px;line-height:1.5}.scroll .instructions{font-size:17px;line-height:1.65;margin:6% 0}.scroll .continue{font-size:19px;min-height:48px;padding:10px 8px}}
/* Size the invitation text against its parchment, not the entire viewport. */
.scroll{container-type:inline-size}
/* Keep the sender at its original upper-paper anchor. Only the message and
   action are centred in the remaining paper below it, on every device. */
body[data-device] .scroll .copy{inset:0;transform:none}
body[data-device] .scroll .copy .brand{position:absolute;top:21%;left:50%;transform:translateX(-50%);width:32.76%;max-width:150px;margin:0}
body[data-device] .scroll .invitation-body{position:absolute;top:57%;left:11%;right:11%;transform:translateY(-50%);text-align:center}
@media(max-width:600px){body[data-device] .scroll .copy .brand{top:20%;width:33.6%}}
body .scroll .intro-line{font-size:clamp(15px,3.3cqw,20px);line-height:1.6}
body .scroll .party-line{font-size:clamp(18px,4.2cqw,25px);line-height:1.5}
body .scroll .instructions{font-size:clamp(14px,3.1cqw,18px);line-height:1.7;margin:6% 0}
body .scroll .continue{font-size:clamp(16px,3.3cqw,20px);min-height:44px;padding:10px 8px}
body[data-device] .scroll .intro-line{font-size:clamp(15px,3.3cqw,20px)}
body[data-device] .scroll .party-line{font-size:clamp(18px,4.2cqw,25px)}
body[data-device] .scroll .instructions{font-size:clamp(14px,3.1cqw,18px)}
body[data-device] .scroll .continue{font-size:clamp(16px,3.3cqw,20px)}
.music-control{position:fixed;z-index:300;right:12px;top:10px;display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:20px;background:#100d0bc9;color:#d8c9ae;font:12px/1.4 Georgia,'Yu Mincho',serif}
.music-control button{min-height:36px;min-width:4.2em;border:0;background:none;padding:6px}
.music-control input{width:52px;accent-color:#b59b76}
@media(max-width:600px){.music-control{top:2px;bottom:auto;right:6px;padding:0 4px}.music-control button{min-height:36px;min-width:36px;font-size:13px;letter-spacing:.04em}.music-control input{display:none;width:42px}.music-control:focus-within input{display:block}}
/* Keep text inside the parchment's quiet centre, not near the botanical edge. */
body[data-device] .scroll .invitation-body{left:16%;right:16%}
body[data-device] .scroll .intro-line,body[data-device] .scroll .party-line{max-width:22em;margin-left:auto;margin-right:auto;text-wrap:balance;overflow-wrap:break-word}
body[data-device] .scroll .instructions{max-width:20em;margin-left:auto;margin-right:auto;text-wrap:balance;overflow-wrap:break-word}
html:lang(zh-Hans) .scroll .instructions,html:lang(zh-Hant) .scroll .instructions{max-width:16em}


/* VIVAIA：正式页面（site=1）第一帧就隐藏预览工具栏 */
html.vh-site body>header{display:none}

/* VIVAIA：320 宽（iPhone SE 等）——卷轴内文字缩小一档，配合文案 {br} 不出现词中折行 */
/* 字号由 body[data-device] 的容器单位规则决定，这里用同等优先级覆盖；Logo 上提、正文中心略下移，避免两者重叠 */
@media(max-width:360px){
 /* Logo 与正文的纵向位置由下方 ≤600 块统一决定（同优先级、排在后面），这里只收 Logo 宽度 */
 body[data-device] .scroll .copy .brand{width:30%}
 body[data-device] .scroll .intro-line{font-size:13px;line-height:1.65}
 body[data-device] .scroll .party-line{font-size:15px;line-height:1.5;text-wrap:wrap}
 body[data-device] .scroll .instructions{font-size:11.5px;line-height:1.7;margin:4% auto}
 body[data-device] .scroll .continue{font-size:16px;min-height:40px;padding:8px}
}

/* VIVAIA：设计稿（10-22）——中段两行改红色加粗、上下各一条花饰分隔线；入口按钮样式见文件末尾（2026-10-27 起四语共用文字按钮 + 框素材）。
   两端共用（用户 10-22 定，断句仍分端）。PC 正文变高后整体从 Logo 下方开始排（中心下移到 61%），避免压到 Logo */
body[data-device] .scroll .party-line{color:#8b0a12;font-weight:700;letter-spacing:.01em}
body[data-device] .scroll .party-line::before,body[data-device] .scroll .party-line::after{content:'';display:block;width:min(100%,12em);height:.9em;margin:.15em auto;background:url('assets/entry-v02/divider.svg') center/contain no-repeat}
@media(min-width:601px){
 /* 按设计稿（入口画板 3804:2201）按钮中心约在卷轴 78%：正文连同按钮整体上移，Logo 下方原有约 90px 余量 */
 body[data-device] .scroll .invitation-body{top:57.5%}
 body[data-device] .scroll .instructions{margin:3% auto 4%}
}
/* 手机：分隔线与按钮再收一档，正文间距略收，给多出来的两条花饰线让位 */
@media(max-width:600px){
 /* 正文连同按钮整体上移，按钮离开卷轴下端的花饰（对齐设计稿）；Logo 同步上提，保持与正文的间距 */
 body[data-device] .scroll .copy .brand{top:15.5%}
 body[data-device] .scroll .invitation-body{top:55%}
 body[data-device] .scroll .party-line::before,body[data-device] .scroll .party-line::after{height:.55em;margin:.05em auto}
 body[data-device] .scroll .instructions{margin:2% auto}
 /* 红字加粗后变宽：字号按卷轴宽度算（正文区 68% 宽放下 14 个全角字）；只有日文按 {br} 两行固定不折行，其他语言整句需要自动折行。
    不支持 cqw 的旧浏览器（iOS ≤15）退回 4.2vw */
 body[data-device] .scroll .party-line{font-size:4.2vw;font-size:min(18px,4.6cqw)}
 html:lang(ja) body[data-device] .scroll .party-line{white-space:nowrap}
}
@media(max-width:360px){
 body[data-device] .scroll .party-line::before,body[data-device] .scroll .party-line::after{height:.45em}
}
/* 横屏手机（矮屏横向，如 844×390）：卷轴原本按高度缩到约 260px 宽，文字放不下、压到 Logo。
   改按宽度定尺寸（正文按 PC 规则排），外层容器可上下滚动，往下滑到「お部屋に入る」 */
@media (orientation:landscape) and (max-height:500px){
 main{overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;pointer-events:auto;padding:8px 0 28px;-webkit-overflow-scrolling:touch}
 .scroll{width:min(440px,62vw)}
 /* 卷轴变窄后字号被 clamp 下限托住、正文块变高，整体下移避开 Logo（按钮下方仍有余量） */
 body[data-device] .scroll .invitation-body{top:60%}
}


/* 入口按钮（供应商 2026-10-27 品牌确认「中性暖咖啡色」复古框，取代 10-26 的 entry-v03 烧字按钮图）：四种语言共用同一套——文字按钮（可编辑、读屏可读）+ 透明底框素材 entry-v04 画在 ::before，
   调色滤镜只套在底图不套文字；390 宽模拟稿：卷轴 370、按钮 156×44（= 卷轴 42%）、米白 #fff5e0 字重 700 16px，框素材 inset -23px -2px（按钮高 44 的 52% / 宽 156 的 1.3%，改成百分比随尺寸等比）。
   底图预载完成（body.entry-button-ready）后才切到此样式，弱网下先显示原文字按钮，米白字不会裸露在卷轴纸面上 */
body.entry-button-ready[data-device] .scroll .continue{position:relative;isolation:isolate;width:42%;width:42cqw;min-width:156px;max-width:none;min-height:44px;aspect-ratio:156/44;padding:0 8px;border:0;color:#fff5e0;font-size:16px;font-weight:700;line-height:1.3;text-shadow:0 1px 1px #392a22;background:none;box-shadow:none;filter:none;transition:none}
body.entry-button-ready[data-device] .scroll .continue::before{content:'';display:block;position:absolute;inset:-52% -1.3%;z-index:-1;background:url('assets/entry-v04/enter-frame.webp') center/100% 100% no-repeat;filter:sepia(.65) saturate(.85) hue-rotate(345deg) brightness(2.2);opacity:1;pointer-events:none;transition:filter .2s}
body.entry-button-ready[data-device] .scroll .continue:hover{background:none;filter:none}
body.entry-button-ready[data-device] .scroll .continue:hover::before{filter:sepia(.65) saturate(.85) hue-rotate(345deg) brightness(2.35)}
body.entry-button-ready[data-device] .scroll .continue:disabled{filter:grayscale(.4) opacity(.7)}
body.entry-button-ready[data-device] .scroll .continue:focus-visible{outline:2px solid #6f5141;outline-offset:5px}
/* 宽度按卷轴容器的 42% 取（cqw；不支持的旧浏览器退回正文区的 42% + 最小 156），高度按 156:44 跟着放大，框素材比例在各尺寸一致；桌面字号跟着容器走（旧浏览器 16px） */
@media(min-width:601px){body.entry-button-ready[data-device] .scroll .continue{font-size:16px;font-size:clamp(16px,4.3cqw,22px)}}
/* 320 宽：卷轴约 314，42cqw = 132 → 托到 150，仍落在两侧叶子之间 */
@media(max-width:360px){body.entry-button-ready[data-device] .scroll .continue{min-width:150px;font-size:15px}}

/* VIVAIA：品牌 10-29 修改清单 01——卷轴文字分三层：主题句（最大）→ 派对句（中号红字，花饰线不变）→ 正文（小号灰字），层与层之间多留空白。
   字号仍按卷轴容器宽度（cqw）算；主题句日文按 {br} 固定两行，其他语言自动折行 */
body[data-device] .scroll .intro-line{font-size:clamp(17px,4.8cqw,28px);line-height:1.5;font-weight:700;color:#38312c;max-width:none;margin-bottom:.95em}
body[data-device] .scroll .party-line{font-size:clamp(13px,3.3cqw,18px);line-height:1.5}
body[data-device] .scroll .instructions{font-size:clamp(12px,2.7cqw,15px);line-height:1.8;color:#7f7166;margin:7% auto 8%}
@media(max-width:600px){
 html:lang(ja) body[data-device] .scroll .intro-line{white-space:nowrap}
 body[data-device] .scroll .party-line{font-size:3.6vw;font-size:min(15px,3.9cqw)}
 body[data-device] .scroll .instructions{margin:6% auto 7%}
}
@media(max-width:360px){
 body[data-device] .scroll .intro-line{font-size:15px}
 body[data-device] .scroll .party-line{font-size:13px}
 body[data-device] .scroll .instructions{font-size:11.5px}
}