/* 英雄照手機流程。C 典藏卡牌主視覺：牌桌、卡框、卡背都是本案 gpt_image_2_5 生成元件（assets/gen）。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; }
body { color: #f5ead0; font-family: "Songti TC", "Noto Serif TC", serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; }
.num { font-family: "Didot", "Bodoni 72", serif; font-weight: 700; }
.stage { position: relative; width: 390px; height: 844px; margin: 0 auto; overflow: hidden; overflow: clip; background: #020604; isolation: isolate; }
.bg { position: absolute; inset: 0; z-index: -2; background: url(assets/gen/c-table.jpg) center 38% / cover; animation: bgin 1.2s ease-out both; }
@keyframes bgin { from { opacity: 0; filter: brightness(.3); } }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.hud { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.hud .wm { width: 128px; filter: drop-shadow(0 2px 6px #000); }
.hud .tag { font-size: 11px; color: rgba(245,234,208,.6); }

.sc { position: absolute; inset: 60px 0 0; display: none; flex-direction: column; align-items: center; text-align: center; padding: 0 26px; }
.sc.on { display: flex; animation: scin .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes scin { from { opacity: 0; transform: translateY(18px); } }
h1 { margin-top: 14px; font-size: 26px; letter-spacing: .12em; color: #ffe7b0; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.lead { margin-top: 12px; font-size: 16px; line-height: 1.6; color: rgba(245,234,208,.9); }
.fine { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: rgba(245,234,208,.72); }
.fine span { color: rgba(245,234,208,.5); }
.chips { list-style: none; display: flex; gap: 8px; margin-top: 14px; }
.chips li { padding: 6px 10px; font-size: 13px; border: 9px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 9px stretch; }
.btn { display: grid; place-items: center; width: 262px; height: 62px; margin-top: 16px; font-size: 19px; font-weight: 700; letter-spacing: .1em; }
.btn.gold { border: 12px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 12px stretch; color: #ffe7b0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.7)); transition: transform .12s; }
.btn.gold:active { transform: translateY(3px) scale(.98); }
.btn.gold { animation: glowpulse 2.6s 1s ease-in-out infinite; }
@keyframes glowpulse { 50% { filter: drop-shadow(0 8px 14px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,210,120,.55)); } }
.btn.ghost { width: 150px; height: 56px; font-size: 16px; border: 1px solid rgba(217,177,92,.6); border-radius: 4px; background: rgba(0,0,0,.45); }
.row { display: flex; gap: 12px; }
.row .btn.gold { width: 150px; height: 56px; font-size: 16px; }
.link { margin-top: 14px; font-size: 14px; color: rgba(245,234,208,.75); border-bottom: 1px solid rgba(245,234,208,.35); }

/* flip cards */
.in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 8px; overflow: hidden; }
.f.back { background: url(assets/gen/c-card-back.png) center / 100% 100%; transform: rotateY(180deg); }
.pc { position: relative; width: 236px; height: 354px; margin-top: 10px; perspective: 1000px; }
.pc .front { border: 12px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 12px stretch; }
.pc .front img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(.6deg); } }
.s-consent .pc { animation: dealin .9s .2s cubic-bezier(.2,1.2,.4,1) both, float 4s 1.1s ease-in-out infinite; }
@keyframes dealin { from { opacity: 0; transform: translateY(-120px) rotate(-8deg) scale(.7); } }

/* squad */
.squad { list-style: none; width: 100%; margin-top: 18px; display: grid; gap: 10px; }
.squad li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left; border: 10px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 10px stretch; animation: dealside .5s cubic-bezier(.2,1.2,.4,1) both; }
.squad li:nth-child(2) { animation-delay: .1s; } .squad li:nth-child(3) { animation-delay: .2s; }
@keyframes dealside { from { opacity: 0; transform: translateX(80px) rotate(4deg); } }
.squad i { width: 42px; height: 58px; flex: none; border-radius: 4px; background: #111 center 15% / cover; box-shadow: 0 0 0 1px rgba(217,177,92,.7); }
.squad b { display: block; font-size: 16px; color: #ffe7b0; }
.squad em { display: block; font-style: normal; font-size: 13px; color: rgba(245,234,208,.75); }
.squad .ok { margin-left: auto; font-size: 13px; color: #bfe8a8; }
.squad .ok.wait { color: rgba(245,234,208,.6); }

/* number card */
.num-card { position: relative; width: 210px; height: 300px; margin-top: 22px; perspective: 1000px; }
.num-card .front { transform: rotateY(180deg); display: grid; place-content: center; gap: 8px; border: 14px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 14px stretch; }
.num-card .back { transform: none; }
.num-card.open .in { transform: rotateY(180deg); }
.num-card small { font-size: 13px; letter-spacing: .3em; color: #d9b15c; }
.num-card .num { font-size: 64px; color: #ffe7b0; text-shadow: 0 0 18px rgba(255,200,90,.6); }
.num-card .who { font-size: 13px; color: rgba(245,234,208,.8); }
.dots { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.dots i { width: 6px; height: 6px; transform: rotate(45deg); background: #d9b15c; animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 50% { opacity: .2; } }

/* shoot */
.flash-ring { width: 230px; height: 230px; margin-top: 40px; border-radius: 50%; background: url(assets/gen/c-timer.png) center / cover; mix-blend-mode: screen; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* forge / waiting */
.forge { position: relative; width: 250px; height: 250px; margin-top: 24px; }
.forge .ring { position: absolute; inset: 0; background: url(assets/gen/c-timer.png) center / cover; mix-blend-mode: screen; animation: spin 9s linear infinite; }
.forge .cardback { position: absolute; left: 50%; top: 50%; width: 110px; height: 165px; margin: -82px 0 0 -55px; border-radius: 7px; background: url(assets/gen/c-card-back.png) center / 100% 100%; box-shadow: 0 0 30px rgba(255,200,100,.45); animation: forge 2.4s ease-in-out infinite; }
@keyframes forge { 0%, 100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(180deg) translateY(-6px); } }
.steps { list-style: none; margin-top: 18px; width: 260px; text-align: left; }
.steps li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; color: rgba(245,234,208,.5); }
.steps li::before { content: ""; position: absolute; left: 6px; top: 12px; width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid rgba(217,177,92,.6); }
.steps li.done { color: rgba(245,234,208,.85); } .steps li.done::before { background: #d9b15c; }
.steps li.now { color: #ffe7b0; } .steps li.now::before { background: #ffe7b0; animation: dot 1s infinite; }

/* reveal */
.post { position: relative; width: 262px; height: 393px; margin-top: 12px; perspective: 1200px; }
.post .front { transform: rotateY(180deg); box-shadow: 0 0 0 1px rgba(217,177,92,.7), 0 18px 40px rgba(0,0,0,.8); }
.post .back { transform: none; }
.post.open .in { transform: rotateY(180deg); }
.post .photo, .post .type { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,248,220,.5) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; }
.post.open .sheen { animation: sheen 1.4s .9s ease-out both; }
@keyframes sheen { to { background-position: -40% 0; } }
.post.open { animation: postglow 2s .8s ease-out both; }
@keyframes postglow { 0% { filter: none; } 40% { filter: drop-shadow(0 0 30px rgba(255,220,130,.9)); } 100% { filter: drop-shadow(0 0 12px rgba(255,220,130,.35)); } }
.share { font-size: 15px; }
/* 重拍狀態（每人 1 次）：小金框一行，只在有內容時出現 */
.rt { display: none; margin-top: 10px; padding: 7px 12px; font-size: 13px; line-height: 1.5; color: #ffe7b0; background: rgba(0,0,0,.45); border: 1px solid rgba(217,177,92,.45); border-radius: 6px; }
.rt.on { display: block; }
.src { font-size: 11px; }

/* paper */
.code-card { position: relative; width: 300px; margin-top: 24px; padding: 26px 16px 22px; display: grid; gap: 8px; border: 16px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 16px stretch; animation: dealin .7s cubic-bezier(.2,1.2,.4,1) both; }
.code-card small { font-size: 13px; letter-spacing: .3em; color: #d9b15c; }
.code-card .num { font-size: 52px; color: #ffe7b0; }
.code-card span { font-size: 13px; color: rgba(245,234,208,.8); }
.code-card .stamp { position: absolute; right: -10px; top: -8px; padding: 8px 14px; font-size: 20px; font-weight: 900; letter-spacing: .2em; color: #bfe8a8; border: 3px double #bfe8a8; border-radius: 6px; transform: rotate(12deg) scale(2.6); opacity: 0; background: rgba(0,0,0,.6); }
.code-card.done .stamp { animation: stamp .35s cubic-bezier(.6,0,.8,.6) forwards; }
@keyframes stamp { to { transform: rotate(12deg) scale(1); opacity: 1; } }

.toast { position: absolute; left: 20px; right: 20px; bottom: 40px; z-index: 30; text-align: center; pointer-events: none; }
.toast div { display: inline-block; padding: 9px 14px; font-size: 14px; background: rgba(10,22,16,.94); box-shadow: 0 0 0 1px rgba(217,177,92,.7); border-radius: 4px; animation: toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.demo { width: 390px; margin: 10px auto 30px; display: flex; flex-wrap: wrap; gap: 6px; font-family: "PingFang TC", sans-serif; font-size: 13px; color: #9c927c; }
.demo b { width: 100%; font-weight: 600; } .demo i { width: 100%; height: 0; }
.demo button { padding: 6px 9px; border: 1px solid #3a3326; border-radius: 3px; color: #d8cdb2; background: #12100c; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }