/* 大螢幕 1920×1080。C 典藏卡牌：卡框、卡背、封蠟、計時環為本案生成元件；背景為本輪生成的典禮大廳。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; height: 100%; overflow: hidden; }
body { color: #f5ead0; font-family: "Songti TC", "Noto Serif TC", serif; -webkit-font-smoothing: antialiased; }
.num { font-family: "Didot", "Bodoni 72", serif; font-weight: 700; }
.fit { position: absolute; inset: 0; overflow: hidden; }
.screen { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; overflow: clip; transform: translate(-50%, -50%); transform-origin: center; background: #020604; isolation: isolate; }
.bg { position: absolute; inset: 0; z-index: -2; background: url(assets/gen/stage-bg.jpg) center / cover, url(assets/gen/c-table.jpg) center / cover; animation: bgin 1.4s 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: 60; }
.wm-corner { position: absolute; left: 48px; top: 36px; width: 300px; z-index: 5; filter: drop-shadow(0 4px 10px #000); }
.tag { position: absolute; right: 48px; top: 44px; font-size: 20px; color: rgba(245,234,208,.55); z-index: 5; }
.v { position: absolute; inset: 0; display: none; }
.v.on { display: block; animation: vin .6s cubic-bezier(.2,1,.3,1) both; }
@keyframes vin { from { opacity: 0; transform: scale(1.03); } }
.fr { border: 22px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 22px stretch; }

/* attract */
.v-attract { text-align: center; }
.wm-big { position: absolute; left: 50%; top: 230px; width: 1100px; margin-left: -550px; filter: drop-shadow(0 8px 24px #000); animation: rise 1.6s .3s cubic-bezier(.2,.9,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } }
.sub { position: absolute; left: 0; right: 0; top: 440px; font-size: 54px; letter-spacing: .5em; color: #ffe7b0; animation: rise 1s 1s both; }
.deck3 { position: absolute; left: 50%; top: 560px; width: 180px; height: 270px; margin-left: -90px; }
.deck3 i { position: absolute; inset: 0; border-radius: 12px; background: url(assets/gen/c-card-back.png) center / 100% 100%; box-shadow: 0 18px 40px rgba(0,0,0,.8); }
.deck3 i:nth-child(1) { transform: translate(-160px, 20px) rotate(-12deg); } .deck3 i:nth-child(3) { transform: translate(160px, 20px) rotate(12deg); }
.deck3 i:nth-child(2) { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 18px 40px rgba(0,0,0,.8), 0 0 60px rgba(255,205,110,.55); } }
.next { position: absolute; left: 0; right: 0; top: 880px; font-size: 40px; letter-spacing: .2em; }
.next .num { font-size: 60px; color: #ffe2a0; }

/* question */
.qhead { position: absolute; left: 0; right: 0; top: 120px; text-align: center; font-size: 34px; letter-spacing: .3em; color: #d9b15c; }
.qhead .num { font-size: 46px; color: #ffe2a0; }
.qcard { position: absolute; left: 260px; right: 260px; top: 190px; height: 210px; display: grid; place-items: center; padding: 0 60px; border: 30px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 30px stretch; filter: drop-shadow(0 18px 30px rgba(0,0,0,.75)); }
.v-q.on .qcard { animation: qin .6s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes qin { from { transform: scaleY(0); opacity: 0; } }
.qcard p { font-size: 50px; font-weight: 700; line-height: 1.4; text-align: center; color: #fff3d6; }
.answers { position: absolute; left: 0; right: 0; top: 470px; height: 380px; display: flex; justify-content: center; gap: 46px; perspective: 1400px; }
.ac { position: relative; width: 250px; height: 375px; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 26px 10px; border: 26px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 26px stretch; filter: drop-shadow(0 18px 24px rgba(0,0,0,.75)); transition: transform .6s cubic-bezier(.2,1.2,.4,1), filter .5s, opacity .5s; }
.v-q.on .ac { animation: deal .6s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-300px) rotate(-10deg) scale(.6); } }
.ac .L { font: 700 130px/1 "Didot", serif; background: linear-gradient(180deg, #fff6da, #c8963e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac .w { align-self: center; font: 600 34px/1.2 "Optima", "Avenir Next", sans-serif; }
.ac.win { transform: translateY(-40px) scale(1.12); filter: drop-shadow(0 0 50px rgba(255,220,130,1)) drop-shadow(0 18px 24px rgba(0,0,0,.75)); z-index: 2; }
.ac.lose { opacity: .3; filter: grayscale(.8); }
.timer { position: absolute; right: 110px; top: 520px; width: 220px; height: 220px; }
.timer img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask: radial-gradient(closest-side, #000 90%, transparent 99%); mask: radial-gradient(closest-side, #000 90%, transparent 99%); }
.timer .arc { position: absolute; inset: 47px; border-radius: 50%; background: conic-gradient(rgba(255,214,120,.95) calc(var(--p, 100) * 1%), rgba(0,0,0,.55) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }
.timer .sec { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; color: #fff0c4; }
.played { position: absolute; left: 100px; top: 470px; width: 260px; padding: 18px 10px 22px; text-align: center; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); }
.played small { display: block; font-size: 26px; letter-spacing: .3em; color: #d9b15c; }
.played .pc { font-size: 84px; color: #ffe2a0; } .played span { font-size: 28px; }
.gems { margin-top: 14px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.gems i { height: 52px; border-radius: 4px; background: url(assets/gen/c-card-back.png) center / 100% 100%; opacity: .25; transition: opacity .3s, transform .3s; }
.gems i.on { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 14px rgba(255,210,110,.7); }

/* seal */
.seal { position: absolute; left: 50%; top: 50%; z-index: 50; width: 420px; height: 420px; margin: -210px 0 0 -210px; display: none; }
.seal img { width: 100%; height: 100%; -webkit-mask: radial-gradient(circle, #000 69%, transparent 71%); mask: radial-gradient(circle, #000 69%, transparent 71%); filter: drop-shadow(0 20px 30px rgba(0,0,0,.8)); }
.seal b { position: absolute; left: -200px; right: -200px; bottom: -110px; text-align: center; font-size: 80px; letter-spacing: .4em; color: #ffe7b0; text-shadow: 0 4px 20px #000; }
.seal.go { display: block; animation: seal .4s cubic-bezier(.6,0,.8,.6) both; }
@keyframes seal { from { opacity: 0; transform: scale(3) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(-10deg); } }

/* reveal */
.ans-line { position: absolute; left: 0; right: 0; top: 140px; text-align: center; font-size: 58px; letter-spacing: .1em; color: #ffe7b0; }
.ans-line .num { font-size: 96px; vertical-align: -10px; }
.gains { position: absolute; left: 260px; right: 260px; top: 300px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.gain { height: 170px; display: grid; place-items: center; text-align: center; border: 18px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 18px stretch; animation: deal .5s cubic-bezier(.2,1.2,.4,1) both; }
.gain b { display: block; font-size: 32px; } .gain .num { font-size: 56px; color: #ffe2a0; } .gain small { display: block; font-size: 22px; color: rgba(245,234,208,.75); }
.gain.zero .num { color: rgba(245,234,208,.45); }
.rule { position: absolute; left: 50%; top: 884px; transform: translateX(-50%); white-space: nowrap; padding: 12px 34px; border-radius: 40px; background: rgba(2,8,5,.82); box-shadow: 0 0 0 1px rgba(217,177,92,.35); text-align: center; font-size: 26px; letter-spacing: .04em; color: #f5ead0; }

/* board */
.v-board h2, .v-final h2 { position: absolute; left: 0; right: 0; top: 120px; text-align: center; font-size: 56px; letter-spacing: .3em; color: #ffe7b0; }
.rows { position: absolute; left: 380px; right: 380px; top: 230px; height: 760px; }
.row { position: absolute; left: 0; right: 0; height: 84px; display: grid; grid-template-columns: 120px 1fr 160px 220px; align-items: center; padding: 0 30px; border: 14px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 14px stretch; transition: top .9s cubic-bezier(.4,0,.2,1); }
.row .rk { font-size: 48px; color: #d9b15c; } .row .nm { font-size: 40px; font-weight: 700; }
.row .dl { font-size: 28px; color: #bfe8a8; } .row .dl.z { color: rgba(245,234,208,.4); }
.row .sc { text-align: right; font-size: 50px; color: #fff0c4; }
.row.top { filter: drop-shadow(0 0 22px rgba(255,214,120,.6)); }

/* final */
.podium { position: absolute; left: 0; right: 0; top: 260px; height: 700px; perspective: 1600px; }
.pd { position: absolute; width: 380px; height: 560px; opacity: 0; }
.pd .in, .lcard .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,0,.2,1); transform: rotateY(180deg); }
.pd .f, .lcard .f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; }
.pd .back, .lcard .back { background: url(assets/gen/c-card-back.png) center / 100% 100%; transform: rotateY(180deg); }
.pd .front, .lcard .front { display: grid; place-content: center; gap: 16px; text-align: center; border: 30px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 30px stretch; }
.pd .rk { font-size: 40px; letter-spacing: .3em; color: #d9b15c; } .pd .nm { font-size: 76px; font-weight: 900; color: #fff3d6; } .pd .sc { font-size: 92px; color: #ffe2a0; }
.pd.in-play { animation: pdin .7s cubic-bezier(.2,1.2,.4,1) forwards; }
.pd.open .in { transform: none; }
@keyframes pdin { from { opacity: 0; transform: translateY(300px) rotate(8deg); } to { opacity: 1; transform: none; } }
.pd.p1 { left: 770px; top: -30px; } .pd.p1 .front { box-shadow: 0 0 80px rgba(255,220,140,.8) inset; }
.pd.p2 { left: 340px; top: 60px; } .pd.p3 { left: 1200px; top: 60px; }

/* lottery */
.v-lottery { text-align: center; }
.lcard { position: absolute; left: 50%; top: 170px; width: 340px; height: 500px; margin-left: -170px; perspective: 1400px; }
.lcard .front b { font-size: 54px; color: #ffe7b0; } .lcard .front span { font-size: 34px; line-height: 1.5; }
.lcard.open .in { transform: none; }
.v-lottery h2 { position: absolute; left: 0; right: 0; top: 730px; font-size: 64px; letter-spacing: .2em; color: #ffe7b0; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { text-shadow: 0 0 30px rgba(255,214,120,.8); } }
.v-lottery p { position: absolute; left: 50%; top: 850px; transform: translateX(-50%); white-space: nowrap; padding: 10px 30px; border-radius: 40px; background: rgba(2,8,5,.82); font-size: 26px; color: rgba(245,234,208,.85); }
.pd.p1.open { filter: drop-shadow(0 0 46px rgba(255,214,120,.75)); }

.demo { position: fixed; left: 12px; bottom: 10px; z-index: 99; display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; font-family: "PingFang TC", sans-serif; font-size: 13px; color: #9c927c; }
.demo b { width: 100%; } .demo i { display: none; }
.demo button { padding: 6px 9px; border: 1px solid #3a3326; border-radius: 3px; color: #d8cdb2; background: rgba(18,16,12,.9); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }