/* 黑醬・在身邊 — 三版（生日禮物） */
@font-face{font-family:"WenKai";src:url("fonts/wenkai-subset.2828baa78327.woff2") format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f3ede3;--paper2:#ebe3d6;--card:#faf6ef;--ink:#3d322a;--warm:#8a6a55;--quiet:#8b7d71;--line:#dcd2c6;--blue:#5ba3c6;--blush:#e9c9c0;
  --serif:"WenKai","Kaiti TC","Songti TC","Noto Serif TC","PMingLiU",serif;--body:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:
  radial-gradient(ellipse at 80% -10%,#fffbf0 0,transparent 55%),
  radial-gradient(ellipse at 0 70%,#e6dac833 0,transparent 60%)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .40 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
main{max-width:1080px;margin:auto;padding:28px max(22px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #99795d;outline-offset:5px}
a,button{-webkit-tap-highlight-color:transparent}
.anchor{display:block;position:relative;top:-24px}

/* 標題列 */
.page-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:22px var(--serif);letter-spacing:.1em}
.wordmark img{width:40px;height:40px;border-radius:12px;box-shadow:0 1px 0 #fff,0 4px 12px #5a453826}
.wordmark-note{font:11px var(--body);letter-spacing:.18em;margin-left:12px;color:var(--quiet)}
.dedication{font-size:12px;letter-spacing:.14em;color:var(--quiet)}

/* 開頭：畫像與祝福 */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:36px;padding:44px 0 28px}
.portrait{position:relative;display:flex;justify-content:center;animation:arrive 1s both}
.portrait:before{content:"";position:absolute;inset:8% 6% 2%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fffdf7 0,#f8f1e5 50%,transparent 72%)}
.portrait img{position:relative;width:min(100%,480px);height:auto;filter:drop-shadow(0 18px 24px #5a453822)}
.greeting{animation:arrive 1.1s .15s both}
.eyebrow{display:block;font-size:12px;letter-spacing:.22em;color:var(--warm);margin-bottom:18px}
.greeting h1{font:400 clamp(40px,5.2vw,64px)/1.35 var(--serif);letter-spacing:.06em;margin:0 0 18px;text-wrap:balance}
.lead{font:400 clamp(17px,2vw,21px)/1.9 var(--serif);letter-spacing:.1em;color:#6f6256;margin:0 0 30px}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;border:0;border-radius:100px;color:#fffaf2;background:var(--warm);font:15px var(--body);letter-spacing:.1em;padding:14px 28px;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s}
.primary:hover:not(:disabled){background:#755941;transform:translateY(-1px)}
.primary:disabled{opacity:.75;cursor:default}
.primary svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.primary.soft{background:transparent;color:var(--warm);border:1px solid #cdb9a6}
.primary.soft:hover{background:#e9dfd23b;color:var(--warm)}

/* 信 */
.letter-section{padding:34px 0 10px}
.letter{position:relative;max-width:560px;margin:0 auto;padding:46px 40px 40px;background:var(--card);border-radius:4px;
  box-shadow:0 1px 0 #fff inset,0 2px 0 #e3d8c9,0 22px 40px -20px #5a453840;transform:rotate(-.4deg)}
.letter:before,.letter:after{content:"";position:absolute;top:-14px;left:50%;width:84px;height:26px;background:#5ba3c6cc;transform:translateX(-50%) rotate(-2deg);opacity:.75;border-radius:2px}
.letter:after{display:none}
.letter p{margin:0 0 22px;font:400 19px/2 var(--serif);letter-spacing:.1em;color:#4a3f36}
.letter p:first-child{margin-bottom:28px}
.letter-end{margin-top:34px!important}
.letter-sign{display:block;margin-top:30px;text-align:right;font:17px var(--serif);letter-spacing:.14em;color:var(--warm)}

/* 段落標題 */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.section-head h2{font:400 clamp(22px,2.6vw,28px)/1.4 var(--serif);letter-spacing:.1em;margin:0}
.section-head span{font-size:12px;letter-spacing:.1em;color:var(--quiet)}

/* 牠的故事：橫向卡片 */
.story{padding:48px 0 8px}
.story-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 4px 22px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.story-track::-webkit-scrollbar{display:none}
.story-track figure{flex:0 0 min(72vw,300px);margin:0;scroll-snap-align:start;background:var(--card);padding:10px 10px 16px;border-radius:6px;box-shadow:0 1px 0 #fff inset,0 2px 0 #e3d8c9,0 16px 30px -16px #5a453840;transform:rotate(var(--tilt,0));transition:transform .3s}
.story-track figure:nth-child(odd){--tilt:-.8deg}.story-track figure:nth-child(even){--tilt:.7deg}
.story-track figure:hover{transform:rotate(0) translateY(-3px)}
.story-track img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:#e8e0d4}
.story-track figcaption{margin-top:12px;font:400 15px/1.7 var(--serif);letter-spacing:.06em;color:#4a3f36;text-align:center;min-height:3.2em;text-wrap:balance}
.story-hint{margin:0;text-align:center;font-size:11px;letter-spacing:.14em;color:var(--quiet)}
@media(min-width:900px){.story-hint{display:none}.story-track{flex-wrap:wrap;overflow:visible;justify-content:center;gap:22px}.story-track figure{flex-basis:calc(25% - 17px)}.story-track figcaption{font-size:14px}}

/* AR：給牠的一個小房間 */
.companion-section{padding:56px 0 0}
.ar-room{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center}
.room{position:relative;min-width:0;border-radius:240px 240px 28px 28px;overflow:hidden;background:linear-gradient(#f8f2e8,#f1e8db 70%);
  box-shadow:0 1px 0 #fff inset,0 0 0 10px var(--card),0 0 0 11px #e3d8c9,0 30px 50px -26px #5a453866;animation:arrive 1s .1s both}
.room-wall{position:absolute;inset:0;pointer-events:none}
.room-window{position:absolute;top:9%;left:9%;width:24%;opacity:.9;filter:drop-shadow(0 4px 6px #5a45381a)}
.room-sprig{position:absolute;right:6%;bottom:22%;width:15%;opacity:.95;transform-origin:bottom center;animation:sway 6s ease-in-out infinite}
.room-light{position:absolute;top:-10%;left:12%;width:60%;height:120%;background:linear-gradient(115deg,#fffaf0aa,transparent 60%);transform:skewX(-14deg);mix-blend-mode:screen}
.room-floor{position:absolute;left:0;right:0;bottom:0;height:27%;background:linear-gradient(#e8dccb,#e2d4c1);border-top:1px solid #d9cab6}
.room-rug{position:absolute;left:50%;top:28%;width:62%;height:44%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#ecc9bd 0,#e6bfb2 58%,#d9ae9f 60%,#e6bfb2 63%,#e6bfb2 100%);box-shadow:0 6px 10px -6px #5a453840}
.stage{position:relative;height:500px;background:transparent}
model-viewer{display:block;width:100%;height:100%;--poster-color:transparent;touch-action:pan-y}
.load-status{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--quiet);font-size:13px;pointer-events:none;transition:opacity .4s}
.stage:has(.load-status[data-ready=true]) .load-status{opacity:0}
.presence{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:11px;letter-spacing:.06em;color:#6f6256;background:#faf6efe6;padding:7px 14px;border-radius:100px;box-shadow:0 4px 14px -8px #5a453866;backdrop-filter:blur(4px)}
.presence-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#c49a86;animation:breathe 3.2s ease-in-out infinite}
.gesture{margin-left:4px;padding-left:10px;border-left:1px solid var(--line)}
.room-side{min-width:0;display:flex;flex-direction:column;gap:30px}
.pose-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:19px var(--serif);letter-spacing:.1em;margin-bottom:18px}
.pose-heading #selected-pose{font:12px var(--serif);color:var(--warm);letter-spacing:.12em;background:#e9dfd2;padding:3px 12px;border-radius:100px}
.pose-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
.pose-card{position:relative;display:flex;align-items:center;flex-direction:column;border:0;background:transparent;color:var(--quiet);cursor:pointer;padding:0;font:13px var(--serif);letter-spacing:.08em;transition:color .2s}
.pose-card img{display:block;width:min(100%,104px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#efe7db;
  box-shadow:0 0 0 5px var(--card),0 0 0 6px #e3d8c9,0 12px 18px -10px #5a453855;filter:saturate(.75) sepia(.12);opacity:.88;transition:transform .25s,box-shadow .25s,filter .25s,opacity .25s}
.pose-card span{margin-top:12px}
.pose-card:hover img{transform:translateY(-3px);opacity:1}
.pose-card[aria-pressed=true]{color:var(--ink)}
.pose-card[aria-pressed=true] img{filter:none;opacity:1;box-shadow:0 0 0 5px var(--card),0 0 0 7.5px var(--blue),0 14px 22px -10px #5a453870}
.pose-card[aria-pressed=true]:after{content:"";position:absolute;top:2px;right:calc(50% - 50px);width:16px;height:16px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;box-shadow:0 0 0 2px var(--card)}
.action{margin:0}
.action .primary{display:flex;width:100%;gap:12px;min-height:60px;font:17px var(--serif);letter-spacing:.16em;background:linear-gradient(#93725c,#7f6150);box-shadow:0 1px 0 #ffffff33 inset,0 14px 24px -14px #5a4538aa}
.action .primary:hover:not(:disabled){background:linear-gradient(#866651,#71553f)}
.primary .paw{width:20px;height:20px;fill:currentColor;opacity:.9}
.device-hint{min-height:34px;margin:12px 4px 0;text-align:center;font-size:12px;line-height:1.9;color:var(--quiet);letter-spacing:.03em}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.5);opacity:1}}

/* 許願 */
.wish{padding:56px 0 8px}
.cake-card{max-width:520px;margin:0 auto;text-align:center}
.cake{display:block;width:min(100%,360px);margin:0 auto;border:0;background:transparent;padding:0;cursor:pointer}
.cake svg{width:100%;height:auto;display:block}
.flame-shape,.flame-core{transform-origin:160px 90px;animation:flicker 1.1s ease-in-out infinite}
.flame-core{animation-duration:.8s}
.flame-glow{animation:glow 1.6s ease-in-out infinite}
.cake.out .flame-group{animation:blow .5s ease-in both}
.cake.out .smoke{animation:smoke 2.6s .3s ease-out both}
.wish-text{margin:14px 0 0;font:400 17px/1.8 var(--serif);letter-spacing:.12em;color:#5e5247;min-height:2.6em;transition:opacity .5s}
.wish-text.swap{opacity:0}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.96,1.05) rotate(-2deg)}60%{transform:scale(1.04,.96) rotate(2deg)}}
@keyframes glow{0%,100%{opacity:.9}50%{opacity:.6}}
@keyframes blow{0%{transform:scaleX(1) skewX(0);opacity:1}60%{transform:scaleX(.5) skewX(30deg) translateX(10px);opacity:.8}100%{transform:scaleX(.1) skewX(50deg) translateY(-10px);opacity:0}}
@keyframes smoke{0%{opacity:0;transform:translateY(0)}20%{opacity:.7}100%{opacity:0;transform:translateY(-40px)}}

/* 短片 */
.film-section{padding:48px 0 8px}
.film-card{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;max-width:640px;margin:0 auto}
.film-poster{position:relative;border:0;padding:8px 8px 10px;background:var(--card);border-radius:6px;cursor:pointer;box-shadow:0 1px 0 #fff inset,0 2px 0 #e3d8c9,0 16px 30px -16px #5a453840;transform:rotate(-1.2deg);transition:transform .25s}
.film-poster:hover{transform:rotate(0) translateY(-3px)}
.film-poster img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.film-play{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);white-space:nowrap;font:13px var(--body);letter-spacing:.14em;color:#fffaf2;background:#3d322acc;padding:8px 16px;border-radius:100px;backdrop-filter:blur(4px)}
.film-meta p{margin:0 0 18px;font-size:14px;line-height:2;letter-spacing:.04em;color:#6f6256}
.intro-tools{display:flex;gap:10px;flex-wrap:wrap}
.quiet-button{font:12px var(--body);color:var(--warm);border:1px solid var(--line);border-radius:100px;background:transparent;min-height:42px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;letter-spacing:.06em}
.quiet-button:disabled{opacity:.4;cursor:default}

/* 結尾 */
.closing{text-align:center;padding:64px 0 52px}
.closing-art{display:block;width:min(60%,260px);height:auto;margin:0 auto 26px;border-radius:50% 50% 46% 46%;mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 55%,transparent 85%)}
.closing p{font:400 clamp(22px,3vw,28px)/1.8 var(--serif);letter-spacing:.1em;margin:0 0 10px}
.closing>span{font-size:12px;color:var(--quiet);letter-spacing:.08em}

/* 說明與頁尾 */
.help{max-width:680px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}
.help summary{list-style:none;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.06em;color:var(--quiet);cursor:pointer}
.help summary::-webkit-details-marker{display:none}
.help summary>span{font-size:16px;line-height:1.3;transition:transform .2s}
.help[open] summary>span{transform:rotate(45deg)}
.detail-body{font-size:13px;color:#807267;line-height:1.95;padding-top:8px}
.detail-body p{margin:15px 0}
.preview-tools{display:flex;gap:10px;flex-wrap:wrap}
.fine{font-size:11px!important;color:var(--quiet)}
.fine a{color:inherit}
.downloads{display:flex;gap:10px 24px;flex-wrap:wrap;margin:20px 0 10px}
.downloads a{color:var(--warm);font-size:12px;text-decoration:underline;text-decoration-color:#ccb9a6;text-underline-offset:5px}
footer{display:flex;justify-content:space-between;gap:15px;max-width:680px;margin:25px auto 0;color:#aa9d8e;font-size:10px;letter-spacing:.09em}
.error-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f8f2e8cc;border-radius:20px;text-align:center;font-size:14px;color:var(--quiet)}
.error-panel p{margin-bottom:22px}
.ar-switcher{position:absolute;left:12px;right:12px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:12px;border-radius:20px;background:#f3ede3ed;pointer-events:auto}
.ar-switcher button{font:13px var(--body);min-height:42px;border:1px solid var(--line);border-radius:100px;padding:10px 13px;background:transparent;color:var(--ink);cursor:pointer}
.ar-switcher button[aria-pressed=true]{background:var(--warm);color:#fffaf2}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  main{padding:20px max(18px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));max-width:560px}
  .page-header{padding-bottom:14px}.wordmark{font-size:20px;gap:9px}.wordmark img{width:32px;height:32px;border-radius:9px}.wordmark-note{font-size:10px;margin-left:8px}
  .hero{display:flex;flex-direction:column;gap:14px;padding:26px 0 10px;text-align:center}
  .portrait img{width:min(84%,360px)}
  .greeting h1{font-size:38px;margin-bottom:12px}.lead{font-size:16px;margin-bottom:22px}.eyebrow{margin-bottom:12px}
  .letter-section{padding:26px 0 6px}.letter{padding:38px 26px 32px}.letter p{font-size:17px;line-height:1.95}
  .story{padding:40px 0 4px}
  .companion-section{padding:42px 0 0}.ar-room{grid-template-columns:1fr;gap:28px}.room{border-radius:180px 180px 22px 22px}.stage{height:clamp(320px,52svh,420px)}.room-window{width:28%}.room-sprig{width:19%}
  .presence{font-size:10px;bottom:12px;padding:6px 12px}.device-hint{font-size:11px;margin-top:10px;min-height:28px}
  .room-side{gap:24px}
  .pose-heading{font-size:17px;margin-bottom:14px}
  .pose-grid{gap:16px 8px}.pose-card{font-size:12px}.pose-card img{width:min(100%,88px)}.pose-card[aria-pressed=true]:after{right:calc(50% - 42px)}
  .wish{padding:44px 0 4px}
  .film-section{padding:40px 0 4px}.film-card{grid-template-columns:1fr;gap:18px;text-align:center}.film-poster{width:min(60%,220px);margin:0 auto}.intro-tools{justify-content:center}
  .closing{padding:48px 0 36px}.closing p{font-size:21px}
  footer{font-size:9px;letter-spacing:.035em}
}
@media(max-width:350px){main{padding-inline:16px}.wordmark-note{display:none}.gesture{display:none}footer{flex-direction:column;align-items:center;gap:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}