:root {
  color-scheme: light; --paper:#f3eddf; --ink:#343d34; --muted:#8d8c78;
  --green:#344f43; --sage:#81917a; --gold:#baa174; --line:#d4ccb7;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { background:linear-gradient(#23372fd9,#23372fd9),var(--game-background) center/cover fixed; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
button,select { font:inherit; color:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; min-height:44px; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,select:focus-visible { outline:3px solid #c39d64; outline-offset:3px; }
button:active:not(:disabled) { filter:brightness(.94); }
img { user-select:none; -webkit-user-drag:none; pointer-events:none; }
h1,h2,p { margin:0; }
h1,h2 { font-family:"Songti SC","SimSun",serif; font-weight:500; }
.game { width:min(100%,520px); height:100%; height:100dvh; margin:auto; position:relative; overflow:hidden; background:var(--game-background) center/cover,var(--paper); display:grid; grid-template-rows:calc(64px + env(safe-area-inset-top)) minmax(0,1fr); user-select:none; -webkit-user-select:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top) 23px 0; z-index:20; background:var(--paper); border-bottom:1px solid #d5ceb955; }
.brand { padding:0; background:none; font-family:serif; font-size:19px; letter-spacing:3px; text-align:left; }
.brand span { display:block; font:7px/1.6 sans-serif; letter-spacing:2px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:13px; }
#chapter-label { font:8px/1.2 sans-serif; letter-spacing:1px; color:var(--muted); }
.round-button { width:44px; min-width:44px; height:44px; border:1px solid #c5c6b4; border-radius:50%; background:transparent; font-size:22px; color:var(--green); }
#scene-host { min-height:0; position:relative; overflow:hidden; }
.screen { width:100%; height:100%; position:relative; }
.eyebrow { font:9px/1.6 sans-serif; letter-spacing:2.6px; color:var(--gold); }
.primary,.secondary { display:flex; justify-content:center; align-items:center; gap:15px; width:100%; min-height:49px; border-radius:3px; padding:12px 18px; letter-spacing:1.3px; font-size:13px; }
.primary { background:var(--green); color:#f6efde; border:1px solid #496251; }
.primary span { margin-left:auto; }
.secondary { background:transparent; border:1px solid var(--line); color:var(--green); }
.text-button { background:transparent; padding:8px 12px; text-decoration:underline; text-underline-offset:5px; font-size:11px; color:var(--green); }
.quiet { font-size:10px; line-height:1.7; color:var(--muted); }
.title-screen { display:flex; flex-direction:column; padding:21px 34px max(19px,env(safe-area-inset-bottom)); background:linear-gradient(#f3eddf18,#f3eddfb8 48%,#f3eddfed),var(--game-background) center/cover; }
.title-badge { font:8px/1.5 sans-serif; letter-spacing:2px; color:var(--muted); }
.title-art { flex:1; min-height:105px; max-height:270px; position:relative; display:flex; align-items:center; justify-content:center; }
.title-ring { position:absolute; height:83%; aspect-ratio:1; border:1px solid #a6b198; border-radius:50%; box-shadow:0 0 0 10px #e5e6d888,0 0 0 11px #d0d5bf; }
.title-art img { position:relative; height:90%; max-width:80%; object-fit:contain; transform:rotate(-5deg); }
.title-mark { position:absolute; right:12%; top:16%; font:italic 34px Georgia,serif; color:#b28b61; transform:rotate(18deg); }
.title-copy { padding:11px 0 25px; }
.title-copy .eyebrow { color:var(--sage); letter-spacing:3px; margin-bottom:13px; }
.title-copy h1 { font-size:clamp(27px,7vw,36px); line-height:1.55; letter-spacing:3px; }
.title-copy>p:last-child { font-size:12px; line-height:1.9; color:#93927f; margin-top:15px; }
.title-buttons { display:grid; gap:9px; }
.title-screen>.quiet { margin-top:15px; text-align:center; font-size:9px; letter-spacing:.5px; }
.title-music { flex:none; align-self:center; min-height:32px; margin-top:5px; padding:5px 12px; color:var(--green); background:transparent; font-size:11px; text-underline-offset:4px; text-decoration:underline; }
.dialogue-screen { display:grid; grid-template-rows:minmax(0,1fr) auto; }
.scene { position:relative; min-height:0; overflow:visible; background-size:cover; background-position:center 34%; }
.scene:before { content:""; position:absolute; inset:0; background:#d6d6bc22; }
.scene-shade { position:absolute; inset:0; background:linear-gradient(0deg,#f3eddf 0,transparent 25%,#f3eddf11 80%); }
.character-stage { position:absolute; top:0; left:0; right:0; bottom:-112px; overflow:hidden; pointer-events:none; z-index:2; }
.portrait { position:absolute; bottom:var(--sprite-bottom-offset,0px); width:76%; height:min(55vh,calc(100% - 18px)); height:min(55dvh,calc(100% - 18px)); overflow:hidden; --entry-x:-18px; --exit-x:-20px; }
.portrait.side-left { left:-8%; }
.portrait.side-right { right:-8%; --entry-x:24px; --exit-x:24px; }
.portrait,.dialogue-meta { --entry-x:-24px; --exit-x:-24px; }
.portrait.entering,.dialogue-meta.entering { animation:portrait-enter .14s ease-out both; }
.portrait.is-leaving,.dialogue-meta.is-leaving { animation:portrait-leave .13s ease-in both; }
.sprite-motion,.sprite-orientation { position:absolute; inset:0; }
.sprite-motion { left:var(--sprite-translate-x,0px); right:calc(0px - var(--sprite-translate-x,0px)); top:var(--sprite-translate-y,0px); bottom:calc(0px - var(--sprite-translate-y,0px)); }
.sprite-orientation { transform:scaleX(var(--facing,1)); }
.portrait .character-sprite { position:absolute; top:var(--sprite-offset-y,0%); left:50%; height:calc(100% * var(--sprite-scale,2)); width:auto; max-width:none; object-fit:contain; object-position:center top; transform:translateX(calc(-1 * var(--sprite-focus,50%))); }
.portrait.cat { height:min(43vh,calc(100% - 25px)); height:min(43dvh,calc(100% - 25px)); width:78%; }
/* 原生半身图完整等比放入窗口；只由前景对话框遮挡底部，不再二次裁切。 */
.portrait[data-asset-type="waist-up"] { width:min(80%,calc(55vh * var(--sprite-ratio,.75))); width:min(80%,calc(55dvh * var(--sprite-ratio,.75))); height:auto; max-height:calc(100% - 18px); aspect-ratio:var(--sprite-ratio,.75); overflow:visible; translate:-50% 0; }
.portrait[data-asset-type="waist-up"].side-left { left:30%; right:auto; }
.portrait[data-asset-type="waist-up"].side-right { left:70%; right:auto; }
.portrait.cat[data-asset-type="waist-up"] { width:min(78%,calc(43vh * var(--sprite-ratio,.75))); width:min(78%,calc(43dvh * var(--sprite-ratio,.75))); }
.portrait .character-sprite[data-asset-type="waist-up"] { top:auto; bottom:0; left:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; transform:translateX(calc((50% - var(--sprite-focus,50%)) * var(--sprite-scale,1))) scale(var(--sprite-scale,1)); transform-origin:center bottom; }
.portrait .character-sprite.expression-in { animation:expression-in .18s ease-out both; }
.portrait .character-sprite.is-old { animation:expression-out .18s ease-out forwards; }
.portrait.is-listener .sprite-motion { opacity:.7; transform:scale(.98); }
.conversation { padding:0 20px max(20px,env(safe-area-inset-bottom)); position:relative; z-index:3; margin-top:-3px; background:linear-gradient(transparent 0 30px,var(--paper) 30px); }
.dialogue-meta { display:flex; align-items:center; gap:9px; min-height:34px; padding:0 4px; margin-bottom:-9px; position:relative; z-index:1; }
.dialogue-meta:not([data-speaker]) { visibility:hidden; }
.dialogue-meta[data-side="right"] { flex-direction:row-reverse; --entry-x:24px; --exit-x:24px; }
.dialogue-meta[data-side="right"] .dialogue-diamond { margin-left:0; margin-right:auto; }
#speaker { flex:none; background:#fffef8; color:var(--green); border:1px solid #c8b68e; border-radius:6px; box-shadow:0 2px 5px #344f4326; padding:6px 14px; font-size:13px; line-height:20px; letter-spacing:2px; }
#role { font-size:9px; color:var(--muted); letter-spacing:.4px; background:#f3eddfec; border-radius:2px; }
.dialogue-diamond { margin-left:auto; color:var(--gold); }
.dialogue { width:100%; min-height:168px; border:1px solid var(--line); border-radius:3px 3px 13px 3px; box-shadow:3px 4px 0 #dcd5c352; background:#fffbf1; padding:29px 20px 15px; display:flex; flex-direction:column; text-align:left; }
#dialogue-text { display:block; font-size:15px; letter-spacing:.5px; line-height:1.95; white-space:pre-line; min-height:75px; }
.dialogue-bottom { margin-top:auto; display:flex; justify-content:space-between; padding-top:9px; color:#a4a18e; font-size:9px; }
#next-label { color:var(--sage); }
.below-dialogue { display:flex; align-items:center; gap:12px; font:8px/1.5 sans-serif; letter-spacing:1px; color:var(--muted); padding:16px 1px 0; }
#progress { margin-left:auto; width:62px; height:3px; background:#d8d6c6; position:relative; }
#progress:before { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--progress,0); background:var(--sage); transition:width .25s; }
.peek-left .portrait.cat,.peek-right .portrait.cat { width:65%; height:32vh; height:32dvh; bottom:-75px; }
.peek-left .portrait.side-left { left:-22%; }
.peek-right .portrait.side-right { right:-22%; }
.peek-left .portrait.cat[data-asset-type="waist-up"],.peek-right .portrait.cat[data-asset-type="waist-up"] { width:min(78%,calc(43dvh * var(--sprite-ratio,.75))); height:auto; bottom:var(--sprite-bottom-offset,20px); }
.peek-left .portrait.cat[data-asset-type="waist-up"].side-left { left:30%; right:auto; }
.peek-right .portrait.cat[data-asset-type="waist-up"].side-right { left:70%; right:auto; }
.secret-scene .scene:before { background:#40544544; }
.character-stage[data-scene-mode="dual"] .portrait { width:53%; }
.flee .portrait { animation:portrait-leave .18s ease-in both; }
.mission-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(#23372fc9,#23372fe8),var(--game-background) center/cover; color:#e5ddc4; padding:30px; text-align:center; }
.mission-symbol { font:90px/1 Georgia,serif; color:var(--gold); margin-bottom:30px; }
.mission-screen h1 { font-size:29px; letter-spacing:4px; margin:18px 0; }
.mission-rule { width:50px; height:1px; background:var(--gold); margin:7px 0 24px; }
.mission-screen>p:not(.eyebrow) { font-size:12px; color:#aab09c; line-height:2; }
.status { font:9px/1.5 sans-serif; letter-spacing:2px; margin:30px 0; display:flex; gap:20px; }
.status b { color:var(--gold); font-weight:400; }
.mission-screen .primary { border-color:#a78e60; background:#cfb98c; color:#273a31; max-width:280px; }
.puzzle-screen { padding:15px 16px max(12px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; background:var(--paper); }
.quest-heading { display:flex; align-items:center; justify-content:space-between; }
.quest-heading h1 { font-size:23px; margin-top:3px; letter-spacing:2px; }
.quest-heading .eyebrow { font-size:8px; color:var(--sage); }
#ask-hint { flex:none; display:flex; align-items:center; gap:6px; min-height:44px; padding:8px 10px; background:#f8eccd; border:1px solid #b79a61; border-radius:22px; text-decoration:none; color:#5a5438; font-size:12px; box-shadow:0 2px 7px #705a2415; }
#ask-hint::before { content:"✦"; color:#a07b35; font-size:15px; }
.objective { font-size:10px; color:var(--muted); margin:8px 0 10px; }
.puzzle-board { width:100%; flex:1; min-height:180px; position:relative; background:#ad967c; border:1px solid #c9b99d; border-radius:6px; overflow:hidden; isolation:isolate; }
.room-art { position:absolute; background-size:100% 100%; background-repeat:no-repeat; }
.hotspot { position:absolute; background:none; padding:0; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; z-index:2; border-radius:5px; }
.hotspot::after { content:""; position:absolute; inset:-4px; border-radius:5px; }
.hotspot:focus-visible { outline-offset:0; }
.hotspot img { width:100%; height:100%; object-fit:contain; transition:transform .2s; }
.hotspot:active img { transform:translateY(-3px); }
.hotspot span { position:absolute; bottom:0; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:9px; letter-spacing:1px; color:#eee7d3; background:#423f32d9; padding:3px 7px; border-radius:3px; opacity:0; pointer-events:none; }
.hotspot:focus-visible span,.hotspot:active span { opacity:1; }
.hotspot-box { z-index:3; }
.hotspot-box span { background:#b49763; color:#fff8df; }
.box-symbols { position:absolute; top:22%; left:17%; right:17%; font:clamp(5px,1.8vw,8px)/1.2 sans-serif; letter-spacing:.5px; text-align:center; white-space:nowrap; pointer-events:none; color:#e4d4ab; text-shadow:0 1px 1px #17130d; transform:skewX(-8deg) rotate(1deg); }
.room-box-cavity,.room-box-lid { position:absolute; inset:0; clip-path:polygon(8% 8%,92% 10%,89% 44%,7% 44%); pointer-events:none; }
.room-box-cavity { background:#181611; opacity:0; }
.room-box-lid { transform-origin:50% 10%; }
.opened .room-box-cavity { opacity:1; }
.opened .room-box-lid { transform:perspective(250px) rotateX(65deg) translateY(-8px); transition:transform 1s ease; }
.investigation-crop { width:min(100%,270px,calc(220px * var(--crop-ratio))); margin:0 auto 17px; background-repeat:no-repeat; border-radius:4px; }
.puzzle-console { padding:9px 0 0; }
#investigation { font-size:11px; line-height:1.65; min-height:37px; color:#696c59; }
.clue-row { display:flex; justify-content:center; gap:8px; padding:7px 0; border-top:1px solid #d7d1bd; border-bottom:1px solid #d7d1bd; }
.clue-row>span { font:13px/1.5 sans-serif; color:#9e9f8c; flex:1; text-align:center; }
.clue-row>span.found { color:var(--green); }
.inventory-label { display:flex; justify-content:space-between; align-items:center; font:11px/1.5 sans-serif; color:var(--green); letter-spacing:1px; padding:7px 0 5px; }
.inventory-label span { font-size:9px; letter-spacing:0; }
.inventory { display:flex; gap:8px; }
.item-slot { width:33.333%; min-height:49px; border:1px solid #cdc8b2; border-radius:4px; background:#e9e6d6; display:flex; align-items:center; justify-content:center; gap:4px; font-size:11px; }
.item-slot img { width:35px; height:35px; }
.item-slot[aria-pressed="true"] { border:2px solid #56705b; background:#d9e0cb; }
.item-slot.empty { color:#bdbba6; }
.box-light { pointer-events:none; position:absolute; left:71%; top:62%; width:28%; height:20%; background:radial-gradient(ellipse,#fff1b3aa,transparent 65%); opacity:0; z-index:1; }
.mechanical-locks { display:none; position:absolute; left:79%; top:73%; width:11%; justify-content:space-around; z-index:5; pointer-events:none; }
.mechanical-locks i { width:10px; height:15px; border:2px solid #dec487; background:#745c3b; border-radius:3px; transition:transform .3s,opacity .3s; }
.opening .mechanical-locks { display:flex; }
.mechanical-locks i.released { transform:translateY(-14px) rotate(20deg); opacity:.3; }
.opening .hotspot { pointer-events:none; }
.opening .hotspot-box { animation:box-shake .4s ease 3; }
.opened .box-light { opacity:1; transition:opacity 1s; }
.opened .hotspot-box img { animation:lid-open 1s ease-out; }
.opened .room-art:after { content:"✦ · ✧"; position:absolute; left:77%; top:64%; color:#d7be79; letter-spacing:5px; animation:particles 1.2s ease-out both; z-index:6; }
.modal { position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:18px; background:#14251fd1; backdrop-filter:blur(4px); }
.modal-card { width:100%; max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; padding:27px 24px 22px; border:1px solid #c7b68e; border-radius:7px; position:relative; background:var(--paper); box-shadow:0 15px 70px #0004; scrollbar-width:thin; }
.modal-close { position:absolute; right:10px; top:10px; border:0; }
.modal-card>.eyebrow { margin-bottom:12px; padding-right:32px; color:var(--sage); font-size:8px; }
.modal-card>h2 { font-size:24px; padding-right:22px; margin-bottom:15px; }
#modal-body>p { white-space:pre-line; font-size:13px; line-height:1.9; }
#modal-body .quiet { margin-top:15px; font-size:10px; }
.modal-actions { display:grid; gap:9px; margin-top:22px; }
.investigation-art { display:block; width:135px; height:135px; margin:0 auto 12px; }
.clue-discovery { display:flex; gap:22px; justify-content:center; align-items:center; background:#e5e2d0; border:1px solid #d2cbb1; margin-top:17px; padding:15px; font-size:23px; }
.clue-discovery b { font:36px Georgia,serif; color:var(--green); }
.hint-cat { width:115px; height:95px; object-fit:cover; object-position:50% 8%; display:block; margin:0 auto 10px; }
.hint-reveal { text-align:center; margin-bottom:18px; animation:hint-peek .38s ease-out both; }
.hint-reveal img { display:block; width:150px; height:140px; object-fit:contain; margin:auto; }
.hint-reveal p { display:inline-block; padding:9px 14px; border:1px solid #cfbea0; border-radius:14px 14px 14px 2px; background:#fffaf0; font-size:14px; color:var(--green); }
@keyframes hint-peek { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .hint-reveal { animation:none; } }
.code-inputs { display:flex; gap:9px; justify-content:center; margin:24px 0 18px; }
.code-inputs label { width:25%; text-align:center; font-size:23px; }
.code-inputs select { display:block; width:100%; min-height:58px; margin-top:10px; font:25px Georgia,serif; background:#e1dbc8; border:1px solid #b9a982; border-radius:4px; text-align:center; }
#modal-body .code-feedback { font-size:11px; min-height:40px; color:#927154; }
.invitation-screen { display:flex; flex-direction:column; justify-content:center; padding:20px 5% max(20px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 43%,#c5c7af 0%,#9da98f 44%,#627c6b 100%); gap:16px; }
.invitation-screen>.eyebrow { flex:none; text-align:center; color:#e8e6c7; font-size:8px; }
#take-invitation { flex:none; }
.reward-stage { flex:1; min-height:0; position:relative; isolation:isolate; }
.reward-footer { flex:none; min-height:49px; display:grid; align-items:center; }
#reward-hint { text-align:center; font:12px/1.8 "Songti SC","SimSun",serif; letter-spacing:3px; color:#f6efdf; transition:opacity .3s; }
.reward-stage #invitation-card { position:absolute; left:calc((100% - var(--paper-width,100%))/2); top:calc((100% - var(--paper-height,100%))/2); width:var(--paper-width,100%); height:var(--paper-height,100%); z-index:2; transform-origin:50% 0; transform:translateY(var(--paper-tucked,0px)) scale(var(--paper-fold-scale,.76)); clip-path:inset(0 0 20% 0); transition:transform .65s cubic-bezier(.22,.65,.25,1),clip-path .75s ease-in-out,opacity .3s; }
.envelope-object,.envelope-back,.envelope-lid { position:absolute; left:calc((100% - var(--envelope-width,95%))/2); top:var(--envelope-top,40%); width:var(--envelope-width,95%); height:var(--envelope-height,40%); opacity:1; transition:transform .35s ease-in,opacity .35s; }
.envelope-back { z-index:0; pointer-events:none; }
.envelope-back::before { content:""; position:absolute; inset:7% 5% 6%; background:linear-gradient(#d5cbb7,#eee7d7 30%,#f3eddf); border:1px solid #dfd3bc; border-radius:2px; box-shadow:0 10px 25px #2f423629; }
.envelope-object { z-index:3; padding:0; border:0; border-radius:0; background:transparent; perspective:900px; }
.envelope-object:disabled { opacity:1; }
.envelope-front,.envelope-flap img { width:100%; height:100%; display:block; }
.envelope-front { clip-path:polygon(0 0,4% 7%,50% 63%,96% 7%,100% 0,100% 100%,0 100%); filter:drop-shadow(0 2px 2px #6d62511a); }
.envelope-lid { z-index:1; perspective:900px; pointer-events:none; }
.envelope-flap { position:absolute; inset:0; transform-origin:50% 7%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.1,.35,1); }
.envelope-flap img,.envelope-flap::after { clip-path:polygon(4% 7%,96% 7%,50% 64%); backface-visibility:hidden; }
.envelope-flap img { position:absolute; inset:0; transform:translateZ(.1px); }
.envelope-flap::after { content:""; position:absolute; inset:0; transform:translateZ(-.1px); backface-visibility:visible; background:linear-gradient(#e7ddc9 7%,#f6efe2 60%); }
.reward-box { position:absolute; width:80%; height:45%; object-fit:contain; left:10%; top:39%; z-index:-1; opacity:0; pointer-events:none; }
[data-reward-phase="preparing"] .envelope-object,[data-reward-phase="preparing"] .envelope-back,[data-reward-phase="preparing"] .envelope-lid { opacity:0; }
[data-reward-phase="preparing"] #reward-hint { opacity:0; }
[data-reward-phase="sealed"] .envelope-object,[data-reward-phase="sealed"] .envelope-back,[data-reward-phase="sealed"] .envelope-lid { animation:envelope-arrive .5s ease-out both; }
[data-reward-phase="sealed"] .reward-box { animation:reward-box-recede .85s ease-out both; }
[data-reward-phase="opening"] .envelope-flap,[data-reward-phase="peeking"] .envelope-flap,[data-reward-phase="extracting"] .envelope-flap,[data-reward-phase="unfolding"] .envelope-flap { transform:rotateX(-170deg); }
[data-reward-phase="peeking"] #invitation-card { opacity:1; transform:translateY(var(--paper-peek)) scale(var(--paper-fold-scale)); }
[data-reward-phase="extracting"] #invitation-card { opacity:1; transform:translateY(var(--paper-extracted)) scale(var(--paper-fold-scale)); transition-duration:.35s; }
[data-reward-phase="extracting"] .envelope-object,[data-reward-phase="extracting"] .envelope-back,[data-reward-phase="extracting"] .envelope-lid,[data-reward-phase="unfolding"] .envelope-object,[data-reward-phase="unfolding"] .envelope-back,[data-reward-phase="unfolding"] .envelope-lid { opacity:0; transform:translateY(35px); pointer-events:none; }
[data-reward-phase="unfolding"] #invitation-card,[data-reward-phase="revealed"] #invitation-card { opacity:1; transform:none; clip-path:inset(0); }
[data-reward-phase="unfolding"] #invitation-card { transition-duration:.75s; }
[data-reward-phase="revealed"] .envelope-lid { display:none; }
.reward-stage .invitation-card.is-revealed { animation:none; }
.reward-stage .invitation-card.collected { animation:collect .6s ease-in forwards; }
[data-reward-phase="revealed"] #take-invitation { animation:expression-in .35s ease both; }
/* 图片在剩余空间内完整等比显示，短屏优先缩小整张画面。 */
.invitation-card { position:relative; isolation:isolate; display:grid; place-items:center; min-width:0; min-height:0; opacity:0; }
.invitation-image { position:relative; z-index:1; display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; filter:drop-shadow(0 8px 14px #293d3026); }
.invitation-card::before { content:""; position:absolute; z-index:0; inset:4% -2%; background:radial-gradient(ellipse,#f5d89933,transparent 72%); filter:blur(16px); pointer-events:none; }
.invitation-card::after { content:""; position:absolute; z-index:2; inset:0; opacity:0; pointer-events:none; background:radial-gradient(circle at 3% 27%,#d4b568 0 1.5px,transparent 2px),radial-gradient(circle at 97% 42%,#d4b568 0 1px,transparent 2px),radial-gradient(circle at 8% 76%,#dfc386 0 1px,transparent 2px),radial-gradient(circle at 93% 86%,#dfc386 0 1.5px,transparent 2px); }
.invitation-card.is-revealed { opacity:1; animation:card-arrive .6s ease-out both; }
.invitation-card.is-revealed::after { animation:invitation-dust 1.4s .15s ease-out both; }
.invitation-card.collected { animation:collect .6s ease-in forwards; }
.item-notice { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#253c32f5; color:#e9e0c6; gap:20px; }
.item-notice>span { font-size:70px; color:#c9b584; }
.item-notice>p:not(.eyebrow) { font-size:12px; letter-spacing:4px; }
.item-notice h2 { font-size:29px; }
.item-notice small { color:#bda675; letter-spacing:5px; }
.transition { position:absolute; inset:0; z-index:35; background:#172b24; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#eae2cc; animation:transition-in .35s ease; }
.transition>span { font:10px/1.5 sans-serif; letter-spacing:4px; color:#bca776; }
.transition h2 { margin-top:20px; font-size:28px; letter-spacing:4px; }
.transition i { width:42px; height:1px; background:#a69368; margin-top:30px; }
.chapter-end { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px 28px; background:linear-gradient(#f3eddfbd,#f3eddfed),var(--game-background) center/cover; }
.end-seal { border:1px solid #a8b393; color:var(--green); border-radius:50%; width:60px; height:60px; display:grid; place-items:center; margin:23px 0; font-size:25px; }
.chapter-end h1 { font-size:28px; letter-spacing:2px; }
.chapter-end>p:not(.eyebrow) { font-size:12px; line-height:1.9; color:var(--muted); margin:16px 0 25px; }
.next-quest { border:1px solid var(--line); background:#e8e7d7; padding:20px; width:100%; margin-bottom:25px; }
.next-quest span { font:8px/1.5 sans-serif; letter-spacing:2px; color:var(--sage); }
.next-quest h2 { font-size:23px; margin:10px 0; letter-spacing:3px; }
.next-quest p { color:#999d88; font-size:10px; }
.chapter-end>.text-button { margin-top:10px; }
.modal.invitation-modal { padding:12px 3%; }
.invitation-modal .modal-card { display:flex; flex-direction:column; height:calc(100% - 24px); min-height:0; padding:20px 2% 16px; overflow:hidden; }
.invitation-modal #modal-kicker { display:none; }
.invitation-modal #modal-title { flex:none; font-size:20px; padding-right:44px; margin-bottom:12px; }
.invitation-modal #modal-body { flex:1; min-height:0; display:grid; }
.invitation-modal .mini { width:100%; height:100%; }
.invitation-modal .modal-actions { flex:none; margin-top:14px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes portrait-enter { from { opacity:0; transform:translateX(var(--entry-x)); } to { opacity:1; transform:translateX(0); } }
@keyframes portrait-leave { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(var(--exit-x)); } }
@keyframes expression-in { from { opacity:0; } to { opacity:1; } }
@keyframes expression-out { from { opacity:1; } to { opacity:0; } }
@keyframes box-shake { 25% { transform:translateX(-1px); } 75% { transform:translateX(1px); } }
@keyframes lid-open { from { transform:scaleY(.84); opacity:.65; } to { transform:scaleY(1); opacity:1; } }
@keyframes particles { from { opacity:0; transform:translateY(15px); } 40% { opacity:.8; } to { opacity:0; transform:translateY(-30px); } }
@keyframes card-arrive { from { opacity:0; transform:translateY(12px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes invitation-dust { from { opacity:0; transform:translateY(12px); } 35% { opacity:.5; } to { opacity:0; transform:translateY(-12px); } }
@keyframes envelope-arrive { from { opacity:0; transform:translateY(20px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes reward-box-recede { from { opacity:.5; transform:translateY(0) scale(.9); } to { opacity:0; transform:translateY(25px) scale(.82); } }
@keyframes collect { to { opacity:0; transform:translateY(80px) scale(.1); } }
@keyframes transition-in { from { opacity:0; } to { opacity:1; } }
@media(min-width:700px) { .game { box-shadow:0 0 90px #0003; border-left:1px solid #b3b69a33; border-right:1px solid #b3b69a33; } }
@media(max-height:720px) {
  .game { grid-template-rows:calc(54px + env(safe-area-inset-top)) minmax(0,1fr); }
  .portrait[data-asset-type="waist-up"] { bottom:calc(var(--sprite-bottom-offset,0px) + 20px); }
  .title-screen { padding:14px 25px 13px; }.title-art { max-height:150px; }.title-copy { padding:10px 0 15px; }.title-copy h1 { font-size:27px; line-height:1.4; }.title-copy>p:last-child { margin-top:8px; font-size:11px; }.title-copy .eyebrow { margin-bottom:6px; }.title-screen>.quiet { margin-top:9px; }
  .conversation { padding:0 16px max(12px,env(safe-area-inset-bottom)); }.dialogue { min-height:151px; padding:25px 17px 12px; }#dialogue-text { font-size:14px; min-height:67px; }.below-dialogue { padding-top:10px; }
  .puzzle-screen { padding:9px 12px max(8px,env(safe-area-inset-bottom)); }.quest-heading h1 { font-size:20px; }.objective { margin:4px 0 6px; }.puzzle-console { padding-top:5px; }#investigation { font-size:10px; min-height:33px; }.clue-row { padding:4px 0; }.inventory-label { padding:4px 0; }.item-slot { min-height:44px; }
  .invitation-screen { padding:12px 5% max(14px,env(safe-area-inset-bottom)); gap:10px; }
  .mission-symbol { margin-bottom:14px; font-size:65px; }.mission-screen h1 { font-size:26px; }.status { margin:20px 0; }
}
@media(max-width:360px) {
  .topbar { padding-left:16px; padding-right:12px; }.top-actions { gap:6px; }.brand { font-size:17px; }
  #role { font-size:8px; }#speaker { font-size:12px; padding:6px 12px; }
  .quest-heading .text-button { font-size:10px; padding:6px; }.hotspot span { font-size:8px; padding:2px 5px; }
  .modal-card { padding:25px 18px 18px; }.modal { padding:12px; }.code-inputs { gap:6px; }
}
@media(max-height:570px) {
  .title-art { min-height:70px; max-height:105px; }.title-copy h1 { font-size:24px; }.title-copy>p:last-child { font-size:10px; }.title-screen>.quiet { font-size:8px; }
  .invitation-screen>.eyebrow { display:none; }
  .puzzle-board { min-height:155px; }.chapter-end { padding:15px 24px; }.end-seal { margin:14px 0; width:45px; height:45px; }.chapter-end>p:not(.eyebrow) { margin:12px 0; }.next-quest { padding:13px; margin-bottom:13px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; }.invitation-card.collected,.reward-stage #invitation-card.collected { opacity:0; }.invitation-card::after { display:none; } }