/* 布局思路：固定 1280×720 的横屏"手帐桌面"，整体缩放适配屏幕；竖屏手机自动旋转 90° */
:root{
  color-scheme: light;
  --paper:#ece4d6;
  --ink:#3a312a;
  --ink-soft:#8a7d6e;
  --kraft:#b08a66;
  --berry:#c9184a;
  --denim:#4b6c9c;
  --gold:#e8b53a;
  --night:#2c2630;
  --hand:"Long Cang","KaiTi","STKaiti","Kaiti SC",cursive;
  --brush:"Ma Shan Zheng","KaiTi","STKaiti",cursive;
  --scribble:"Zhi Mang Xing","Long Cang","KaiTi",cursive;
  --serif:"Playfair Display",Georgia,serif;
  --block:"Archivo Black","Arial Black",Impact,sans-serif;
  --latin:"Caveat","Segoe Print",cursive;
  --ui:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#17141a}
body{font-family:var(--hand);color:var(--ink);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:3px solid var(--denim);outline-offset:3px}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none;display:block}

#stage{position:fixed;left:50%;top:50%;width:1280px;height:720px;overflow:hidden;transform-origin:center;
  background-color:var(--paper);cursor:pointer}
.paper{background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='2.2' lighting-color='%23efe8dc'%3E%3CfeDistantLight azimuth='60' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size:420px 420px}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s .7s;overflow:hidden}
.scene.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .7s ease}
.abs{position:absolute}
.title{position:absolute;left:36px;top:26px;font-size:34px;letter-spacing:2px;z-index:5}
.hint{position:absolute;font-size:30px;letter-spacing:1px;transition:opacity .4s;white-space:nowrap}
.fade{opacity:0;transition:opacity .6s ease}
.fade.in{opacity:1}
.pop{transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .3s}
.pop.in{transform:scale(1);opacity:1}
.sticker{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 5px 6px rgba(40,30,20,.3))}
.shadow{filter:drop-shadow(0 6px 8px rgba(40,30,20,.3))}
.move{transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1),width .7s,opacity .5s}
.dragging{transition:none !important;z-index:20}

/* 常驻元素 */
#bunting{position:absolute;right:0;top:0;width:300px;height:44px;z-index:30;pointer-events:none}
#next{position:absolute;right:26px;bottom:22px;z-index:45;font-size:27px;padding:7px 16px 7px 20px;background:#faf6ee;color:var(--ink);
  box-shadow:0 3px 8px rgba(40,30,20,.28);transform:translateY(16px) rotate(-1deg);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;white-space:nowrap}
#next i{font-style:normal;color:var(--berry);margin-left:6px}
#next.show{opacity:1;transform:rotate(-1deg);pointer-events:auto}
#next.show:hover{transform:rotate(-1deg) translateX(3px)}
#mute{position:absolute;left:14px;bottom:14px;z-index:50;width:36px;height:36px;border-radius:50%;background:rgba(40,32,28,.5);color:#fff;font:15px var(--ui);opacity:.75}
#dots{position:absolute;left:60px;bottom:27px;z-index:50;display:flex;gap:7px;opacity:.6}
#dots button{width:9px;height:9px;border-radius:50%;background:rgba(40,32,28,.22);border:1px solid rgba(255,255,255,.5)}
#dots button.on{background:var(--berry)}
#fx{position:absolute;inset:0;width:1280px;height:720px;pointer-events:none;z-index:40}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:42}
#flash.go{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
@keyframes bob{50%{transform:translateY(-7px)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.92,1.08) rotate(3deg)}}

/* ---------- 1 拆礼物 ---------- */
#s1{z-index:20;background:none}
.half{position:absolute;inset:0;filter:drop-shadow(0 0 8px rgba(30,18,8,.45));transition:transform 1.2s cubic-bezier(.55,.05,.3,1),opacity .5s ease .8s}
.half .rip,.half .face{position:absolute;inset:0}
.half .rip{background:#f1ead9}
.face{background-color:var(--kraft);
  background-image:repeating-linear-gradient(0deg,rgba(60,35,15,.10) 0 1px,transparent 1px 5px),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .06 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")}
.label{position:absolute;left:430px;top:60px;width:440px;height:590px;background:#f7f3ea;transform:rotate(5deg);
  box-shadow:0 8px 22px rgba(30,18,8,.4);padding:26px 34px;font-family:var(--ui);color:#2a2522}
.label::before{content:"";position:absolute;left:-7px;top:0;bottom:0;width:14px;background:radial-gradient(circle,var(--kraft) 5px,transparent 5.5px) 0 0/14px 20px}
.label .row{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid #2a2522;padding-bottom:4px;margin-bottom:8px}
.label .hbd{font:700 18px var(--ui);color:var(--berry)}
.label .en{font:54px/0.95 var(--block);letter-spacing:1px;margin-top:38px;transform:scaleY(1.05)}
.label .cn{font:92px/1.02 var(--brush);margin-top:8px;letter-spacing:4px}
.label .foot{position:absolute;left:34px;right:34px;bottom:30px;display:grid;grid-template-columns:110px 1fr;gap:6px 14px;font-size:12px;align-items:end}
.label .date{font:700 24px var(--ui);border-bottom:1px solid #2a2522}
.label .seal{width:100px;height:100px;border:3px solid var(--berry);border-radius:50%;color:var(--berry);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:700 10px var(--ui);letter-spacing:1px;transform:rotate(-14deg);box-shadow:inset 0 0 0 4px #f7f3ea,inset 0 0 0 5px var(--berry)}
.label .seal b{font:700 24px var(--ui);background:var(--berry);color:#f7f3ea;padding:0 6px;margin:3px 0}
.twine{position:absolute;inset:0;width:1280px;height:720px}
#s1 .hint{left:70px;bottom:44px;font-size:34px;color:#fff8ea;text-shadow:0 2px 5px rgba(50,25,5,.7);animation:bob 1.6s ease-in-out infinite;z-index:3}
#s1.open .left{transform:translateX(-720px) rotate(-8deg);opacity:0}
#s1.open .right{transform:translateX(720px) rotate(8deg);opacity:0}
#s1.open .hint{opacity:0}

/* ---------- 2 许愿吹蜡烛 ---------- */
.hbletters{position:absolute;left:330px;top:44px;width:260px;text-align:center;line-height:34px}
.hbletters span{display:inline-block;font:700 27px var(--block);padding:0 5px;margin:0 1px}
.age{position:absolute;left:150px;top:120px;width:640px;text-align:center;font:330px/1 var(--block);letter-spacing:90px;text-indent:90px;color:var(--denim);
  background:repeating-linear-gradient(48deg,#5477a8 0 3px,#44669a 3px 6px);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 4px 0 rgba(40,50,80,.25))}
.hero{position:absolute;left:300px;top:205px;width:330px}
#s2 .hat{position:absolute;left:402px;top:86px;width:118px;transform:rotate(-8deg)}
#s2 .cake{position:absolute;left:328px;top:432px;width:270px}
.candles{position:absolute;left:398px;top:414px;width:130px;height:90px}
.candle{position:absolute;bottom:0;width:9px;border-radius:3px}
.flame{position:absolute;left:50%;bottom:100%;width:16px;height:26px;margin-left:-8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 75%,#fff7c8 0 22%,#ffd24a 45%,#ff8a2a 80%);box-shadow:0 0 16px 5px rgba(255,190,70,.55);transform-origin:50% 100%;animation:flick .5s ease-in-out infinite;transition:opacity .35s,transform .35s}
.out .flame{opacity:0;transform:scale(.2) translateX(30px) skewX(-40deg);animation:none}
.smoke{position:absolute;left:50%;bottom:100%;width:6px;height:40px;margin-left:-3px;background:linear-gradient(transparent,rgba(120,120,120,.5));border-radius:50%;opacity:0;filter:blur(2px)}
.out .smoke{animation:smoke 1.6s ease-out forwards}
@keyframes smoke{0%{opacity:.8;transform:translateY(0) scaleX(1)}100%{opacity:0;transform:translateY(-50px) scaleX(3)}}
.say{position:absolute;left:740px;top:290px;width:520px}
.say .l1{font-size:46px;line-height:1.5;letter-spacing:3px}
.say .l2{font-size:28px;color:var(--ink-soft);margin-top:10px;letter-spacing:2px}
.lid{position:absolute;left:-200px;width:1680px;height:560px;background:#0c0808;z-index:10;transition:transform .9s cubic-bezier(.5,0,.3,1);pointer-events:none}
.lid.t{top:-560px;border-radius:0 0 50% 50%/0 0 26% 26%}
.lid.b{bottom:-560px;border-radius:50% 50% 0 0/26% 26% 0 0}
.shut .lid.t{transform:translateY(470px)}
.shut .lid.b{transform:translateY(-470px)}

/* ---------- 3 拍立得 + 装扮 ---------- */
#cam{position:absolute;left:820px;top:-40px;width:430px;transform:rotate(9deg);z-index:6;transition:opacity .6s,transform .15s}
#cam.press{transform:rotate(9deg) scale(.97)}
#camhit{position:absolute;left:840px;top:0;width:400px;height:430px;z-index:7;border-radius:40px}
#camhit::after{content:"";position:absolute;left:176px;top:210px;width:120px;height:120px;border-radius:50%;border:3px dashed #fff;opacity:.9;animation:spin 7s linear infinite;box-shadow:0 0 0 2px rgba(60,40,30,.25)}
#camhit.used{pointer-events:none}
#camhit.used::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
#pola{position:absolute;left:880px;top:300px;width:300px;height:352px;background:#fbf9f3;box-shadow:0 8px 20px rgba(40,30,20,.3);z-index:5;
  transform:scale(.35) rotate(9deg);opacity:0;transition:left 1.5s cubic-bezier(.3,.6,.3,1),top 1.5s cubic-bezier(.3,.6,.3,1),transform 1.5s cubic-bezier(.3,.6,.3,1),opacity .3s}
#pola.out{left:250px;top:170px;transform:scale(1) rotate(-3deg);opacity:1}
#pola.drop{transition:transform .9s ease-in,opacity .9s;transform:translateY(520px) rotate(-24deg);opacity:0}
.pphoto{position:absolute;left:18px;top:18px;width:264px;height:250px;overflow:hidden;background:radial-gradient(circle at 40% 30%,#dfe3da,#aeb7ae)}
.pphoto img{position:absolute}
.pphoto::after{content:"";position:absolute;inset:0;background:#2b2927;transition:opacity 3.2s ease .9s}
#pola.dev .pphoto::after{opacity:0}
.acc{position:absolute;z-index:8;cursor:grab;touch-action:none}
.acc img{width:100%}
#tray{position:absolute;left:700px;top:486px;width:540px;z-index:6}
#tray .hint{position:static;display:block;margin-bottom:14px}
.cutline{position:absolute;left:14px;top:-110px;width:270px;height:400px;z-index:9;pointer-events:none;opacity:0;transition:opacity .5s}
.cutline.in{opacity:1}
.cutline path{fill:none;stroke:#2a2522;stroke-width:2.5;stroke-dasharray:9 7;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.scis{position:absolute;font-size:34px;z-index:10;left:0;top:0;offset-rotate:auto;animation:snipmove 4s linear infinite}
.headpiece{position:absolute;width:200px;height:220px;z-index:12}
.hclip{position:absolute;inset:0;clip-path:path('M100 2 C168 0 200 52 198 116 C196 176 154 218 100 218 C46 218 4 176 2 114 C0 50 34 2 100 2Z');overflow:hidden}
.hclip img{position:absolute}
.headpiece .acc{cursor:default}
.stick{position:absolute;left:97px;top:205px;width:5px;height:120px;background:linear-gradient(90deg,#e9cf9a,#c9a769);border-radius:2px;z-index:-1}

/* ---------- 4 蛋糕 + 干杯 ---------- */
#s4 .cake{position:absolute;left:150px;top:250px;width:440px;z-index:6}
#dark4{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(circle at 370px 330px,rgba(44,38,48,0) 0,rgba(44,38,48,.15) 190px,rgba(44,38,48,.96) 360px)}
#dark4.in{opacity:1}
.beer{position:absolute;top:740px;width:170px;z-index:16;transition:top .9s cubic-bezier(.3,1.2,.4,1),transform .5s cubic-bezier(.3,1.6,.5,1);touch-action:none}
#beerL{left:250px;transform:rotate(-4deg)}
#beerR{left:440px;transform:rotate(4deg)}
.beer.peek{top:560px}
.beer.up{top:400px}
#beerL.clink{transform:rotate(16deg) translateX(28px)}
#beerR.clink{transform:rotate(-16deg) translateX(-28px)}
.cheers{position:absolute;left:720px;top:210px;z-index:17;color:#fff}
.cheers .a{font:54px var(--serif);letter-spacing:1px}
.cheers .b{font-size:60px;color:var(--gold);margin:26px 0 0 40px;letter-spacing:6px}
#s4 .hint{z-index:18}

/* ---------- 5 胶卷 ---------- */
#can{position:absolute;left:50px;top:118px;width:250px;height:360px;z-index:6}
#filmclip{position:absolute;left:268px;top:150px;width:1012px;height:500px;overflow:hidden;z-index:5;touch-action:none}
#strip{position:absolute;left:0;top:0;height:500px;display:flex;transition:transform .9s cubic-bezier(.3,.8,.3,1)}
.fr{position:relative;width:330px;height:500px;flex:none}
.fr .band{position:absolute;left:0;right:0;top:20px;height:268px;background:#3b3a3c;
  background-image:
   linear-gradient(90deg,#3b3a3c 0 8px,transparent 8px 22px,#3b3a3c 22px 30px),linear-gradient(#ece4d6,#ece4d6),
   linear-gradient(90deg,#3b3a3c 0 8px,transparent 8px 22px,#3b3a3c 22px 30px),linear-gradient(#ece4d6,#ece4d6);
  background-size:30px 16px,100% 16px,30px 16px,100% 16px;background-position:0 8px,0 8px,0 244px,0 244px;background-repeat:repeat-x,no-repeat,repeat-x,no-repeat}
.fr .ph{position:absolute;left:20px;top:54px;width:290px;height:200px;background:#1b1a1c center/cover;border-radius:3px;overflow:hidden}
.fr .ph.q{background:#f3eee2;display:flex;align-items:center;justify-content:center;font:80px var(--latin);color:#c9bda9}
.fr .cap{position:absolute;left:22px;right:14px;top:306px}
.fr .cap small{display:block;font:13px var(--ui);color:var(--ink-soft);letter-spacing:1px;margin-bottom:8px}
.fr .cap p{font-size:27px;line-height:1.5;letter-spacing:1px}
.fr.leader{width:340px}
.fr.leader .band{clip-path:polygon(0 0,100% 0,100% 38%,97% 44%,62% 50%,52% 62%,50% 100%,0 100%)}
#s5 .hint{left:720px;top:560px}

/* ---------- 6 地图 ---------- */
#mapwrap{position:absolute;inset:0;transition:filter .9s,transform 1.4s ease}
#mapwrap.blur{filter:blur(9px) brightness(.8)}
#mapimg{position:absolute;inset:0;width:1280px;height:720px}
#mapsvg{position:absolute;inset:0;width:1280px;height:720px;overflow:visible}
.city{position:absolute;font-size:26px;color:#fff;text-shadow:0 1px 4px rgba(0,30,40,.9);white-space:nowrap;letter-spacing:2px}
.city small{font-size:20px;opacity:.85;margin-right:6px}
#plane{position:absolute;width:120px;left:0;top:0;z-index:4;will-change:transform;filter:drop-shadow(0 6px 5px rgba(0,20,30,.45))}
#mapcard{position:absolute;left:310px;top:150px;width:660px;height:420px;z-index:8;display:flex;align-items:center;justify-content:center}
#mapcard .glass{background:rgba(236,228,214,.8);backdrop-filter:blur(6px);padding:34px 60px;border-radius:14px;font-size:54px;line-height:1.5;text-align:center;letter-spacing:4px;box-shadow:0 10px 30px rgba(0,20,30,.3)}
#s6 .hint{left:0;right:0;bottom:22px;text-align:center;color:#fff;text-shadow:0 2px 5px rgba(0,30,40,.9);z-index:9}
.board{position:absolute;left:330px;top:120px;width:640px;height:440px;z-index:10;border:7px solid #e9dcb8;border-radius:6px;box-shadow:0 14px 40px rgba(0,20,30,.5),inset 0 0 0 1px #c9b98f}
.board::before{content:"";position:absolute;left:50%;top:-16px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a8a,#c9182c 60%,#7c0d1a);box-shadow:0 4px 5px rgba(0,0,0,.35)}
.board .where{position:absolute;left:20px;top:14px;font:14px var(--ui);color:var(--ink-soft);letter-spacing:2px}
.board .line{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:27px;letter-spacing:2px}
.pol{position:absolute;background:#fbf9f3;padding:10px 10px 34px;box-shadow:0 6px 14px rgba(40,30,20,.35)}
.pol div{width:100%;height:100%;background:#ccc center/cover}
#pass{position:absolute;left:330px;top:220px;width:620px;height:270px;z-index:11;display:flex;filter:drop-shadow(0 12px 22px rgba(0,20,30,.5))}
#pass.stub{left:1010px;top:330px;transform:rotate(-7deg) scale(.82)}
#pass.stub .main{opacity:0;width:0;padding:0;border:0}
.pass-main,.pass-stub{background:#f3ead2;border-radius:14px;overflow:hidden;position:relative}
.pass-main{width:420px;transition:opacity .4s,width .5s;border-right:2px dashed #c9b98f}
.pass-stub{width:200px}
.pass-head{background:#1f5f9b;color:#fff;font:700 15px var(--ui);letter-spacing:3px;padding:10px 18px;display:flex;justify-content:space-between}
.pass-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px 16px;padding:16px 20px}
.pass-grid label{display:block;font:10px var(--ui);letter-spacing:2px;color:#1f5f9b;margin-bottom:2px}
.pass-grid b{font:400 27px var(--hand);white-space:nowrap}
.pass-grid .wide{grid-column:1/-1}
.pass-stub svg{width:120px;margin:22px auto 4px;display:block}
.pass-stub p{text-align:center;font:11px var(--ui);color:#1f5f9b;letter-spacing:2px}
.pass-stub b{display:block;text-align:center;font:400 24px var(--hand)}
#bigheart{position:absolute;left:300px;top:90px;width:520px;height:480px;z-index:9;pointer-events:none}
#bigheart svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(255,70,80,.9))}
#bigheart .txt{position:absolute;left:0;right:0;top:150px;text-align:center;color:#fff;font-size:56px;line-height:1.45;letter-spacing:5px;text-shadow:0 2px 8px rgba(80,0,10,.6)}
#mapdim{position:absolute;inset:0;background:rgba(10,30,36,.45);opacity:0;transition:opacity 1s;pointer-events:none;z-index:5}
#mapdim.in{opacity:1}
#km{position:absolute;left:200px;right:0;bottom:30px;font-size:27px;color:#fff;text-shadow:0 2px 5px rgba(0,30,40,.9);z-index:9;letter-spacing:1px}

/* ---------- 7 刮刮乐 ---------- */
#ticket{position:absolute;left:420px;top:26px;width:470px;height:668px;background:#111;padding:9px;transform:rotate(-1.6deg);box-shadow:0 10px 26px rgba(40,30,20,.35)}
#ticket .in{position:relative;width:100%;height:100%;background:var(--berry);color:#fff;padding:16px 20px;outline:2px dashed #111;outline-offset:-5px}
#ticket .tiny{display:flex;justify-content:space-between;font:9px var(--ui);letter-spacing:1px;opacity:.85}
#ticket .arc{text-align:center;font:11px var(--ui);letter-spacing:3px;margin-top:14px;opacity:.9}
#ticket h2{font:400 84px/0.86 "Archivo","Helvetica Neue",Arial,sans-serif;letter-spacing:-5px;text-align:center;margin-top:10px;position:relative}
#ticket h2 em{position:absolute;left:50%;top:50%;transform:translate(22%,-10%) rotate(-7deg);font:700 9px var(--ui);letter-spacing:1px;background:#3d3b40;color:#fff;padding:2px 6px;white-space:nowrap}
#ticket .sub{text-align:center;font:11px var(--ui);letter-spacing:2px;margin:12px 0 6px;opacity:.9;text-decoration:underline}
#ticket .fine{font:7px/1.5 var(--ui);letter-spacing:.5px;text-align:center;opacity:.8;margin-bottom:10px}
#cells{display:flex;gap:9px;height:308px}
.cell{position:relative;flex:1;background:#f6f4ee;color:var(--berry);
  background-image:linear-gradient(rgba(60,60,70,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(60,60,70,.13) 1px,transparent 1px);background-size:13px 13px;
  padding:118px 9px 0;font:700 21px/1.25 var(--ui)}
.cell small{display:block;font:700 9px var(--ui);color:#3d3b40;margin-bottom:5px;letter-spacing:.5px}
.cell canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .5s}
.cell.done canvas{opacity:0;pointer-events:none}
#win{position:absolute;left:50%;top:66%;z-index:5;white-space:nowrap;background:#151515;color:#fff;padding:12px 44px 14px;text-align:center;
  font:700 50px var(--ui);letter-spacing:3px;box-shadow:0 10px 24px rgba(0,0,0,.4);
  transform:translate(-50%,-50%) rotate(-7deg) scale(2.4);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s}
#win small{display:block;font:700 17px var(--ui);letter-spacing:2px;margin-top:6px}
#win.show{transform:translate(-50%,-50%) rotate(-7deg) scale(1);opacity:1}
#s7 .hint{left:916px;top:330px;font-size:27px}

/* ---------- 8 老虎机 ---------- */
#slot{position:absolute;left:200px;top:8px;width:360px;height:712px}
.reel{position:absolute;top:299px;width:62px;height:132px;overflow:hidden;background:#fffaf2;border-radius:4px;box-shadow:inset 0 6px 8px rgba(120,40,50,.25),inset 0 -6px 8px rgba(120,40,50,.25)}
.reel .rs{position:absolute;left:0;top:0;width:62px}
.reel svg{display:block;width:62px;height:44px}
#lever{position:absolute;left:522px;top:250px;width:60px;height:260px;z-index:6;touch-action:none}
#lever .rod{position:absolute;left:14px;bottom:20px;width:9px;height:190px;background:linear-gradient(90deg,#d8d8de,#9a9aa6);border-radius:5px;transform-origin:50% 100%;transition:height .22s ease-out}
#lever .ball{position:absolute;left:-12px;top:-30px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8f8f,#e21f2f 55%,#8e0f1c)}
#lever.pull .rod{height:62px}
#lever .base{position:absolute;left:0;bottom:0;width:36px;height:60px;background:#e98a9a;border-radius:0 12px 12px 0;box-shadow:inset -4px 0 0 rgba(120,40,50,.2)}
.coupon{position:absolute;width:200px;height:96px;background:#fff5f6;border:2px solid #e77f95;border-radius:5px;display:flex;z-index:5;box-shadow:0 5px 10px rgba(40,30,20,.2);
  transform:translate(-240px,40px) scale(.2) rotate(-30deg);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.coupon.in{opacity:1}
.coupon .m{flex:1;padding:8px 10px}
.coupon .m i{font:normal 8px var(--ui);letter-spacing:2px;color:#d2476a;display:block}
.coupon .m b{font:400 28px var(--hand);color:#c9184a;display:block;line-height:1.2;white-space:nowrap}
.coupon .m span{font:10px/1.35 var(--ui);color:#8a5a66;display:block}
.coupon .s{width:36px;background:#f6b9c6;border-left:2px dashed #e77f95;font:8px var(--ui);color:#a02848;writing-mode:vertical-rl;text-align:center;padding:4px 10px 4px 0;letter-spacing:1px}
.coupon.y{background:#fffbe2;border-color:#d9bd4a}
.coupon.y .s{background:#f4e394;border-color:#d9bd4a;color:#7c6510}
.coupon.y .m i,.coupon.y .m b{color:#9a7a10}
#paid{position:absolute;left:890px;top:120px;width:120px;height:120px;border-radius:50%;border:4px solid var(--berry);color:var(--berry);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:700 26px var(--ui);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 7px var(--berry);z-index:6;
  transform:rotate(-12deg) scale(2.6);opacity:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .15s}
#paid small{font:700 13px var(--ui);margin-top:2px}
#paid.in{transform:rotate(-12deg) scale(1);opacity:.9}
#s8 .say{left:670px;top:450px;width:600px}
#s8 .say .l1{font-size:42px}

/* ---------- 9 童年合影 ---------- */
#s9{background:#fbfaf7}
.kid{position:absolute;top:96px;height:340px;z-index:5;touch-action:none}
.kid img{height:100%}
#kidA{left:150px}#kidB{left:760px}
.kcap{position:absolute;top:462px;font-size:28px;letter-spacing:2px;transition:opacity .4s}
#s9 .t2{position:absolute;left:470px;top:28px;font-size:32px;letter-spacing:2px;transition:opacity .4s}
.doodle{position:absolute;z-index:6}
.doodle.txt{font:600 30px/0.95 var(--latin)}
#s9 .hint{left:0;right:0;bottom:30px;text-align:center}
#phone{position:absolute;left:470px;top:16px;width:330px;height:688px;border-radius:52px;background:#fff;border:9px solid #1b1b1f;box-shadow:0 0 0 2px #55555c,0 20px 50px rgba(40,30,20,.35);overflow:hidden;z-index:12;
  transform:translateY(760px);transition:transform 1s cubic-bezier(.3,.9,.3,1)}
#phone.in{transform:none}
#phone .island{position:absolute;left:50%;top:12px;width:96px;height:28px;margin-left:-48px;border-radius:16px;background:#111;z-index:3}
#phone .dt{position:absolute;left:0;right:0;top:58px;text-align:center;font:600 17px var(--ui);color:#fff;z-index:3;text-shadow:0 1px 6px rgba(0,0,0,.35)}
#phone .tm{position:absolute;left:0;right:0;top:78px;text-align:center;font:700 86px/1 var(--ui);color:#fff;z-index:3;letter-spacing:-2px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
#phone .wall{position:absolute;inset:0;background:linear-gradient(#cfd4dc 0,#f3f1ee 34%,#fff 60%)}
#phone .noti{position:absolute;left:14px;right:14px;top:492px;background:rgba(245,245,245,.86);backdrop-filter:blur(8px);border-radius:18px;padding:10px 14px;font:13px/1.45 var(--ui);color:#222;z-index:4;
  transform:translateY(20px);opacity:0;transition:transform .5s ease 1.2s,opacity .5s ease 1.2s}
#phone.in .noti{transform:none;opacity:1}
#phone .noti b{display:flex;justify-content:space-between;font-size:13px}
#phone .noti b span{font-weight:400;color:#777}
#phone .ic{position:absolute;bottom:34px;width:44px;height:44px;border-radius:50%;background:rgba(60,60,60,.45);z-index:4}
#phone .bar{position:absolute;left:50%;bottom:9px;width:120px;height:5px;margin-left:-60px;border-radius:3px;background:#222;z-index:4}
#s9 .say{left:840px;top:300px;width:430px}
#s9 .say .l1{font-size:35px}

/* ---------- 10 撕纸蛋糕 ---------- */
#s10{background:#d9caa9}
#s10 .sheet{position:absolute;left:90px;top:0;width:400px;height:720px;background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.22) 30%,rgba(255,255,255,.1) 70%,rgba(0,0,0,.03));}
.strip{position:absolute;z-index:6;filter:drop-shadow(0 3px 3px rgba(60,40,20,.28));touch-action:none}
.strip .pp{position:absolute;inset:0}
.strip .tx{position:absolute;inset:8px 16px;font:19px/1.28 var(--scribble);color:#2e2338;opacity:0;transition:opacity .8s ease .5s;overflow:hidden;letter-spacing:.5px}
.strip.placed .tx{opacity:.92}
#wick{position:absolute;left:279px;top:214px;width:18px;height:44px;background:#b48ac0;z-index:5;opacity:0;transition:opacity .5s;clip-path:polygon(8% 0,96% 6%,100% 100%,0 96%)}
#wick.in{opacity:1}
#cflame{position:absolute;left:268px;top:158px;width:40px;height:60px;z-index:19;opacity:0;transform-origin:50% 100%;transition:opacity .4s}
#cflame.in{opacity:1;animation:flick .6s ease-in-out infinite}
#match{position:absolute;left:820px;top:330px;width:120px;height:30px;z-index:18;touch-action:none;transform:rotate(-14deg)}
#match .st{position:absolute;left:0;top:13px;width:104px;height:5px;background:#e3c58c;border-radius:2px}
#match .hd{position:absolute;right:0;top:7px;width:18px;height:17px;border-radius:50%;background:#c21f33}
#match .fl{position:absolute;right:-9px;top:-30px;width:34px;height:46px;opacity:0;transform-origin:50% 100%;transition:opacity .2s}
#match.lit .fl{opacity:1;animation:flick .4s ease-in-out infinite}
#dark10{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity 1.4s;
  background:radial-gradient(ellipse 330px 420px at 290px 380px,rgba(80,66,52,0) 0,rgba(80,66,52,.1) 55%,rgba(74,62,50,.96) 100%)}
#dark10.in{opacity:1}
#s10 .hint{left:640px;top:70px;z-index:16}
.wishl,.wishr{position:absolute;top:168px;font-size:34px;letter-spacing:8px;z-index:19;color:#3a2c22}
.wishl{right:1022px}.wishr{left:318px}
#s10 .say{left:800px;top:230px;color:#fff;z-index:19}
#s10 .say .l1{font-size:42px;line-height:1.65}
.spark{position:absolute;color:#3a2c22;font:20px var(--ui);opacity:.7}

/* ---------- 11 礼物 ---------- */
#gift{position:absolute;left:130px;top:110px;width:470px;height:520px;transform-origin:50% 90%}
#gift.shake{animation:wiggle .18s ease-in-out 5}
#s11 .say{left:730px;top:70px}
#s11 .say .l1{font-size:56px}
#s11 .say .l3{font-size:40px;margin-top:24px}
#note{position:absolute;left:720px;top:400px;width:500px;min-height:250px;background:#fdfbf4;padding:34px 34px 26px;transform:rotate(-2.5deg);box-shadow:0 8px 20px rgba(40,30,20,.25);z-index:6;
  background-image:linear-gradient(transparent 46px,#d9d6cf 47px);background-size:100% 48px;background-position:0 20px}
#note::before{content:"";position:absolute;left:50%;top:-14px;width:110px;height:30px;margin-left:-55px;background:rgba(232,190,140,.75)}
#note .ps{font:600 30px var(--latin);color:var(--berry)}
#note p{font-size:36px;line-height:48px;letter-spacing:2px}
#note .sign{text-align:right;font-size:28px;line-height:48px;color:var(--ink-soft)}
#again{position:absolute;left:230px;bottom:22px;z-index:45;font-size:24px;padding:6px 16px;background:#faf6ee;box-shadow:0 3px 8px rgba(40,30,20,.28)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01s !important}}

/* ---------- v2：聚焦 / 入场 / 拖动提示 ---------- */
@property --fr{syntax:"<length>";inherits:false;initial-value:1700px}
@property --fa{syntax:"<number>";inherits:false;initial-value:0}
#focus{position:absolute;inset:0;z-index:28;pointer-events:none;--fx:640px;--fy:360px;
  background:radial-gradient(circle at var(--fx) var(--fy),rgba(14,9,16,0) 0,rgba(14,9,16,0) calc(var(--fr) * .5),rgba(14,9,16,var(--fa)) var(--fr));
  transition:--fr 1s cubic-bezier(.3,.7,.3,1),--fa .8s ease}
.pre>*{visibility:hidden}
.ghost{position:absolute;z-index:34;font-size:56px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35))}
.cutline path.cutdone{stroke:#e23a48;stroke-width:4.5;stroke-dasharray:0 1;animation:none;stroke-linecap:round}
#scis3{position:absolute;font-size:40px;line-height:1;z-index:11;pointer-events:none;opacity:0;transition:opacity .3s}
.fr .ph{filter:blur(7px) brightness(.42) saturate(.5);transition:filter 1.2s ease}
.fr.sharp .ph{filter:none}
.pass-stub{transition:transform .3s;touch-action:none;cursor:grab}
#s1,.strip,.kid,#lever,#match,.beer,#filmclip,.headpiece{cursor:grab}
.title span,.say span{transition:opacity .12s}

/* ---------- v3 ---------- */
.cheers,.say,.title,.hint,.wishl,.wishr,#km,.kcap,.t2,.doodle{pointer-events:none}
.fade:not(.in),.pop:not(.in){pointer-events:none}
.half.base{filter:none;transition:none}
.half .curl{position:absolute;inset:0;pointer-events:none;opacity:0}
.left .curl{background:linear-gradient(90deg,rgba(0,0,0,0) 380px,rgba(255,248,235,.20) 560px,rgba(255,248,235,.05) 610px,rgba(50,25,8,.22) 645px)}
.right .curl{background:linear-gradient(270deg,rgba(0,0,0,0) 380px,rgba(255,248,235,.20) 560px,rgba(255,248,235,.05) 610px,rgba(50,25,8,.22) 645px)}
.half.flap{filter:drop-shadow(0 4px 10px rgba(30,18,8,.5))}
.half .rip{background:#f4eee0 repeating-linear-gradient(8deg,rgba(150,120,80,.25) 0 1px,transparent 1px 3px)}
#s1 .hint{animation:none}
.dd{position:absolute;z-index:4;pointer-events:none;line-height:1;transform:scale(0) rotate(var(--r,0deg));opacity:0;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .25s}
.dd.in{transform:scale(1) rotate(var(--r,0deg));opacity:1;animation:ddw 2.8s ease-in-out infinite}
@keyframes ddw{0%,100%{transform:scale(1) rotate(var(--r,0deg))}50%{transform:scale(1.13) rotate(calc(var(--r,0deg) + 9deg))}}
.dd svg{width:100%;display:block;overflow:visible}
.dd span{font:600 1em/1 var(--latin);white-space:nowrap}
#s10 .dd{z-index:5}
.half.base{z-index:2}
.half.flap{z-index:1}
#s1 .hint{z-index:3}

/* ---------- v4 ---------- */
#cam{left:940px;top:22px;width:250px;transform:perspective(800px) rotateY(-24deg) rotate(3deg)}
#cam.press{transform:perspective(800px) rotateY(-24deg) rotate(3deg) scale(.96)}
#camhit{left:940px;top:22px;width:250px;height:300px}
#camhit::after{left:96px;top:120px;width:74px;height:74px}
#pola{left:915px;top:10px;transform:scale(.55);opacity:0;transition:left 1.3s cubic-bezier(.4,0,.2,1),top 2.2s linear,transform 1.3s cubic-bezier(.4,0,.2,1),opacity .25s}
#pola.print{top:252px;opacity:1}
#pola.out{left:250px;top:170px;transform:scale(1) rotate(-3deg);opacity:1;transition:left 1.3s cubic-bezier(.4,0,.2,1),top 1.3s cubic-bezier(.4,0,.2,1),transform 1.3s cubic-bezier(.4,0,.2,1),opacity .25s}
#phone .wall{background:linear-gradient(#cfd4dc 0,#ecebe6 26%,#fbfaf7 46%)}
.wallclone{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;transform:translate(-177px,205px) scale(.52);pointer-events:none}
.wallclone>*{transition:none !important;opacity:1 !important}
.wallclone .ka{left:400px !important;top:110px !important}.wallclone .kb{left:555px !important;top:110px !important}
#pola.drop{transition:transform .9s ease-in,opacity .9s;transform:translateY(520px) rotate(-24deg);opacity:0}
.wallclone{transform:translate(-228px,182px) scale(.6)}
#beerL.clink{transform:rotate(11deg) translateX(6px)}
#beerR.clink{transform:rotate(-11deg) translateX(-6px)}

/* ================= v5：自适应舞台（横屏 / 竖屏 / 任意比例） ================= */
html,body{background:#ece4d6}
#stage{width:1280px;height:720px}
.sc{position:absolute;left:var(--ox,0px);top:var(--oy,0px);width:var(--dw,1280px);height:var(--dh,720px)}
.sc::before{content:"";position:absolute;inset:-700px}
#safe{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#fx{width:100%;height:100%}
#next{right:calc(26px + var(--sr,0px));bottom:calc(22px + var(--sb,0px))}
#mute{left:calc(14px + var(--sl,0px));bottom:calc(14px + var(--sb,0px))}
#dots{left:calc(60px + var(--sl,0px));bottom:calc(27px + var(--sb,0px))}
#again{bottom:calc(22px + var(--sb,0px) - var(--oy,0px))}
#bunting{top:var(--st,0px)}
/* 出血：盖住设计稿以外的区域 */
.half{inset:-600px}
.fc{position:absolute;left:600px;top:600px;width:var(--dw);height:var(--dh)}
.twine{inset:auto;left:0;top:0;overflow:visible}
.left .curl{background:linear-gradient(90deg,rgba(0,0,0,0) calc(600px + var(--dw) / 2 - 260px),rgba(255,248,235,.20) calc(600px + var(--dw) / 2 - 80px),rgba(255,248,235,.05) calc(600px + var(--dw) / 2 - 30px),rgba(50,25,8,.22) calc(600px + var(--dw) / 2 + 5px))}
.right .curl{background:linear-gradient(270deg,rgba(0,0,0,0) calc(600px + var(--dw) / 2 - 260px),rgba(255,248,235,.20) calc(600px + var(--dw) / 2 - 80px),rgba(255,248,235,.05) calc(600px + var(--dw) / 2 - 30px),rgba(50,25,8,.22) calc(600px + var(--dw) / 2 + 5px))}
#s1.open .left,#s1.open .right{transform:none;opacity:1}
#s1 .open .left{transform:translateX(-900px) rotate(-8deg);opacity:0}
#s1 .open .right{transform:translateX(900px) rotate(8deg);opacity:0}
#s1 .open .hint{opacity:0}
.lid{left:calc(-1 * var(--ox) - 300px);width:calc(var(--dw) + 2 * var(--ox) + 600px);height:calc(var(--dh) / 2 + var(--oy) + 140px)}
.lid.t{top:calc(-1 * (var(--dh) / 2 + var(--oy) + 140px) - var(--oy))}
.lid.b{bottom:calc(-1 * (var(--dh) / 2 + var(--oy) + 140px) - var(--oy))}
.shut .lid.t{transform:translateY(calc(var(--dh) / 2 + var(--oy) + 40px))}
.shut .lid.b{transform:translateY(calc(-1 * (var(--dh) / 2 + var(--oy) + 40px)))}
#dark4{inset:-700px;background:radial-gradient(circle at 1070px 1030px,rgba(44,38,48,0) 0,rgba(44,38,48,.15) 190px,rgba(44,38,48,.96) 360px)}
#dark10{inset:-700px;background:radial-gradient(ellipse 330px 420px at 990px 1080px,rgba(80,66,52,0) 0,rgba(80,66,52,.1) 55%,rgba(74,62,50,.96) 100%)}
#mapdim{inset:-700px}
#s6{background:#16424b}
#s10 .sheet{top:-700px;height:calc(var(--dh) + 1400px)}
.beer{top:calc(var(--dh) + var(--oy) + 60px)}
.beer.peek{top:calc(var(--dh) - 160px)}
.beer.up{top:calc(var(--dh) - 320px)}

/* ================= 竖屏排版（720×1280） ================= */
.port .title{top:44px;font-size:36px}
.port .hint{font-size:32px}
.port #s1 .hint{left:0;right:0;text-align:center;bottom:150px;font-size:38px}
.port .label{left:140px;top:330px}
/* 2 */
.port .hbletters{left:230px;top:214px}
.port .age{left:40px;top:290px}
.port .hero{left:200px;top:375px}
.port #s2 .hat{left:302px;top:256px}
.port #s2 .cake{left:228px;top:602px}
.port .candles{left:298px;top:584px}
.port .say{left:50px;top:1000px;width:620px;text-align:center}
/* 3 */
.port #cam,.port #camhit{left:440px;top:76px}
.port #pola{left:415px;top:64px}
.port #pola.print{top:306px}
.port #pola.out{left:210px;top:470px}
.port #tray{left:60px;top:900px;width:600px;text-align:center}
/* 4 */
.port #s4 .cake{left:140px;top:560px}
.port #dark4{background:radial-gradient(circle at 1060px 1340px,rgba(44,38,48,0) 0,rgba(44,38,48,.15) 250px,rgba(44,38,48,.96) 470px)}
.port #beerL{left:185px}.port #beerR{left:365px}
.port .cheers{left:0;width:720px;top:150px;text-align:center}
.port .cheers .b{margin:22px 0 0 0}

/* 5 胶卷：竖屏改成从上往下拉 */
.port #can{left:125px;top:70px;transform:rotate(90deg) scale(1.25)}
.port #filmclip{left:0;top:396px;width:720px;height:calc(var(--dh) - 396px + var(--oy))}
.port #strip{flex-direction:column;width:720px;height:auto}
.port .fr{width:720px;height:205px}
.port .fr .band{left:60px;right:auto;top:0;width:340px;height:205px;
  background-image:linear-gradient(#3b3a3c 0 8px,transparent 8px 22px,#3b3a3c 22px 30px),linear-gradient(#ece4d6,#ece4d6),linear-gradient(#3b3a3c 0 8px,transparent 8px 22px,#3b3a3c 22px 30px),linear-gradient(#ece4d6,#ece4d6);
  background-size:16px 30px,16px 100%,16px 30px,16px 100%;background-position:8px 0,8px 0,316px 0,316px 0;background-repeat:repeat-y,no-repeat,repeat-y,no-repeat}
.port .fr .ph{left:102px;top:14px;width:256px;height:177px}
.port .fr .cap{left:424px;right:18px;top:24px}
.port .fr .cap p{font-size:26px;line-height:1.4}
.port .fr.leader{width:720px;height:230px}
.port .fr.leader .band{height:230px;clip-path:polygon(0 0,0 100%,38% 100%,44% 96%,50% 62%,62% 52%,100% 50%,100% 0)}
.port #s5 .hint{left:488px;top:176px;width:214px;white-space:normal;font-size:30px;line-height:1.3}
/* 6 地图 */
#mapimg,#mapsvg{width:var(--dw);height:var(--dh)}
.port #mapcard{left:30px;top:440px}
.port #mapcard .glass{padding:30px 44px;font-size:50px}
.port .board{left:40px;top:410px}
.port #pass{left:50px;top:500px}
.port #pass.stub{left:455px;top:930px}
.port #km{left:30px;right:30px;bottom:150px;text-align:center;line-height:1.5}
.port #s6 .hint{bottom:108px}
.port .city{font-size:24px}
/* 7 刮刮乐 */
.port #ticket{left:125px;top:236px}
.port #s7 .hint{left:0;right:0;top:936px;text-align:center;font-size:32px}

/* 8 老虎机 */
.port #slot{left:150px;top:150px}
.port .reel{top:441px}
.port #lever{left:472px;top:392px}
.port #paid{left:566px;top:690px}
.port #s8 .say{left:50px;top:1046px;width:620px}
/* 9 童年合影 */
.port .kid{top:330px;height:300px}
.port #kidA{left:30px}.port #kidB{left:422px}
.port .kcap{top:650px;font-size:26px}
.port #s9 .t2{left:36px;top:100px}
.port #s9 .hint{bottom:150px}
.port #phone{left:195px;top:250px}
.port #s9 .say{left:50px;top:986px;width:620px}
.port .wallclone{transform:translate(-83px,-40px) scale(.72)}
.port .wallclone .ka{left:130px !important;top:400px !important}.port .wallclone .kb{left:266px !important;top:400px !important}
/* 10 撕纸蛋糕 */
.port #s10 .sheet{left:220px}
.port #wick{left:409px;top:334px}
.port #cflame{left:398px;top:278px}
.port #dark10{background:radial-gradient(ellipse 370px 470px at 1120px 1210px,rgba(80,66,52,0) 0,rgba(80,66,52,.1) 55%,rgba(74,62,50,.96) 100%)}
.port .wishl{right:334px;top:288px}.port .wishr{left:448px;top:288px}
.port #match{left:250px;top:1024px}
.port #s10 .hint{left:0;right:0;top:150px;text-align:center}
.port #s10 .say{left:50px;top:936px;width:620px}
.port #s10 .say .l1{font-size:40px;line-height:1.6}
/* 11 礼物 */
.port #gift{left:125px;top:330px}
.port #s11 .say{left:50px;top:96px;width:620px}
.port #note{left:110px;top:800px}
.port #again{left:auto;right:calc(26px + var(--sr,0px))}
#phone{transform:translateY(calc(var(--dh) + var(--oy) + 40px))}
#phone.in{transform:none}
.port #pass.stub{left:486px;top:176px}
#pola.drop{transform:translateY(calc(var(--dh) + var(--oy))) rotate(-24deg)}

/* ================= 后台 ================= */
#adm-open{position:absolute;left:calc(250px + var(--sl,0px));bottom:calc(14px + var(--sb,0px));z-index:60;font:500 20px/1 var(--ui,system-ui,sans-serif);padding:10px 16px;border-radius:99px;border:0;background:rgba(40,34,30,.78);color:#fff;cursor:pointer}
.port #adm-open{left:auto;right:calc(16px + var(--sr,0px));bottom:auto;top:calc(54px + var(--st,0px));font-size:22px}
#adm{position:fixed;inset:0;z-index:200;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#f5f2ec;color:#2a2622;font:15px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;touch-action:pan-y;user-select:text;-webkit-user-select:text;padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
#adm.open{display:block}
#adm *{box-sizing:border-box}
#adm header{position:sticky;top:0;z-index:2;background:#2a2622;color:#fff;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
#adm h1{font:600 17px/1.4 inherit;margin:0 0 8px}
.adm-bar{display:flex;flex-wrap:wrap;gap:8px}
#adm button{font:inherit;cursor:pointer}
.adm-bar button{padding:7px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:14px}
.adm-bar button.pri{background:#e0473c;border-color:#e0473c;font-weight:600}
#adm-body{max-width:760px;margin:0 auto;padding:14px 14px 0;display:flex;flex-direction:column;gap:10px}
.adm-sec{background:#fff;border:1px solid #e2dcd0;border-radius:12px;padding:0 14px}
.adm-sec[open]{padding-bottom:14px}
.adm-sec summary{cursor:pointer;font-weight:600;padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
.adm-sec summary::-webkit-details-marker{display:none}
.adm-sec summary::before{content:"▸";margin-right:6px;color:#9a8f80}
.adm-sec[open] summary::before{content:"▾"}
.adm-sec summary{justify-content:flex-start}
.adm-jump{margin-left:auto;font-size:13px !important;padding:5px 10px;border-radius:8px;border:1px solid #d9d2c4;background:#faf8f3;color:#2a2622;white-space:nowrap}
.adm-guide{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.adm-field{margin-top:12px}
.adm-field>label{display:block;font-size:13px;font-weight:600;color:#5a5148;margin-bottom:4px}
.adm-field input[type=text],.adm-field input[type=number],.adm-field textarea,.adm-field select{width:100%;padding:9px 10px;border:1px solid #cfc7b8;border-radius:8px;background:#fff;color:#2a2622;font:16px/1.5 inherit}
.adm-field textarea{resize:vertical}
.adm-field input:focus-visible,.adm-field textarea:focus-visible,.adm-field select:focus-visible,#adm button:focus-visible{outline:2px solid #e0473c;outline-offset:1px}
.adm-field input[type=file]{font-size:14px;max-width:100%}
.adm-check{display:flex !important;align-items:center;gap:8px;font-weight:500 !important}
.adm-help,.adm-note{font-size:12.5px;color:#857a6c;margin:4px 0 0}
.adm-note{font-size:13.5px;margin:10px 0 0}
.adm-imgrow{display:flex;gap:12px;align-items:center}
.adm-thumb{width:76px;height:76px;object-fit:contain;border-radius:8px;border:1px solid #e2dcd0;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/14px 14px;flex:none}
.adm-link{background:none;border:0;color:#b53a30;padding:4px 6px;font-size:13px !important;text-decoration:underline}
.adm-list{display:flex;flex-direction:column;gap:10px}
.adm-card{border:1px solid #e2dcd0;border-radius:10px;padding:4px 12px 12px;background:#fbfaf6}
.adm-cardhead{display:flex;align-items:center;gap:6px;margin-top:8px}
.adm-cardhead b{margin-right:auto;font-size:13px}
.adm-add{padding:10px;border:1.5px dashed #cfc7b8;border-radius:10px;background:#fff;color:#5a5148}
.adm-seg{display:flex;gap:8px;margin:8px 0}
.adm-seg button{padding:6px 12px;border-radius:99px;border:1px solid #cfc7b8;background:#fff;color:#2a2622;font-size:13px !important}
.adm-seg button.on{background:#2a2622;color:#fff;border-color:#2a2622}
.adm-pick{position:relative;display:inline-block;line-height:0;cursor:crosshair;border:1px solid #e2dcd0;border-radius:8px;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/14px 14px}
.adm-pick img{width:230px;max-width:100%;height:auto;pointer-events:none}
.adm-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;font:700 14px/26px system-ui,sans-serif;text-align:center;color:#fff;pointer-events:none;box-shadow:0 0 0 2px #fff}
.adm-dot.a{background:#e0473c}.adm-dot.b{background:#2f6fd8}
#adm-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#2a2622;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90vw;z-index:5}
#adm-toast.show{opacity:1;transform:translate(-50%,0)}
#adm-toast.bad{background:#b53a30}

/* ---------- v6 ---------- */
#next{font-size:32px;padding:10px 20px 10px 24px}
.port #next{font-size:40px;padding:14px 26px 14px 30px}
.port #s10 .sheet{left:160px}
.port #wick{left:349px;top:384px}
.port #cflame{left:338px;top:328px}
.port #dark10{background:radial-gradient(ellipse 370px 470px at 1060px 1250px,rgba(80,66,52,0) 0,rgba(80,66,52,.1) 55%,rgba(74,62,50,.96) 100%)}
.port .wishl{right:394px;top:338px}.port .wishr{left:388px;top:338px}
.port #s10 .say{top:960px}
.port #s10 .say .l1{font-size:38px;line-height:1.5}
.wallbtn{position:absolute;left:840px;top:430px;z-index:20;font:26px var(--hand);padding:10px 20px;border-radius:99px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.port .wallbtn{left:50%;top:1100px;transform:translateX(-50%);font-size:32px;padding:12px 26px;white-space:nowrap}
#wallsave{position:fixed;inset:0;z-index:300;background:rgba(20,16,14,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:#fff;font:15px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;text-align:center;touch-action:auto}
#wallsave img{max-height:64vh;max-width:80vw;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.5);-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto;pointer-events:auto}
#wallsave p{margin:0;opacity:.9}
#wallsave div{display:flex;gap:12px}
#wallsave button{font:inherit;padding:9px 20px;border-radius:99px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer}
#wallsave button[data-a=dl]{background:#fff;color:#221d1a;border-color:#fff}

/* ---------- v7 ---------- */
.headpiece{width:236px;height:260px}
.hclip{clip-path:path('M118 2 C198 0 236 61 234 137 C231 208 182 258 118 258 C54 258 5 208 2 135 C0 59 40 2 118 2Z')}
.stick{left:115px;top:243px}
#modebtn{position:absolute;z-index:60;left:calc(396px + var(--sl,0px));bottom:calc(14px + var(--sb,0px));font:500 20px/1 var(--ui);padding:10px 16px;border-radius:99px;border:0;background:rgba(40,34,30,.78);color:#fff;cursor:pointer}
.port #modebtn{left:auto;right:calc(16px + var(--sr,0px));bottom:auto;top:calc(108px + var(--st,0px));font-size:22px}
/* 胶卷照片放大 */
.zoombg{position:absolute;inset:-800px;background:rgba(22,17,14,.78);opacity:0;transition:opacity .42s;z-index:40}
.zoombg.in{opacity:1}
.zoomph{position:absolute;z-index:41;background-size:cover;background-position:center;border-radius:2px;box-shadow:0 0 0 0 #fff,0 4px 10px rgba(0,0,0,.2);cursor:pointer;
  transition:left .45s cubic-bezier(.3,.85,.3,1),top .45s cubic-bezier(.3,.85,.3,1),width .45s cubic-bezier(.3,.85,.3,1),height .45s cubic-bezier(.3,.85,.3,1),box-shadow .45s}
.zoomph.big{box-shadow:0 0 0 12px #fff,0 24px 60px rgba(0,0,0,.5)}
.zoomback{position:absolute;z-index:42;left:50%;transform:translateX(-50%);font:30px var(--hand);padding:8px 26px;border-radius:99px;border:1.5px solid #fff;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;opacity:0;transition:opacity .3s .15s}
.zoomcap{position:absolute;z-index:41;left:40px;right:40px;text-align:center;color:#fff;opacity:0;transition:opacity .3s .15s;pointer-events:none}
.zoomcap p,.zoomcap{font:30px/1.5 var(--hand)}.zoomcap small,.zoomcap .d{opacity:.75;font-size:22px;display:block}
.zoombg+.zoomph~.zoomback.in,.zoomback.in,.zoomcap.in{opacity:1}
.port .zoomback{font-size:36px;padding:10px 32px}
.fr.sharp .ph:not(.q){cursor:zoom-in}
/* 登机牌锯齿票根 */
.pass-main,.pass-stub{border-radius:0}
.pass-main{border-right:0;z-index:2}
.pass-main::after{content:"";position:absolute;right:13px;top:6px;bottom:6px;border-right:2px dotted #b9a877}
.pass-stub{margin-left:-10px;z-index:1}
#pass.stub .pass-stub{margin-left:0}