/* Owner 2026-10-19 修訂（底層 stage.css、stage-live.css）
   1. 角色卡排行：每題公布後與最終共用。前三名（含同分）是 C 典藏卡，先蓋牌入場、依名次 3→2→1 翻開，卡面是那一桌每位來賓自己選的英雄角色。
   2. 封牌：金綠鍛壓章（齒輪邊＋祖母綠琺瑯＋封字浮雕），從上方壓下、齒輪轉一格鎖住，之後留在計時環的位置。 */

/* ---------- 角色卡排行 ---------- */
.v-rank .rh { position: absolute; left: 0; right: 0; top: 104px; text-align: center; font-size: 60px; letter-spacing: .24em; color: #ffe7b0; text-shadow: 0 4px 24px #000; }
.v-rank .rh .num { font-size: 74px; letter-spacing: 0; margin: 0 .12em; color: #ffe2a0; vertical-align: -4px; }
.v-rank.on .rh { animation: rise .9s .1s cubic-bezier(.2,.9,.3,1) both; }
.v-rank .glory { position: absolute; left: 960px; top: 470px; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,130,.30), transparent 34%), repeating-conic-gradient(rgba(255,236,180,.13) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 56%); mask: radial-gradient(circle, #000 10%, transparent 56%); }
.v-rank.crown .glory { animation: glory 14s linear infinite, fadein 1s forwards; }
@keyframes glory { to { transform: rotate(360deg); } }

.podium2 { position: absolute; left: 960px; top: 196px; height: 600px; transform-origin: 50% 0; }
.pk { position: absolute; opacity: 0; perspective: 1700px; }
.pk.r1 { width: 400px; height: 570px; z-index: 3; } .pk.r2 { width: 350px; height: 510px; z-index: 2; } .pk.r3 { width: 330px; height: 480px; z-index: 1; }
.pk .in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 1s cubic-bezier(.35,0,.15,1); }
.pk.open .in { transform: rotateY(0deg); }
.pk .f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; }
.pk .back { background: url(assets/gen/c-card-back.png) center / 100% 100%; transform: rotateY(180deg); box-shadow: 0 26px 50px rgba(0,0,0,.85); }
.pk .front { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; justify-items: center; padding: 4px 2px 8px; overflow: hidden;
  border: 24px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 24px stretch; box-shadow: 0 26px 50px rgba(0,0,0,.85); }
.pk .front::after { content: ""; position: absolute; inset: -24px; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255,248,220,.5) 50%, transparent 64%); background-size: 260% 100%; background-position: 130% 0; }
.pk.open .front::after { animation: foil 1.1s .55s ease-out both; } @keyframes foil { to { background-position: -40% 0; } }
.pk .rk { font-size: 32px; letter-spacing: .3em; padding-left: .3em; color: #d9b15c; white-space: nowrap; }
.pk .rk .num { font-size: 44px; letter-spacing: 0; color: #ffe2a0; }
.pk .rk i { display: inline-block; margin-left: 6px; padding: 3px 12px 4px; border-radius: 20px; font-style: normal; font-size: 21px; letter-spacing: .12em; vertical-align: 7px; color: #1c1406; background: linear-gradient(#ffe7a8, #c9963e); }
.pk .faces { display: flex; gap: 6px; width: 100%; height: auto; min-height: 0; align-self: stretch; margin: 8px 0 16px; }
.pk .fc { position: relative; flex: 1 1 0; min-width: 0; border-radius: 6px; overflow: hidden; background: #06130d; box-shadow: 0 0 0 2px rgba(217,177,92,.8), 0 8px 18px rgba(0,0,0,.6); }
.pk .fc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.pk .faces.n1 .fc { flex: 0 1 62%; } .pk .faces.n1 { justify-content: center; }
.pk .faces.n2 .fc { flex: 0 1 46%; } .pk .faces.n2 { justify-content: center; }
.pk .fc em { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 2px 6px; font-style: normal; font-size: 19px; letter-spacing: .08em; text-align: center; white-space: nowrap; overflow: hidden; color: #fff1cc; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.pk .faces.n4 .fc em, .pk .faces.n5 .fc em, .pk .faces.n6 .fc em { font-size: 15px; letter-spacing: 0; }
.pk .fc.none { background: url(assets/gen/c-card-back.png) center / cover; }
.pk .fc.none b { position: absolute; inset: 0; background: rgba(2,10,6,.5); }
.pk .fc.none em { color: rgba(245,234,208,.85); }
.pk .nm { font-size: 44px; font-weight: 900; line-height: 1.1; color: #fff3d6; }
.pk .sc { font-size: 74px; line-height: 1.05; color: #ffe2a0; text-shadow: 0 0 24px rgba(255,214,120,.45); }
.pk.r1 .sc { font-size: 86px; }
.pk .dl { margin-top: 2px; font-size: 22px; color: #bfe8a8; } .pk .dl .num { font-size: 30px; } .pk .dl.z { color: rgba(245,234,208,.45); }
.pk.in { animation: pkin .75s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes pkin { from { opacity: 0; transform: translateY(300px) rotate(7deg) scale(.9); } to { opacity: 1; transform: none; } }
.pk.open { filter: drop-shadow(0 0 22px rgba(255,214,120,.35)); }
.pk.r1.open { filter: drop-shadow(0 0 54px rgba(255,214,120,.85)); }
.pk.r1.open .front { animation: lift .9s .3s cubic-bezier(.2,1.3,.4,1) both; } @keyframes lift { 50% { transform: translateY(-14px); } }

.rest2 { position: absolute; left: 120px; right: 120px; top: 812px; display: flex; justify-content: center; gap: 22px; }
.rc { width: 230px; height: 158px; display: grid; place-content: center; gap: 2px; text-align: center; opacity: 0; border: 16px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 16px stretch; }
.rc.in { animation: pkin .6s cubic-bezier(.2,1.2,.4,1) both; }
.rc b { font-size: 24px; letter-spacing: .14em; color: #d9b15c; } .rc span { font-size: 30px; font-weight: 900; }
.rc i { font-style: normal; font-size: 40px; line-height: 1; color: #ffe2a0; }
.rc em { font-style: normal; font-size: 20px; color: rgba(245,234,208,.55); } .rc em.up { color: #b8f09a; } .rc em.dn { color: #ff9a7a; }
.rnote { position: absolute; left: 50%; top: 1000px; transform: translateX(-50%); white-space: nowrap; padding: 12px 40px; border-radius: 50px; background: rgba(2,8,5,.86); box-shadow: 0 0 0 1px rgba(217,177,92,.4); font-size: 26px; color: #f5ead0; animation: fadein 1s 1s both; }
.v-rank.norest .rnote { top: 850px; }
.rnote b { color: #ffcf96; }
.v-rank.fin .rh { color: #fff0c4; text-shadow: 0 0 40px rgba(255,214,120,.6), 0 4px 24px #000; }

/* ---------- 封牌：金綠鍛壓章 ---------- */
.seal { width: 460px; height: 460px; margin: -250px 0 0 -230px; }
.seal img { position: relative; z-index: 1; -webkit-mask: none; mask: none; filter: drop-shadow(0 26px 40px rgba(0,0,0,.85)); }
.seal .ring { position: absolute; inset: -30px; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 7px rgba(255,224,150,.95), 0 0 70px rgba(255,214,120,.85), inset 0 0 40px rgba(255,214,120,.5); }
.seal b { z-index: 2; left: 50%; right: auto; bottom: -92px; transform: translateX(-50%); white-space: nowrap; padding: 4px 34px 8px calc(34px + .5em); font-size: 54px; letter-spacing: .5em; color: #ffe7b0; text-shadow: 0 0 24px rgba(255,214,120,.55); background: rgba(2,8,5,.86); border-radius: 60px; box-shadow: 0 0 0 1px rgba(217,177,92,.55), 0 10px 30px rgba(0,0,0,.7); opacity: 0; }
.seal.go { display: block; animation: stamp .62s cubic-bezier(.55,0,.75,.45) both; }
@keyframes stamp { 0% { opacity: 0; transform: translateY(-180px) scale(1.9) rotate(-26deg); filter: blur(5px); }
  60% { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); filter: none; }
  72% { transform: scale(1.05, .93) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.seal.go img { animation: lock .55s .6s cubic-bezier(.2,1.7,.4,1) both; } @keyframes lock { from { transform: rotate(-15deg); } to { transform: rotate(0deg); } }
.seal.go .ring { animation: shock .9s .38s ease-out both; } @keyframes shock { 0% { opacity: .95; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.8); } }
.seal.go b { animation: fadein .4s .6s both; opacity: 1; }
.seal.out { display: block; animation: sealout .45s cubic-bezier(.5,0,.8,.4) forwards; }
.seal.out b { opacity: 1; }
@keyframes sealout { from { opacity: 1; transform: rotate(-8deg); } to { opacity: .2; transform: translate(740px, 110px) scale(.5) rotate(0deg); } }   /* 飛向計時環（中心 1700,630） */
/* 封牌後章留在計時環上 */
.timer::after { content: ""; position: absolute; inset: -8px; background: url(assets/gen/c-seal.png) center / contain no-repeat; opacity: 0; transform: scale(1.6); transition: opacity .3s, transform .35s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 10px 18px rgba(0,0,0,.8)); }
.v-q.sealed .timer::after { opacity: 1; transform: none; }
.v-q.sealed .timer img, .v-q.sealed .timer .arc, .v-q.sealed .timer .sec { opacity: 0; transition: opacity .3s; }