/* 大螢幕・接後端版增補（底層 stage.css）。v1.1 summary：作答中只顯示已出牌「桌數」，公布後才顯示各桌這題得分與累計。 */
.slotnote { position: absolute; left: 0; right: 0; top: 408px; text-align: center; font-size: 22px; color: rgba(245,234,208,.55); }

/* 左欄：已出牌桌數（卡背一張一桌，出牌就亮起） */
.played { top: 450px; transition: opacity .4s; }
.played.off { visibility: hidden; }
.played .pc { display: inline-block; }
.played .pc.pop { animation: pcpop .5s cubic-bezier(.2,1.6,.4,1); } @keyframes pcpop { 0% { transform: scale(1.5); color: #fff; } }
.played .of { margin-left: 6px; }
.gems { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gems i { width: 34px; height: 52px; opacity: .45; filter: grayscale(.6) brightness(.7); box-shadow: 0 0 0 1px rgba(217,177,92,.5); }
.gems i.on { opacity: 1; filter: none; }
.howto { position: absolute; left: 90px; top: 760px; width: 280px; padding: 16px 10px; text-align: center; font-size: 26px; line-height: 1.55; color: rgba(245,234,208,.92); background: rgba(2,8,5,.82); border-radius: 16px; box-shadow: 0 0 0 1px rgba(217,177,92,.35); }
.howto b { color: #ffe2a0; }

.ansbar { position: absolute; left: 240px; top: 520px; transform: translateX(-50%) scale(.6); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 34px; white-space: nowrap; opacity: 0; pointer-events: none;
  font-size: 44px; color: #ffe7b0; background: rgba(2,8,5,.88); box-shadow: 0 0 0 1px rgba(217,177,92,.5), 0 0 60px rgba(255,214,120,.35); border-radius: 18px; z-index: 4; }
.ansbar span { font-size: 36px; letter-spacing: .3em; color: #d9b15c; }
.ansbar .num { font-size: 120px !important; line-height: 1; text-shadow: 0 0 30px rgba(255,214,120,.6); }
.ansbar em { font: 600 40px "Optima", "Avenir Next", sans-serif; font-style: normal; }
.v-q.revealed .ansbar { animation: ansin .6s .2s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes ansin { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.rule { opacity: 0; } .v-q.revealed .rule { opacity: 1; transition: opacity .6s .8s; }
.v-q.revealed .howto, .v-q.revealed .slotnote, .v-q.revealed .played { opacity: 0; transition: opacity .4s; }
.v-q.sealed .ac { filter: brightness(.75) drop-shadow(0 18px 24px rgba(0,0,0,.75)); }
.timer.low .sec { color: #ffb08a; animation: low .5s infinite alternate; } @keyframes low { to { transform: scale(1.1); } }

/* 逐題加分排行 */
.v-board h2 .num { font-size: 72px; color: #ffe2a0; vertical-align: -6px; }
.bhead { position: absolute; left: 380px; right: 380px; display: grid; grid-template-columns: 120px 1fr 160px 220px; padding: 0 44px; font-size: 22px; letter-spacing: .2em; color: #d9b15c; }
.bhead span:nth-child(3), .bhead span:nth-child(4) { text-align: right; }
.row { animation: deal .55s cubic-bezier(.2,1.2,.4,1) both; }
.row:nth-child(2) { animation-delay: .08s; } .row:nth-child(3) { animation-delay: .16s; } .row:nth-child(4) { animation-delay: .24s; }
.row .dl { text-align: right; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.row.go .dl { opacity: 1; transform: none; }
.row .rk { transition: opacity .3s; }
.row.top { filter: none; } .row.top.go { filter: drop-shadow(0 0 22px rgba(255,214,120,.6)); }
.v-board.tie .row .rk { color: rgba(245,234,208,.4); }
.v-board.dense .row { height: 52px; border-width: 10px; padding: 0 24px; } .v-board.dense .row .rk { font-size: 30px; } .v-board.dense .row .nm { font-size: 28px; }
.v-board.dense .row .dl { font-size: 22px; } .v-board.dense .row .sc { font-size: 32px; }
.bnote { position: absolute; left: 50%; top: 912px; transform: translateX(-50%); white-space: nowrap; padding: 14px 44px; border-radius: 50px; background: rgba(2,8,5,.86); box-shadow: 0 0 0 1px rgba(217,177,92,.4); font-size: 28px; color: #f5ead0; animation: fadein 1s .9s both; }
.bnote b { color: #ffcf96; }

.v-attract .next { left: 50%; right: auto; top: 890px; transform: translateX(-50%); white-space: nowrap; padding: 14px 54px; border-radius: 60px; font-size: 36px; background: rgba(2,8,5,.86); box-shadow: 0 0 0 1px rgba(217,177,92,.4); animation: fadein 1s 1.2s both; }
.v-inter { text-align: center; }
.v-inter h2 { position: absolute; left: 0; right: 0; top: 220px; font-size: 72px; letter-spacing: .25em; color: #ffe7b0; animation: rise 1s .2s both; }
.v-inter h2 .num { font-size: 110px; vertical-align: -12px; color: #ffe2a0; }
.v-inter .deck3 { top: 400px; }
.v-inter .inote { position: absolute; left: 50%; top: 700px; transform: translateX(-50%); white-space: nowrap; padding: 18px 54px; border-radius: 60px; background: rgba(2,8,5,.86); box-shadow: 0 0 0 1px rgba(217,177,92,.4); font-size: 36px; line-height: 1.6; color: #f5ead0; animation: fadein 1s .6s both; }
@keyframes fadein { from { opacity: 0; } }

.tienote { position: absolute; left: 50%; top: 340px; width: 980px; margin-left: -490px; padding: 60px 40px; display: none; text-align: center; border: 30px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 30px stretch; }
.tienote b { display: block; font-size: 64px; letter-spacing: .2em; color: #ffe7b0; }
.tienote > span { display: block; margin-top: 18px; font-size: 32px; line-height: 1.6; color: rgba(245,234,208,.9); }
.tiescores { margin-top: 26px; display: flex; justify-content: center; gap: 60px; }
.tiescores span { display: grid; gap: 4px; } .tiescores b { font-size: 34px; letter-spacing: .1em; color: #f5ead0; } .tiescores i { font-style: normal; font-size: 64px; color: #ffe2a0; }
.v-final.tie .tienote { display: block; animation: deal .6s cubic-bezier(.2,1.2,.4,1) both; }
.pd .nm { font-size: 70px; }

.net { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 70; display: none; padding: 12px 36px; border-radius: 40px; white-space: nowrap; font-size: 24px; color: #ffcf96; background: rgba(2,8,5,.9); box-shadow: 0 0 0 1px #e2a35c; }
.net.show { display: block; }
.kstrip.float { font-size: 12px; }