/* 時之鑰 官網：依雪雪的範例風格。象牙紙底、長春花藍雙層細框、蕾絲分隔、手繪花草 */
:root{
  --paper:#fffdf8; --sky:#e9effc; --white:#fff;
  --ink:#46579b;        /* 標題：深長春花藍 */
  --ink2:#5c6591;       /* 次要文字 */
  --body:#454a66;       /* 內文 */
  --peri:#8fa3da; --peri-d:#6a80c4; --peri-l:#d5def6;
  --butter:#fff3bf; --daff-d:#b47a10;
  --sage-d:#4f8a6f; --rose:#ebafb0; --rose-d:#c0627a; --blush:#fbe9e6;
  --serif:"Noto Serif TC","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  --kai:"LXGW WenKai TC","BiauKai","DFKai-SB","標楷體","Kaiti TC",serif;
  --latin:"Cormorant Garamond","Noto Serif TC",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--kai);font-size:20px;line-height:1.8;-webkit-text-size-adjust:100%;font-variant-numeric:lining-nums}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--peri-d);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:660px}
.icon{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.center{text-align:center}

/* 語言 */
html[data-lang=zh] .en, html[data-lang=en] .zh{display:none!important}
html[data-lang=en] body{font-family:var(--latin);font-size:21px}

/* 雙層細框卡片 */
.card{position:relative;background:var(--white);border:1.5px solid var(--peri);border-radius:22px;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5.2px var(--peri-l)}

/* 圓鈕 */
.pill,.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border-radius:999px;background:#fff;color:var(--ink);
  font:inherit;font-weight:700;font-size:18px;line-height:1.5;cursor:pointer;border:1.5px solid var(--peri);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.2px var(--peri-l)}
.pill:hover,.chip:hover{background:var(--sky);box-shadow:inset 0 0 0 3px var(--sky),inset 0 0 0 4.2px var(--peri)}
.chip.gold{background:var(--peri-d);border-color:var(--peri-d);color:#fff;box-shadow:inset 0 0 0 2.5px var(--peri-d),inset 0 0 0 3.7px rgba(255,255,255,.7)}
.chip.gold:hover{background:#5a70b4;box-shadow:inset 0 0 0 2.5px #5a70b4,inset 0 0 0 3.7px rgba(255,255,255,.8)}
.chip.big{font-family:var(--serif);font-size:20px;letter-spacing:.12em;padding:12px 40px}
.chip:disabled{opacity:.6;cursor:wait}
.chip.off{filter:grayscale(1);opacity:.5;pointer-events:none}
.pill.small{font-size:15px;padding:4px 14px}
.c1 .icon{color:var(--daff-d)}.c2 .icon{color:var(--rose-d)}.c3 .icon{color:var(--sage-d)}.c4 .icon{color:var(--peri-d)}

/* 導覽列 */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.96);border-bottom:1.5px solid var(--peri-l)}
.bar-in{display:flex;align-items:center;gap:8px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-family:var(--serif);font-weight:900;font-size:25px;color:var(--ink);letter-spacing:.12em;line-height:1.25}
.brand img{width:46px;height:46px}
.brand small{display:block;font-family:var(--latin);font-style:italic;font-weight:600;font-size:14.5px;letter-spacing:.05em;color:var(--peri-d);line-height:1}
html[data-lang=en] .brand small{display:none}
.menu{display:flex;align-items:center}
.menu a{display:block;position:relative;padding:8px 13px;border-radius:999px;color:var(--ink2);font-weight:700;font-size:18.5px;white-space:nowrap}
.menu a:hover{background:var(--sky);color:var(--ink)}
.menu a+a::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--peri);transform:rotate(45deg);opacity:.7}
.lang{margin-left:8px;padding:5px 16px;font-size:15px}

/* 首屏 */
.hero{position:relative;min-height:780px;padding:150px 20px 150px;background:#e3eafb url(img/hero-paint.webp) center bottom/cover no-repeat;display:flex;justify-content:center;align-items:flex-start}
.plate{position:relative;width:min(780px,100%);padding:76px 40px 72px;text-align:center;background:rgba(255,253,248,.93);border:1.6px solid var(--peri);border-radius:28px;
  box-shadow:0 0 0 7px rgba(255,253,248,.93),0 0 0 8.6px var(--peri),0 22px 60px rgba(86,106,178,.2)}
.crown{position:absolute;left:50%;top:0;width:min(600px,96%);transform:translate(-50%,-62%);pointer-events:none}
.fl{position:absolute;width:62px;height:62px;pointer-events:none}
.fl.tl{left:9px;top:9px}.fl.tr{right:9px;top:9px;transform:scaleX(-1)}.fl.bl{left:9px;bottom:9px;transform:scaleY(-1)}.fl.br{right:9px;bottom:9px;transform:scale(-1,-1)}
.latin{font-family:var(--latin);font-style:italic;font-weight:600;font-size:26px;letter-spacing:.08em;color:var(--peri-d);display:flex;justify-content:center;align-items:center;gap:14px;line-height:1.3}
.latin::before,.latin::after{content:"";width:54px;height:1.4px;background:var(--peri)}
html[data-lang=en] .latin{display:none}
h1{font-family:var(--serif);font-weight:900;font-size:clamp(58px,13vw,100px);line-height:1.2;letter-spacing:.2em;margin-right:-.2em;color:var(--ink)}
html[data-lang=en] h1{font-family:var(--latin);font-weight:700;letter-spacing:.04em;margin-right:0}
.lead{font-size:clamp(19px,2.6vw,22px);color:var(--ink2);margin-top:6px}
.quick{display:flex;justify-content:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.quick .pill{font-size:17px;padding:8px 16px}
.ribbon{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);background:var(--peri-d);color:#fff;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.22em;
  padding:9px 30px 9px 36px;white-space:nowrap;line-height:1.7;box-shadow:inset 0 5px 0 -3.6px rgba(255,255,255,.75),inset 0 -5px 0 -3.6px rgba(255,255,255,.75)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:10px;width:46px;height:100%;background:#5a70b4;z-index:-1}
.ribbon::before{left:-30px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,34% 50%)}
.ribbon::after{right:-30px;clip-path:polygon(0 0,100% 0,66% 50%,100% 100%,0 100%)}

/* 區塊與蕾絲分隔 */
.band{position:relative;z-index:1;padding:78px 0 88px;background:var(--paper)}
.band.sky{background:var(--sky)}
.band::before{content:"";position:absolute;left:0;right:0;top:-26px;height:40px;background:url(img/lace-p.svg) repeat-x center bottom/44px 40px;pointer-events:none}
.band.sky::before{background-image:url(img/lace-s.svg)}
.head{text-align:center;margin-bottom:38px}
.eng{font-family:var(--latin);font-style:italic;font-weight:600;font-size:22px;color:var(--peri-d);letter-spacing:.08em;line-height:1.3}
.head h2{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--serif);font-weight:900;font-size:clamp(32px,6vw,44px);color:var(--ink);letter-spacing:.14em;line-height:1.35}
.head h2>span{margin-right:-.14em}
html[data-lang=en] .head h2{font-family:var(--latin);font-weight:700;letter-spacing:.02em}
.laurel{width:150px;flex:none}
.laurel.r{transform:scaleX(-1)}
.head .sub{color:var(--ink2);font-size:21px;margin:4px auto 0;max-width:720px}
.corner-art{position:absolute;right:-28px;top:-64px;width:150px;pointer-events:none;z-index:2}

/* 網頁試玩 */
.playbox{max-width:980px;margin:0 auto;padding:18px 18px 14px}
.screen{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#dfe6fa}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;
  background:linear-gradient(180deg,rgba(233,239,252,.15),rgba(233,239,252,.35)),url(img/hero-paint.webp) center 70%/cover}
.start{display:inline-flex;align-items:center;gap:10px;font:inherit;font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:.16em;color:#fff;cursor:pointer;
  padding:16px 46px 16px 40px;border-radius:999px;background:var(--peri-d);border:0;box-shadow:inset 0 0 0 3px var(--peri-d),inset 0 0 0 4.4px rgba(255,255,255,.8),0 10px 30px rgba(70,87,155,.35)}
.start:hover{background:#5a70b4}
.start .icon{width:1.1em;height:1.1em;fill:#fff;stroke:none}
.start:disabled{opacity:.7;cursor:wait}
.pnote{background:rgba(255,253,248,.92);border:1.5px solid var(--peri-l);border-radius:999px;padding:4px 18px;font-size:16.5px;color:var(--ink2);text-align:center}
.keys{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:16px;color:var(--ink2)}

/* 帳號 */
.acct{padding:40px 44px 36px}
.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:24px}
.tab{font:inherit;font-weight:700;font-size:18px;padding:5px 24px;border-radius:999px;border:1.5px solid var(--peri);background:#fff;color:var(--ink);cursor:pointer}
.tab.on{background:var(--peri-d);border-color:var(--peri-d);color:#fff}
#acctOut[data-mode=reg] .only-login,#acctOut[data-mode=login] .only-reg{display:none!important}
#authForm label{display:block;font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin-top:16px}
#authForm label:first-child{margin-top:0}
#authForm button{display:flex;margin:26px auto 0}
html[data-lang=en] #authForm label{font-family:var(--latin)}
.field{display:block;width:100%;margin-top:6px;font:inherit;font-size:18px;color:var(--body);padding:10px 20px;border-radius:999px;border:1.5px solid var(--peri-l);background:var(--paper);outline:none}
.field:focus{border-color:var(--peri);box-shadow:0 0 0 3px rgba(143,163,218,.28)}
.msg{text-align:center;margin-top:14px;min-height:1.6em;font-weight:700}
.msg.ok{color:var(--sage-d)}.msg.err{color:#a8443c}
.hint{font-size:16px;color:var(--ink2);line-height:1.65}
.claim-note{text-align:center;margin-top:10px}
.hello{text-align:center;font-size:20px;color:var(--ink2);margin-bottom:18px}
.hello b{font-family:var(--serif);font-size:32px;color:var(--ink);display:block;letter-spacing:.08em}
.letter{margin:0 0 24px;padding:28px 30px;border-radius:18px;background:var(--paper);border:1.5px solid var(--peri-l);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--peri-l);
  text-align:center;color:var(--ink);font-size:19px;line-height:1.95}
.letter .sign{margin-top:14px;text-align:right;font-family:var(--serif);font-weight:700;color:var(--peri-d)}
.owned{text-align:center;margin-bottom:6px}
.claim-t{font-family:var(--serif);font-weight:900;color:var(--ink);font-size:21px;letter-spacing:.06em}
.claim-t::before,.claim-t::after{content:"✦";color:var(--peri);font-size:.7em;margin:0 .6em;vertical-align:.15em}
.rewards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.rewards li{font-size:16px;padding:3px 14px;border-radius:999px;background:var(--sky);color:var(--ink);border:1px solid var(--peri-l)}
.mailbox,.claim{margin:22px 0 16px;padding:18px 18px;border-radius:18px;background:var(--sky);text-align:center}
.mail-ok{font-weight:700;color:var(--sage-d);margin-top:4px}
.claim-row{display:flex;gap:8px;margin-top:10px;align-items:center}
.claim-row .field{margin:0;flex:1;min-width:0}
.claim-row .amt{flex:0 0 120px}
.claim-row .chip{flex:none}
#codeRow{margin-top:8px}
.other{margin:0 0 18px;text-align:center}
.other summary{cursor:pointer;color:var(--ink2);font-size:16px;padding:6px 0}
.other[open] summary{margin-bottom:10px}
.codebox{text-align:center;padding:18px 16px;border-radius:18px;background:#fff;border:1.5px dashed var(--peri)}
.codebox>p:first-child{font-family:var(--serif);font-weight:700;color:var(--peri-d)}
.coderow{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0}
.coderow code{font-family:var(--serif);font-weight:900;font-size:32px;letter-spacing:.12em;color:var(--ink)}
.thanks{margin:0 0 18px;padding:12px 16px;border-radius:16px;background:var(--butter);border:1.5px solid #e9c46a;color:var(--daff-d);font-weight:700;text-align:center;line-height:1.6}
.thanks.ok{background:#eaf4ec;border-color:var(--sage-d);color:var(--sage-d)}
#logoutBtn{display:flex;margin:0 auto}

/* 贊助 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 auto 54px;max-width:960px}
.steps li{display:flex;align-items:center;gap:14px;padding:16px 22px;font-weight:700;color:var(--ink);line-height:1.6}
.steps b{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--peri);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--peri-l);
  font-family:var(--serif);font-weight:900;font-size:20px;color:var(--ink)}
.tiers{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 20px;margin-bottom:34px}
.tiers>.tier{width:calc((100% - 3*20px)/4)}
.tier{padding:40px 20px 22px;text-align:center}
.tier .bow{position:absolute;left:50%;top:-22px;width:92px;transform:translateX(-50%)}
.tier .price{font-family:var(--serif);font-weight:900;font-size:27px;color:var(--daff-d);line-height:1.3}
html[data-lang=en] .tier .price{font-family:var(--latin)}
.tier .price small{display:block;font-family:var(--latin);font-style:italic;font-weight:600;font-size:16px;color:var(--peri-d)}
.tier h3{font-family:var(--serif);font-weight:900;font-size:24px;color:var(--ink);letter-spacing:.14em;margin:6px 0 10px;padding-bottom:10px;border-bottom:1.6px dotted var(--peri)}
html[data-lang=en] .tier h3{font-family:var(--latin);letter-spacing:.02em}
.gifts{text-align:left}
.gifts li{position:relative;padding-left:18px;font-size:16px;line-height:1.6;color:var(--ink2);margin-top:6px}
.gifts li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--peri);transform:rotate(45deg)}
.tier.top{background:linear-gradient(180deg,#fffbea,#fff)}
.tier.top .price{color:var(--rose-d)}
.note{font-size:16px;color:var(--ink2);margin-top:16px}

/* 魔法塔 */
.towers{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tower{padding:12px 12px 16px;text-align:center}
.tower img{border-radius:14px;aspect-ratio:1;object-fit:cover;width:100%}
.tower h3{font-family:var(--serif);font-weight:900;font-size:19px;margin-top:10px;letter-spacing:.1em;color:var(--ink)}
html[data-lang=en] .tower h3{font-family:var(--latin);letter-spacing:.02em}
.tower p{font-size:15.5px;color:var(--ink2);line-height:1.55;margin-top:4px}

/* 頁尾 */
.foot{position:relative;z-index:2;background:var(--ink);color:#e7ebfa;padding:58px 0 46px;font-size:16px}
.foot::before{content:"";position:absolute;left:0;right:0;top:-26px;height:40px;background:url(img/lace-f.svg) repeat-x center bottom/44px 40px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-title{font-family:var(--serif);font-weight:900;font-size:23px;color:#fff;letter-spacing:.14em;margin-bottom:4px}
.view{background:transparent;color:#fff;border-color:var(--peri-l);box-shadow:none}
.view:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}

@media (max-width:1040px){
  .menu{display:none}
  .tiers>.tier{width:calc((100% - 20px)/2)}
  .towers{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:1fr}
}

/* ===== 手機版：html.m（螢幕窄時自動加上；電腦按底部按鈕也能切換） ===== */
html.m.framed{background:#cfd8f0}
html.m.framed body{max-width:420px;margin:0 auto;box-shadow:0 0 40px rgba(40,50,100,.25);min-height:100vh}
html.m body{font-size:17.5px}
html.m .wrap{padding:0 16px}
html.m .bar-in{min-height:60px}
html.m .brand{font-size:21px}
html.m .brand img{width:38px;height:38px}
html.m .menu{display:none}
html.m .hero{min-height:0;padding:96px 14px 250px;background-image:url(img/hero-paint-m.webp)}
html.m .plate{padding:56px 16px 58px;border-radius:22px}
html.m .crown{width:110%;transform:translate(-50%,-60%)}
html.m .fl{width:42px;height:42px}
html.m .latin{font-size:19px;gap:8px}
html.m .latin::before,html.m .latin::after{width:22px}
html.m h1{font-size:58px}
html.m .lead{font-size:17.5px}
html.m .br{display:none}
html.m .pill,html.m .chip{font-size:16px;padding:7px 15px}
html.m .chip.big{font-size:18px;padding:11px 30px}
html.m .quick{gap:9px}
html.m .ribbon{font-size:14.5px;letter-spacing:.1em;padding:7px 16px 7px 20px}
html.m .ribbon::before,html.m .ribbon::after{width:34px}
html.m .ribbon::before{left:-20px}html.m .ribbon::after{right:-20px}
html.m .band{padding:62px 0 70px}
html.m .head h2{font-size:30px}
html.m .laurel{width:64px}
html.m .eng{font-size:18px}
html.m .head .sub{font-size:17.5px}
html.m .corner-art{width:88px;right:-10px;top:-46px}
html.m .playbox{padding:10px 10px 8px}
html.m .screen{aspect-ratio:3/4}
html.m .start{font-size:21px;padding:13px 32px 13px 28px}
html.m .pnote{font-size:15px;border-radius:16px}
html.m .acct{padding:34px 18px 30px}
html.m .letter{padding:22px 16px;font-size:17px}
html.m .claim-row{flex-wrap:wrap}
html.m .claim-row .field{flex:1 1 100%}
html.m .claim-row .amt{flex:1 1 auto}
html.m .coderow code{font-size:26px}
html.m .steps{grid-template-columns:1fr;gap:10px;margin-bottom:46px}
html.m .tiers>.tier{width:100%}
html.m .towers{grid-template-columns:1fr 1fr;gap:12px}
html.m .foot-in{flex-direction:column;align-items:flex-start}

/* ===== 2026-10-10 簡化：只有「感謝」與「試玩」兩個畫面 ===== */
body{background:#e3eafb url(img/hero-paint.webp) center bottom/cover no-repeat fixed;min-height:100vh;display:flex;flex-direction:column}
.stage{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:130px 20px 110px}
.pane{width:100%;display:flex;justify-content:center}
.views{display:flex;gap:8px}
.vtab{padding:6px 22px;border-radius:999px;font-weight:700;font-size:18.5px;color:var(--ink);border:1.5px solid var(--peri);background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.2px var(--peri-l)}
.vtab:hover{background:var(--sky)}
.vtab.on{background:var(--peri-d);border-color:var(--peri-d);color:#fff;box-shadow:inset 0 0 0 2.5px var(--peri-d),inset 0 0 0 3.7px rgba(255,255,255,.7)}
.thanks-card{width:min(720px,100%);padding:70px 48px 66px}
.thanks-card h1{font-size:clamp(50px,9vw,76px);margin-bottom:18px}
.thanks-card .letter{background:rgba(255,255,255,.75)}
.gate{margin-top:6px;padding-top:24px;border-top:1.6px dotted var(--peri)}
.acct{padding:0}
.acct .claim-t{margin-bottom:12px}
.hello{margin-bottom:10px}
.hello b{font-size:28px}
#acctIn .other{margin-top:18px}
#acctIn .mailbox{margin-top:6px}
.playbox{width:min(1100px,100%);padding:16px 16px 12px;background:rgba(255,255,255,.96)}
body[data-v=play] .stage{padding-top:48px}
.foot{padding:20px 0;background:rgba(70,87,155,.92)}
.foot::before{display:none}
.foot p{margin:0}
html.m body{background-image:url(img/hero-paint-m.webp);background-attachment:scroll}
html.m .stage{padding:96px 12px 80px}
html.m .thanks-card{padding:56px 16px 58px}
html.m .thanks-card h1{font-size:50px}
html.m .vtab{padding:4px 14px;font-size:16px}
html.m .brand small{display:none}
html.m body[data-v=play] .stage{padding-top:24px}

/* 贊助分頁 */
.sponsorbox{width:min(1120px,100%)}
.steps.five{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px;list-style:none;padding:0}
.steps.five li{padding:14px 16px;font-size:16px}
.kofi-note{text-align:center;margin:0 0 50px}
.tier .gifts{margin:4px 0 18px;padding:0;list-style:none}
.tier .chip{width:100%}
#sponsor .note{text-align:center}
@media (max-width:1040px){.steps.five{grid-template-columns:1fr}}
html.m .steps.five{grid-template-columns:1fr}
html.m body[data-v=sponsor] .stage{padding-top:60px}
html.m .views{gap:6px}
html.m .vtab{padding:5px 13px;font-size:16px;white-space:nowrap}
html.m .brand>span{display:none}

/* 宣傳影片（試玩分頁上方） */
.playcol{width:min(980px,100%);display:flex;flex-direction:column;gap:22px}
.playcol .playbox{width:100%}
.trailer{padding:10px}
.trailer video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000}
html.m .trailer{padding:6px}

/* ===== 2026-10-11 泛黃紙：整個網站是一張舊紙，金褐色墨水與細金線（取代長春花藍與花飾） ===== */
:root{
  --paper:#f1e3c2; --sky:#ead7ab; --white:#f7ecd2;
  --ink:#4e3415; --ink2:#6b4e2a; --body:#46301a;
  --peri:#b48a43; --peri-d:#8a6122; --peri-l:#dcc490;
  --butter:#f3e2b3; --daff-d:#8a5a12;
  --grain: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibres:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .34 0 0 0 0 .12 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body{background-color:#efdfba;background-image:
  radial-gradient(ellipse at 50% 40%,rgba(255,248,226,.55) 0%,rgba(255,248,226,0) 55%),
  radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 62%,rgba(120,78,24,.22) 100%),
  var(--fibres),var(--grain);
  background-size:auto,auto,600px 600px,220px 220px;background-attachment:fixed;background-position:center}
html.m body{background-image:radial-gradient(ellipse at 50% 30%,rgba(255,248,226,.5) 0%,rgba(255,248,226,0) 60%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 60%,rgba(120,78,24,.2) 100%),var(--fibres),var(--grain);background-attachment:scroll}
.crown,.fl,.latin,.ribbon{display:none!important}
.bar{background:rgba(239,223,186,.9);backdrop-filter:blur(3px);border-bottom:1px solid var(--peri)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--peri-l)}
.card{background:rgba(250,240,214,.42);border:1px solid var(--peri);border-radius:6px;box-shadow:inset 0 0 0 4px rgba(250,240,214,.3),inset 0 0 0 5px rgba(180,138,67,.45)}
.plate,.thanks-card{background:transparent;border:0;box-shadow:none}
.thanks-card h1{color:var(--ink);text-shadow:0 1px 0 rgba(255,250,230,.6)}
.thanks-card h1::after{content:"";display:block;width:140px;height:9px;margin:10px auto 0;background:linear-gradient(var(--peri),var(--peri)) center/100% 1px no-repeat,radial-gradient(circle,var(--peri) 0 3px,transparent 3.5px) center/9px 9px no-repeat}
.thanks-card .letter,.letter{background:transparent;border:0;box-shadow:none;color:var(--ink);font-size:21px;line-height:2.1}
.letter .sign{color:var(--peri-d)}
.gate{border-top:1px solid var(--peri-l)}
.claim-t::before,.claim-t::after{color:var(--peri)}
.pill,.chip,.vtab{background:rgba(250,240,214,.6);border-color:var(--peri);color:var(--ink);box-shadow:none;border-radius:999px}
.pill:hover,.chip:hover,.vtab:hover{background:rgba(234,215,171,.8);box-shadow:none}
.chip.gold,.vtab.on,.tab.on{background:var(--peri-d);border-color:var(--peri-d);color:#fbf1da;box-shadow:inset 0 0 0 2.5px var(--peri-d),inset 0 0 0 3.5px rgba(251,241,218,.55)}
.chip.gold:hover{background:#74511b}
.start{background:var(--peri-d);box-shadow:inset 0 0 0 3px var(--peri-d),inset 0 0 0 4.4px rgba(251,241,218,.6),0 8px 22px rgba(90,60,20,.3)}
.start:hover{background:#74511b}
.screen{background:#d9c69a}
.poster{background:radial-gradient(ellipse at 50% 45%,rgba(255,246,222,.75),rgba(214,190,140,.9)),var(--fibres),var(--grain)}
.pnote{background:rgba(250,240,214,.85);border-color:var(--peri-l);color:var(--ink2)}
.playbox{background:rgba(250,240,214,.42)}
.tier .price{color:var(--peri-d)}
.tier .price small{color:var(--ink2)}
.tier.top{background:rgba(243,226,179,.55)}
.tier.top .price{color:#7a3f1e}
.tier h3{border-bottom:1px dotted var(--peri)}
.gifts li::before{background:var(--peri)}
.steps b{border-color:var(--peri);box-shadow:none;color:var(--peri-d)}
.field{background:rgba(250,240,214,.7);border-color:var(--peri-l)}
.foot{background:rgba(78,52,21,.94)}
.foot,.foot a{color:#f1e3c2}
.view{border-color:rgba(241,227,194,.5)}

/* 試玩開場：一張泛黃的信紙貼上來 */
.prologue{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(46,30,12,.62);cursor:pointer;animation:pro-dim .7s ease both;transition:opacity .8s ease}
.prologue.out{opacity:0;pointer-events:none}
.prologue .sheet{position:relative;width:min(76%,560px);padding:clamp(26px,6%,54px) clamp(22px,7%,58px) clamp(22px,5%,44px);
  background-color:#ecd9ab;background-image:radial-gradient(ellipse at 50% 45%,rgba(255,247,222,.7),rgba(255,247,222,0) 70%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(122,80,24,.32) 100%),var(--fibres),var(--grain);background-size:auto,auto,600px 600px,220px 220px;
  color:#3e2a12;font-family:var(--kai);text-align:left;
  clip-path:polygon(0 1.5%,9% 0,23% 1.2%,41% .2%,58% 1.4%,77% .3%,92% 1.1%,100% 0,99.2% 22%,100% 47%,99.4% 71%,100% 98.6%,84% 100%,63% 98.9%,44% 100%,26% 99%,8% 100%,0 98.8%,.8% 74%,0 51%,.7% 27%);
  filter:drop-shadow(0 14px 24px rgba(30,18,6,.45));transform-origin:20% 0;animation:pro-paste 1.15s cubic-bezier(.2,.8,.25,1) .25s both}
.prologue .sheet::before,.prologue .sheet::after{content:"";position:absolute;top:-6px;width:86px;height:24px;background:rgba(246,238,214,.62);box-shadow:0 1px 2px rgba(60,40,10,.15)}
.prologue .sheet::before{left:12%;transform:rotate(-6deg)}
.prologue .sheet::after{right:12%;transform:rotate(5deg)}
.prologue p{font-size:clamp(17px,2.6vw,27px);line-height:2;letter-spacing:.06em;opacity:0;animation:pro-ink 1.4s ease forwards}
.prologue .l1{animation-delay:1.3s}
.prologue .l2{animation-delay:2.7s}
.prologue .sig{margin-top:.8em;text-align:right;font-size:clamp(15px,2.2vw,22px);color:#6b4a20;animation-delay:4.1s}
.prologue .skip{position:absolute;bottom:4%;left:0;right:0;text-align:center;font-size:14px;letter-spacing:.2em;color:rgba(241,227,194,.75);opacity:0;animation:pro-ink 1s ease 5s forwards}
@keyframes pro-dim{from{background:rgba(46,30,12,0)}}
@keyframes pro-paste{0%{opacity:0;transform:translate(-30%,-115%) rotate(-16deg) scale(1.08)}60%{opacity:1;transform:translate(1%,2%) rotate(2deg) scale(1)}80%{transform:translate(0,-.5%) rotate(-1.6deg)}100%{transform:rotate(-1deg)}}
@keyframes pro-ink{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
html.m .prologue .sheet{width:86%}
@media (prefers-reduced-motion:reduce){.prologue,.prologue .sheet,.prologue p,.prologue .skip{animation-duration:.01s;animation-delay:0s}}
/* 感謝頁：金黃色系 */
.thanks-card h1{background:linear-gradient(180deg,#c9962e 0%,#9a6a14 55%,#7a5210 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.thanks-card .letter{color:#5a3d12}
.thanks-card .letter .sign{color:#a3741f}
.thanks-card .claim-t,.thanks-card .gate .hint{color:#7a5416}

/* 影片分頁 */
.videobox{width:min(1100px,100%)}
.videobox .head{margin-bottom:22px}
body[data-v=video] .stage{padding-top:56px}
html.m body[data-v=video] .stage{padding-top:36px}

/* ===== 2026-10-11 v3：古樂譜紙（感謝／影片／試玩）＋押花樹脂（贊助） ===== */
/* 舊版（泛黃紙）留在 Backups\2026-10-11_網站泛黃紙版，可以還原 */
:root{
  --paper:#efe5cc; --sky:#e6dabd; --white:#f6efdc;
  --ink:#2e2015; --ink2:#5b4630; --body:#36281a;
  --peri:#8a6c46; --peri-d:#4a321c; --peri-l:#cbb68f;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --latin:"EB Garamond","Cormorant Garamond","Noto Serif TC",serif;
  --sheet:url(img/paper.webp);
}
body{font-family:var(--serif);font-weight:400;color:var(--body);background-color:#eee3c7;
  background-image:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(110,80,40,.07) 50%,rgba(255,252,240,.35) calc(50% + 1px),transparent calc(50% + 3px)),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 62%,rgba(120,84,36,.13) 100%),
    var(--sheet);
  background-size:auto,auto,512px 512px;background-attachment:fixed,fixed,scroll}
html.m body{background-image:radial-gradient(ellipse 130% 95% at 50% 40%,rgba(0,0,0,0) 62%,rgba(120,84,36,.12) 100%),var(--sheet);background-size:auto,384px 384px;background-attachment:scroll}
html[data-lang=en] body{font-family:var(--latin)}
.bar{background:rgba(238,228,200,.86);backdrop-filter:blur(4px);border-bottom:1px solid rgba(74,50,28,.55)}
.bar::after{background:rgba(74,50,28,.25);bottom:-4px}
.brand{font-family:var(--serif);font-weight:700;color:var(--ink)}
.brand small{font-family:var(--latin);color:var(--ink2)}
/* 五線譜裝飾：只在標題下，不在內文後面 */
.head h2,.thanks-card h1{position:relative}
.head h2::after,.thanks-card h1::after{content:"𝄞";display:block;width:220px;height:30px;margin:12px auto 0;padding-left:6px;text-align:left;
  font:30px/30px "Noto Music",serif;color:rgba(46,32,21,.62);
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(46,32,21,.42) 5px 6px) left 3px/100% 25px no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.head h2{display:block;font-weight:700;color:var(--ink);letter-spacing:.16em}
.thanks-card h1{background:linear-gradient(180deg,#a8812f 0%,#7d5718 60%,#5a3c10 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.24em}
.thanks-card h1::after{-webkit-text-fill-color:rgba(46,32,21,.62)}
.thanks-card .letter{color:var(--body);font-size:20px;line-height:2.15}
.thanks-card .letter .sign{color:var(--ink2);font-style:italic}
.thanks-card .claim-t,.thanks-card .gate .hint{color:var(--ink2)}
.claim-t{font-weight:700}.claim-t::before,.claim-t::after{content:"·";color:var(--peri)}
.gate{border-top:0;position:relative}
.gate::before{content:"";position:absolute;left:18%;right:18%;top:0;height:4px;border-top:1px solid rgba(46,32,21,.5);border-bottom:1px solid rgba(46,32,21,.22)}
/* 版畫式雙線框 */
.card{background:transparent;border:1px solid rgba(46,32,21,.6);border-radius:2px;box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(46,32,21,.22)}
.card::before{content:"";position:absolute;inset:3px;border:1px solid rgba(46,32,21,.22);pointer-events:none}
.playbox,.trailer{background:rgba(246,239,220,.35)}
.screen{background:#d8c9a6;border-radius:1px}
.poster{background:radial-gradient(ellipse at 50% 45%,rgba(246,239,220,.6),rgba(205,184,140,.75)),var(--sheet);background-size:auto,512px 512px}
.pill,.chip,.vtab,.tab{background:rgba(246,239,220,.55);border:1px solid rgba(46,32,21,.55);color:var(--ink);box-shadow:none;font-weight:500}
.pill:hover,.chip:hover,.vtab:hover{background:rgba(230,218,189,.85);box-shadow:none}
.chip.gold,.vtab.on,.tab.on,.start{background:#3a2818;border-color:#3a2818;color:#f3e9d2;box-shadow:inset 0 0 0 2px #3a2818,inset 0 0 0 3px rgba(243,233,210,.45)}
.chip.gold:hover,.start:hover{background:#2a1c10}
.pnote{background:rgba(246,239,220,.88);border-color:rgba(46,32,21,.3);color:var(--ink2);border-radius:2px}
.keys{color:var(--ink2)}
.foot{background:#2a1d12}
.foot,.foot a{color:#eadfc4}
/* 開場信紙：同一張古紙 */
.prologue .sheet{background-color:#ecdfbf;background-image:radial-gradient(ellipse at 50% 45%,rgba(250,244,226,.5),rgba(250,244,226,0) 70%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 52%,rgba(122,82,30,.34) 100%),var(--sheet);background-size:auto,auto,512px 512px;font-family:var(--serif);color:#2e2015}
.prologue p{font-weight:500}
.prologue .sig{color:#5b4630;font-style:italic}

/* ===== 贊助分頁：跟遊戲一樣的押花樹脂童話風（不用泛黃紙） ===== */
body[data-v=sponsor]{background:#f8f5f4;background-image:radial-gradient(ellipse at 15% 10%,rgba(246,222,232,.55),transparent 45%),radial-gradient(ellipse at 85% 30%,rgba(214,234,246,.5),transparent 45%),radial-gradient(ellipse at 30% 85%,rgba(226,240,214,.5),transparent 45%),radial-gradient(ellipse at 80% 90%,rgba(228,222,244,.5),transparent 45%);background-attachment:fixed;font-family:var(--serif);color:#2b2531}
body[data-v=sponsor] .bar{background:rgba(250,248,248,.82);border-bottom:1px solid rgba(255,255,255,.95);box-shadow:0 4px 14px rgba(64,48,72,.06)}
body[data-v=sponsor] .bar::after{display:none}
body[data-v=sponsor] .brand,body[data-v=sponsor] .brand small{color:#2b2531}
body[data-v=sponsor] .vtab,body[data-v=sponsor] .pill{background:rgba(255,255,255,.9);border:1.5px solid #fff;color:#2b2531;font-weight:700;box-shadow:0 2px 8px rgba(64,48,72,.10)}
body[data-v=sponsor] .vtab.on{background:#fff;border:2px solid #b07d14;color:#2b2531;box-shadow:0 2px 8px rgba(64,48,72,.10)}
body[data-v=sponsor] .foot{background:rgba(43,37,49,.92)}
.sponsorbox{position:relative;padding:24px 20px 30px}
.floral>.vine{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}
.sponsorbox>*:not(.vine){position:relative;z-index:1}
#sponsor .head h2{color:#2b2531;letter-spacing:.14em}
#sponsor .head h2::after{content:"";width:120px;height:10px;margin-top:12px;background:radial-gradient(circle,#c9982c 0 2px,transparent 2.5px) center/10px 10px no-repeat,linear-gradient(90deg,transparent,#c9982c 30%,#c9982c 70%,transparent) center/100% 1px no-repeat;-webkit-mask:none;mask:none;font-size:0;padding:0}
#sponsor .head .sub,#sponsor .note{color:#4a4352}
/* 樹脂面板：一側約 86% 的色調漸淡到幾乎透明、白色亮邊＋淡淡第二道邊、柔和陰影 */
#sponsor .card{--t:255,255,255;background:linear-gradient(100deg,rgba(var(--t),.86) 0%,rgba(var(--t),.42) 55%,rgba(var(--t),.14) 100%),rgba(255,255,255,.5);
  border:1.5px solid rgba(255,255,255,.96);border-radius:22px;box-shadow:0 8px 22px rgba(64,48,72,.10),0 1px 3px rgba(64,48,72,.06);backdrop-filter:blur(6px)}
#sponsor .card::before{inset:3px;border:1px solid rgba(255,255,255,.4);border-radius:19px}
#sponsor .card::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(ellipse 5px 3px at 88% 14%,rgba(214,170,70,.9),transparent 70%),radial-gradient(ellipse 3px 2px at 91% 19%,rgba(236,200,110,.85),transparent 70%),radial-gradient(ellipse 4px 3px at 9% 86%,rgba(214,170,70,.8),transparent 70%)}
#sponsor .steps b{border:1.5px solid #fff;background:rgba(255,255,255,.85);color:#b07d14;box-shadow:0 2px 6px rgba(64,48,72,.08)}
#sponsor .steps li{color:#2b2531;font-weight:700}
#sponsor .tier{color:#2b2531}
#sponsor .tier h3{color:#2b2531;font-weight:900;border-bottom:1px solid rgba(255,255,255,.95);letter-spacing:.14em}
#sponsor .tier .price{color:#b07d14;font-family:var(--serif);font-weight:900}
#sponsor .tier .price small{color:#6a6273;font-family:var(--latin);font-style:italic}
#sponsor .gifts li{color:#3a3442}
#sponsor .gifts li::before{width:7px;height:7px;transform:none;border-radius:50% 0;background:#9bbf86}
#sponsor .tier .chip,#sponsor .tier .chip.gold{background:rgba(255,255,255,.94);border:2px solid #b07d14;color:#2b2531;font-weight:900;box-shadow:0 3px 10px rgba(64,48,72,.12)}
#sponsor .tier .chip:hover{background:#fff}
#sponsor .tier:nth-child(1){--t:255,255,255}
#sponsor .tier:nth-child(2){--t:246,222,232}
#sponsor .tier:nth-child(3){--t:214,234,246}
#sponsor .tier:nth-child(4){--t:226,240,214}
#sponsor .tier:nth-child(5){--t:228,222,244}
#sponsor .tier:nth-child(6){--t:246,230,190}
#sponsor .tier:nth-child(7){--t:240,206,150}
#sponsor .tier:nth-child(6),#sponsor .tier:nth-child(7){border-color:rgba(232,200,120,.95)}
#sponsor .tier:nth-child(7) .price{color:#8a5a10}
#sponsor .tier.top{background:linear-gradient(100deg,rgba(240,206,150,.9) 0%,rgba(246,226,186,.5) 55%,rgba(255,246,226,.2) 100%),rgba(255,255,255,.55)}
/* v3 修正：紙紋要鋪滿；贊助分頁的樹脂背景在手機版也要蓋過紙 */
body{background-repeat:no-repeat,no-repeat,repeat;background-position:center,center,0 0}
html.m body{background-repeat:no-repeat,repeat;background-position:center,0 0}
html body[data-v=sponsor],html.m body[data-v=sponsor]{background-color:#f8f5f4;background-image:radial-gradient(ellipse at 15% 10%,rgba(246,222,232,.55),transparent 45%),radial-gradient(ellipse at 85% 30%,rgba(214,234,246,.5),transparent 45%),radial-gradient(ellipse at 30% 85%,rgba(226,240,214,.5),transparent 45%),radial-gradient(ellipse at 80% 90%,rgba(228,222,244,.5),transparent 45%);background-size:auto;background-repeat:no-repeat;background-attachment:fixed}
/* 手機：四個分頁＋EN 要排得下 */
html.m .brand{display:none}
html.m .bar-in{justify-content:center;gap:4px}
html.m .views{gap:4px}
html.m .vtab{padding:4px 11px;font-size:15px}
html.m .lang{margin-left:2px;padding:4px 10px;font-size:13px}
/* 押花放在標題上方的空白，不壓到「贊助方案」 */
.sponsorbox{padding-top:150px}
html.m .sponsorbox{padding-top:120px}
body[data-v=sponsor] .stage{padding-top:20px}

/* 聯絡表單與領取謝禮 */
.contact{margin:40px auto 0;max-width:640px;padding:28px 26px;text-align:center}
.contact form{text-align:left;margin-top:12px}
.contact label{display:block;font-weight:700;font-size:16px;margin-top:12px;color:#2b2531}
.contact textarea.field{border-radius:16px;resize:vertical;min-height:110px}
.contact button{display:flex;margin:18px auto 0}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact a{color:#b07d14;text-decoration:underline}
.giftbox{margin:0 0 22px;padding:18px 16px;text-align:center;border-top:1px solid rgba(46,32,21,.3);border-bottom:1px solid rgba(46,32,21,.3)}
.giftbox .rewards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.giftbox .rewards li{font-size:16px;padding:3px 14px;border:1px solid rgba(46,32,21,.35);border-radius:999px;background:rgba(246,239,220,.6)}
.giftbox b{letter-spacing:.12em;color:#7d5718}