/* 2026-10-20 攝影流程：叫號 → 原照現場確認 → 第 1 段等待（生成）→ 英雄照 → 第 2 段等待（紙本）。
   沿用 C 典藏卡牌的金框（c-card-front）、卡背與計時環，不新增美術。 */

/* 組隊頁的叫號一行 */
.sq-call { margin-top: 8px; min-height: 0; font-size: 14px; color: #ffe7b0; }
.sq-call:empty { display: none; }
.sq-call b { font-family: "Didot", "Bodoni 72", serif; font-size: 17px; letter-spacing: .06em; }
.sq-call.hot { padding: 7px 14px; background: rgba(60,40,8,.55); border: 1px solid #ffe2a0; border-radius: 6px; box-shadow: 0 0 18px rgba(255,214,120,.5); animation: callpulse 1.6s ease-in-out infinite; }
@keyframes callpulse { 50% { box-shadow: 0 0 4px rgba(255,214,120,.2); } }

/* 叫號卡 */
.s-call .num-card { margin-top: 18px; }
.num-card .c-num { font-size: 50px; letter-spacing: .04em; white-space: nowrap; }
.num-card .c-pno { font-size: 12px; letter-spacing: .12em; color: rgba(245,234,208,.6); }
.s-call .num-card.called { animation: cardcall 1.4s ease-in-out infinite; }
@keyframes cardcall { 50% { filter: drop-shadow(0 0 22px rgba(255,214,120,.9)); transform: translateY(-4px); } }
.s-call .num-card.passed { filter: grayscale(.5) brightness(.85); }
.s-call .c-title { min-height: 34px; }

/* 原照框：照片原樣顯示（contain，不裁掉任何一位），不加濾鏡 */
.raw { position: relative; width: 300px; margin-top: 12px; }
.raw-in { position: relative; height: 290px; transition: height .5s cubic-bezier(.2,1,.3,1); overflow: hidden; background: #040806; border: 12px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 12px stretch; animation: dealin .7s cubic-bezier(.2,1.2,.4,1) both; }
.raw-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.raw-in img.off { visibility: hidden; }
.raw-note { position: absolute; inset: 0; display: none; place-content: center; padding: 18px; font-size: 14px; line-height: 1.6; color: rgba(245,234,208,.85); }
.raw.nophoto .raw-note { display: grid; }
.raw-tag { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; color: rgba(245,234,208,.65); }
/* 待確認：框緩慢呼吸，提醒「一起看這張」 */
.raw.confirm .raw-in { animation: dealin .7s cubic-bezier(.2,1.2,.4,1) both, rawlook 2.4s 1s ease-in-out infinite; }
@keyframes rawlook { 50% { filter: drop-shadow(0 0 16px rgba(255,214,120,.65)); } }
/* 生成中：一道金光由上往下慢慢掃過原照——只表示「正在做」，不代表進度百分比 */
.raw .scan { position: absolute; left: 0; right: 0; top: -30%; height: 30%; display: none; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,226,150,.0) 20%, rgba(255,226,150,.38) 80%, rgba(255,246,214,.75)); mix-blend-mode: screen; }
.raw.forging .scan { display: block; animation: scan 2.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scan { to { top: 100%; } }
.raw.forging .raw-in::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; border-radius: 50%; background: url(assets/gen/c-timer.png) center / cover; animation: spin 6s linear infinite; opacity: .9;
  -webkit-mask: radial-gradient(closest-side, #000 90%, transparent 99%); mask: radial-gradient(closest-side, #000 90%, transparent 99%); }
.raw.bad .raw-in { filter: grayscale(.35); }

/* 兩段等待 */
.waits { list-style: none; display: flex; align-items: stretch; gap: 22px; margin-top: 12px; }
.waits li { position: relative; width: 140px; padding: 6px 8px 7px; display: grid; gap: 1px; text-align: center; border: 9px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 9px stretch; color: rgba(245,234,208,.55); }
.waits li + li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-top: 2px solid rgba(217,177,92,.7); border-right: 2px solid rgba(217,177,92,.7); transform: rotate(45deg); }
.waits small { font-size: 11px; letter-spacing: .2em; color: #d9b15c; }
.waits b { font-size: 16px; color: rgba(255,231,176,.6); }
.waits span { font-size: 13px; line-height: 1.35; }
.waits li.now { color: #ffe7b0; filter: drop-shadow(0 0 10px rgba(255,214,120,.55)); }
.waits li.now b { color: #ffe7b0; }
.waits li.now span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; transform: rotate(45deg); background: #ffe7b0; vertical-align: 1px; animation: dot 1s infinite; }
.waits li.done { color: #bfe8a8; } .waits li.done b { color: #f5ead0; }
.waits li.done span::before { content: "✓ "; }
.waits li.bad { color: #ffcf96; } .waits li.bad b { color: #ffcf96; }
.waits li.off { opacity: .55; }

/* 英雄照頁：卡片略小，留空間給兩段等待；右下角是原照縮圖 */
.s-reveal .post { width: 214px; height: 321px; margin-top: 8px; }
.s-reveal h1 { margin-top: 8px; }
.s-reveal .waits { margin-top: 10px; }
.s-reveal .row .btn { margin-top: 10px; }
.s-reveal .rt { margin-top: 8px; }
.s-reveal .src { margin-top: 8px; }
.rawthumb { position: absolute; right: -44px; bottom: -6px; width: 62px; padding: 3px 3px 2px; display: grid; gap: 2px; background: rgba(0,0,0,.6); border: 1px solid rgba(217,177,92,.75); border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.7); transform: rotate(4deg); }
.rawthumb img { width: 100%; height: 56px; object-fit: cover; border-radius: 2px; background: #111; }
.rawthumb img.off { visibility: hidden; }
.rawthumb small { font-size: 11px; letter-spacing: .1em; color: #ffe7b0; }
.rawthumb.none { display: none; }
.rawview { position: absolute; inset: 0; z-index: 45; display: none; place-content: center; justify-items: center; gap: 12px; padding: 20px; background: rgba(0,0,0,.88); cursor: pointer; }
.rawview.show { display: grid; animation: scin .3s both; }
.rawview img { max-width: 350px; max-height: 640px; object-fit: contain; box-shadow: 0 0 0 1px rgba(217,177,92,.7); }
.rawview p { font-size: 13px; color: rgba(245,234,208,.75); }
.s-reveal .share { margin-top: 8px; }

/* 紙本四步 */
.psteps { list-style: none; display: flex; gap: 6px; margin-top: 14px; }
.psteps li { position: relative; padding: 4px 8px 4px 22px; font-size: 13px; color: rgba(245,234,208,.5); }
.psteps li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid rgba(217,177,92,.6); }
.psteps li.done { color: rgba(245,234,208,.85); } .psteps li.done::before { background: #d9b15c; }
.psteps li.now { color: #ffe7b0; } .psteps li.now::before { background: #ffe7b0; animation: dot 1s infinite; }
.psteps li.bad { color: #ffcf96; } .psteps li.bad::before { background: #e08a6a; border-color: #e08a6a; }
.psteps.off li { opacity: .45; }
/* 紙本出紙口：用這張英雄照本身表示「正在印的就是它」；只有狀態，沒有進度百分比 */
.printout { position: relative; width: 230px; height: 214px; margin-top: 8px; }
.printout.none { display: none; }
.printout .slot { position: absolute; left: 0; right: 0; top: 0; height: 24px; z-index: 2; border-radius: 6px; background: linear-gradient(#20160a, #050302); border: 1px solid rgba(217,177,92,.75); box-shadow: inset 0 -6px 10px rgba(0,0,0,.85), 0 0 14px rgba(255,214,120,.25); }
.printout .slot small { position: absolute; right: 10px; top: 4px; font-size: 11px; letter-spacing: .12em; color: #d9b15c; }
.printout .feed { position: absolute; left: 0; right: 0; top: 12px; bottom: 0; overflow: hidden; }
.printout .sheet { position: absolute; left: 50%; top: 0; width: 128px; height: 192px; margin-left: -64px; padding: 5px; background: #f3ead6; box-shadow: 0 10px 20px rgba(0,0,0,.65); transform: translateY(-100%); transition: transform 1.4s cubic-bezier(.3,.8,.3,1), filter .6s; }
.printout .sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.printout .sheet img.off { visibility: hidden; }
.printout.q .sheet { transform: translateY(-72%); animation: feed 2.2s ease-in-out infinite; }
@keyframes feed { 50% { transform: translateY(-58%); } }
.printout.p .sheet, .printout.ok .sheet, .printout.bad .sheet { transform: translateY(0); }
.printout.p .sheet { animation: qc 2.4s 1.4s ease-in-out infinite; }
@keyframes qc { 50% { box-shadow: 0 10px 20px rgba(0,0,0,.65), 0 0 18px rgba(255,226,150,.75); } }
.printout.ok .sheet { box-shadow: 0 10px 20px rgba(0,0,0,.65), 0 0 22px rgba(255,214,120,.6); }
.printout.bad .sheet { filter: grayscale(.8) brightness(.7); }
.s-paper .code-card { margin-top: 10px; }
.code-card.void .p-code { color: rgba(245,234,208,.4); }