/* v123: 卡片生成動畫 overlay */
.cfx{position:fixed;inset:0;z-index:9000;background:#02060d;color:#e7edf5;font-family:"Noto Sans TC",system-ui,sans-serif;animation:cfx-in .35s ease-out;cursor:default;overscroll-behavior:contain;touch-action:none}
.cfx[hidden]{display:none}
.cfx.is-out{animation:cfx-out .32s ease-in forwards}
@keyframes cfx-in{from{opacity:0}to{opacity:1}}
@keyframes cfx-out{to{opacity:0}}
.cfx canvas{position:absolute;inset:0;display:block}
.cfx-hud{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,84vw);text-align:center;pointer-events:none}
.cfx-tip{font-size:15px;letter-spacing:.1em;color:#eef6fc;text-shadow:0 1px 8px #000;min-height:1.5em}
.cfx-sub{margin-top:2px;font-size:12px;color:#9eb3c7;min-height:1.3em;text-shadow:0 1px 6px #000}
.cfx-bar{margin-top:10px;height:6px;border-radius:9px;background:#ffffff1c;overflow:hidden;box-shadow:0 0 0 1px #ffffff14}
.cfx-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#7df9ff,#e5cf93);box-shadow:0 0 12px #7df9ffaa}
.cfx-pct{margin-top:6px;font-size:12.5px;color:#e5cf93;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.cfx-done{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}
.cfx-done b{font-size:clamp(26px,5vw,48px);color:#fff6d6;letter-spacing:.22em;text-shadow:0 0 18px #ffe9a8,0 0 44px #7df9ff}
.cfx-skip{position:absolute;left:0;right:0;bottom:calc(3% + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:12px;color:#9eb3c7;opacity:.8}
.cfx-skip[hidden]{display:none}
.cfx-cancel{position:absolute;right:20px;top:calc(18px + env(safe-area-inset-top));font:inherit;font-size:13px;min-height:36px;padding:0 16px;border:1px solid #ffffff44;border-radius:999px;background:#0b1626cc;color:#e7edf5;cursor:pointer}
.cfx-cancel[hidden]{display:none}
/* preview chooser */
.cfx-pick{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);width:min(760px,calc(100vw - 24px));display:grid;gap:8px;padding:12px;border:1px solid #33506a;border-radius:18px;background:#0b1626d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cfx-pick[hidden]{display:none}
.cfx-row,.cfx-use{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.cfx-use span{font-size:12.5px;color:#9eb3c7;margin-right:4px}
.cfx-pick button{font:inherit;font-size:13px;min-height:34px;padding:0 14px;border:1px solid #43566a;border-radius:999px;background:#0d1a29b3;color:#d5e3ee;cursor:pointer}
.cfx-pick button.is-on{border-color:#ad985c;background:linear-gradient(135deg,#41463b,#202d37);color:#f6e9bd}
.cfx-pick .cfx-x{justify-self:center;border-color:#58778599;background:none}
body.cfx-on{overflow:hidden}
/* toolbar button next to 「✨ 預覽」 */
.cfx-open .cfx-open-i{color:#e5cf93;margin-right:4px}
@media(max-width:600px){.cfx-pick{padding:10px;gap:6px}.cfx-pick button{font-size:12px;min-height:32px;padding:0 10px}.cfx-tip{font-size:14px}}
body.cfx-on #upload-loading{opacity:0!important;pointer-events:none!important}
.cfx canvas[hidden]{display:none}
.cfx canvas.cfx-gl{width:100%;height:100%}