html, body { height: 100%; overflow: hidden; }
body.display { background: radial-gradient(circle at 30% 0%, #1f2d5c, #0c1330 70%); color: #fff; font-size: 1.5vw; }

#stage { position: absolute; inset: 0 0 9vh 0; padding: 3vh 4vw; display: flex; flex-direction: column; gap: 2.4vh; }
body.noscore #stage { bottom: 0; }
#stage > div { display: flex; flex-direction: column; gap: 2.4vh; }
#stage > .slot-grid { flex: 1; min-height: 0; }
#stage > .pw-card { margin: auto; font-size: 16px; }
#stage > .slot-q { min-height: 0; margin-top: auto; }
#stage > .slot-q ~ :last-child { margin-bottom: auto; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.sec { font-size: 1.3em; font-weight: 700; opacity: .8; letter-spacing: .05em; }
.big-timer { font-size: 3.4em; font-weight: 900; min-width: 2em; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.big-timer.urgent { color: #ff6b6b; }

.slot-q .q-text { font-size: 2.1em; font-weight: 800; line-height: 1.35; }
.slot-q .q-img img { max-height: 30vh; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vh 2vw; }
.opt {
  display: flex; align-items: center; gap: 1vw; min-height: 9vh; font-size: 1.6em; padding: 1.2vh 1.4vw;
  background: rgba(255,255,255,.08); border: .2vw solid rgba(255,255,255,.2); border-radius: 1.2vw;
  transition: background .3s, opacity .3s;
}
.opt b { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.opt.correct { background: #1d9a52; border-color: #7ce8a8; }
.opt.dim { opacity: .45; }
.opt.wrong { background: rgba(217,59,59,.35); border-color: #ff8a8a; }
.opt.wrong span { text-decoration: line-through; }
.opt.hidden { border-style: dashed; }
.opt.hidden span { opacity: .4; }
.opt.chosen { background: rgba(255,213,79,.3); border-color: #ffd54f; }
.opt .who { margin-left: auto; display: flex; gap: .4vw; font-size: .75em; }

.tstats { display: flex; gap: 1vw; justify-content: center; flex-direction: row !important; }
.tstat {
  display: flex; gap: .6vw; align-items: center; justify-content: center; min-width: 11vw;
  background: var(--hc); color: var(--hf); border-radius: 1vw; padding: .8vh 1.2vw; font-size: 1.2em; font-weight: 700; opacity: .5;
}
.tstat .nm { font-size: 1.3em; font-weight: 900; }
.tstat.done, .tstat.ok, .tstat.bad { opacity: 1; }
.tstat.bad { filter: saturate(.35) brightness(.75); }
.tstat .mark { font-size: 1.2em; }

.banner { align-self: center; font-size: 2.6em; font-weight: 900; padding: 1.2vh 3vw; border-radius: 1.4vw; background: rgba(255,255,255,.12); display: flex; gap: 1vw; align-items: center; }
.banner[style] { background: var(--hc); color: var(--hf); animation: pop .35s ease-out; }
.banner.ok { background: #1d9a52; color: #fff; animation: pop .35s ease-out; }
.banner.bad { background: #b83232; color: #fff; animation: shake .4s; }
.banner .chip { font-size: 1em; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-1vw); } 75% { transform: translateX(1vw); } }

/* 畫圖 */
.draw-top .prompt { font-size: 1.8em; font-weight: 800; margin-top: .3vh; }
.draw-top .st { margin-left: auto; font-size: 1.4em; opacity: .8; }
.slot-grid.dgrid { display: grid !important; gap: 1.5vh 1.5vw; }
.dname { font-size: 1.2em; }

/* 標題 */
.title-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7vh; }
.title-screen h1 { font-size: 5em; margin: 0; letter-spacing: .12em; text-align: center; }
.houses { display: flex; gap: 2vw; }
.houses .chip { font-size: 3.4em; width: 1.9em; height: 1.9em; border-radius: 1vw; }

/* 分數榜 */
.board-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.board-wrap h2 { text-align: center; font-size: 3em; margin: 0 0 2vh; }
.board { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3vw; min-height: 0; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1vh; width: 10vw; height: 100%; }
.bar-col .bar { width: 100%; background: var(--hc); border-radius: 1vw 1vw 0 0; transition: height .8s; flex: none; max-height: 60%; }
.bar-col .val { font-size: 2.6em; font-weight: 900; }
.bar-col .rank { font-size: 1.1em; opacity: .75; }
.bar-col .nm { font-size: 2.4em; font-weight: 900; color: var(--hc); }

/* 底部分數 */
#scorebar { position: absolute; left: 0; right: 0; bottom: 0; height: 9vh; display: flex; }
body.noscore #scorebar { display: none; }
#scorebar .sb { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.2vw; background: var(--hc); color: var(--hf); font-size: 1.9em; font-weight: 900; }
#scorebar .sb b { font-variant-numeric: tabular-nums; }

/* 技能卡 */
#scorebar .sb .fx { font-style: normal; font-size: .7em; margin-left: .3vw; }

/* 逐步揭圖 */
.prompt { font-size: 1.8em; font-weight: 800; margin-top: .3vh; }
.reveal-box { flex: 1; min-height: 0; overflow: hidden; border-radius: 1.2vw; background: #000; display: grid; place-items: center; }
#stage > .slot-img { flex: 1; min-height: 0; }
#stage > .slot-img .reveal-box { height: 100%; }
.reveal-box img { max-width: 100%; max-height: 100%; transition: filter .15s linear, transform .15s linear; }
.reveal-info { text-align: right; }
.rv-pts { font-size: 3.4em; font-weight: 900; color: #ffd54f; line-height: 1; }
.rv-left { font-size: 1.3em; opacity: .85; }

/* 估數題數線 */
.numline { position: relative; height: 22vh; margin: 2vh 3vw; }
.nl-axis { position: absolute; left: 0; right: 0; top: 60%; height: .5vh; background: rgba(255,255,255,.5); border-radius: 1vh; }
.nl-ans { position: absolute; top: 0; bottom: 0; width: .4vw; margin-left: -.2vw; background: #7ce8a8; animation: grow .6s ease-out; }
.nl-ans b { position: absolute; top: -1vh; left: 50%; transform: translate(-50%, -100%); background: #1d9a52; padding: .3vh 1vw; border-radius: .8vw; font-size: 1.6em; white-space: nowrap; }
.nl-mark { position: absolute; top: calc(60% - 1.2em - var(--lane) * 2.6em); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; animation: drop .5s ease-out both; }
.nl-mark .chip { font-size: 1.4em; }
.nl-mark small { font-size: 1em; opacity: .9; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes drop { from { transform: translate(-50%, -4vh); opacity: 0; } }

/* 押注題 */
.wager-hero { text-align: center; display: flex; flex-direction: column; gap: 2vh; align-items: center; }
.wh-ic { font-size: 7em; }
.wh-cat { font-size: 4em; font-weight: 900; color: #ffd54f; }
.wh-sub { font-size: 1.5em; opacity: .85; }

/* 技能卡時間倒數 */
.cardtime-bar { position: fixed; top: 2.5vh; left: 50%; transform: translateX(-50%); background: #ffd54f; color: #3a2c00; font-size: 2em; font-weight: 900; padding: .8vh 2.4vw; border-radius: 99px; z-index: 10; box-shadow: 0 1vh 3vh rgba(0,0,0,.35); animation: pop .35s ease-out; }
.cardtime-bar b { font-variant-numeric: tabular-nums; }

/* 加減分動畫（獨立圖層，位置由 JS 按目標元素設定）*/
#scorebar .sb .fxs .fx { font-size: .7em; margin-left: .3vw; }
#popLayer { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.pop {
  position: fixed; margin-top: calc(-1vh - var(--stack, 0) * 6vh);
  font-size: clamp(1.6rem, 2.6vw, 3.4rem); font-weight: 900; line-height: 1;
  padding: .8vh 1.2vw; border-radius: 99px; background: #fff; white-space: nowrap;
  box-shadow: 0 1vh 2.5vh rgba(0,0,0,.35); animation: popUp 2.4s cubic-bezier(.2,.9,.3,1) forwards;
}
.pop.small { font-size: clamp(1.2rem, 1.8vw, 2.4rem); }
.pop.pos { color: #1d9a52; border: .35vh solid #1d9a52; }
.pop.neg { color: #d93b3b; border: .35vh solid #d93b3b; }
@keyframes popUp {
  0%   { opacity: 0; transform: translate(-50%, calc(-100% + 3vh)) scale(.5); }
  14%  { opacity: 1; transform: translate(-50%, calc(-100% - 1vh)) scale(1.2); }
  26%  { transform: translate(-50%, calc(-100% - 1.5vh)) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, calc(-100% - 5vh)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 8vh)) scale(.95); }
}
.bump { animation: bump .6s ease-out; }
@keyframes bump { 30% { filter: brightness(1.45); transform: scale(1.06); } }

/* 開放題 */
.banner.big-open { font-size: 3.4em; padding: 2vh 4vw; }
.banner.waiting { opacity: .8; animation: pulseOpacity 1.4s infinite; }
@keyframes pulseOpacity { 50% { opacity: .45; } }

/* 技能卡：頂部中間一排（題號同倒數之間），唔遮題目；新卡同時放大彈出 */
.card-log { position: fixed; top: 1.6vh; left: 50%; transform: translateX(-50%); z-index: 12; max-width: 56vw;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .8vh .6vw; pointer-events: none; }
.cl-row { display: flex; align-items: center; gap: .4vw; padding: .5vh .7vw; border-radius: 99px; font-size: .95em;
  background: rgba(255,255,255,.1); border: .12vw solid rgba(255,255,255,.2); transition: transform .4s, font-size .4s, box-shadow .4s; }
.cl-row.attack { background: rgba(229,57,53,.28); }
.cl-row.defense { background: rgba(30,136,229,.28); }
.cl-row.boost { background: rgba(251,192,45,.25); }
.cl-row .chip { font-size: .95em; }
.cl-card { font-weight: 800; white-space: nowrap; }
.cl-arrow { opacity: .7; }
.cl-mirror { color: #ff8a8a; font-weight: 900; }
/* 啱啱用嘅卡：放大、發光、彈入 */
.cl-row.fresh { font-size: 1.5em; background: #fff; color: #1c1f26; border-color: #ffd54f; box-shadow: 0 0 0 .3vw #ffd54f, 0 1vh 3vh rgba(255,213,79,.55);
  animation: cardIn .6s cubic-bezier(.2,1.6,.4,1), glow 1.2s ease-in-out .6s infinite alternate; }
.cl-row.fresh.attack { box-shadow: 0 0 0 .3vw #ff6b6b, 0 1vh 3vh rgba(255,107,107,.55); border-color: #ff6b6b; }
.cl-row.fresh.defense { box-shadow: 0 0 0 .3vw #64b5f6, 0 1vh 3vh rgba(100,181,246,.55); border-color: #64b5f6; }
.cl-row.fresh.reflected { animation: cardIn .6s cubic-bezier(.2,1.6,.4,1), shake .45s .6s 3; }
.cl-row.fresh .cl-mirror { color: #d93b3b; }
@keyframes cardIn { from { transform: translateY(-4vh) scale(.4); opacity: 0; } }
@keyframes glow { to { filter: brightness(1.12); transform: scale(1.04); } }

/* 押注題：每社押注卡 */
.bets { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 1vw; }
.bet-card { background: var(--hc); color: var(--hf); border-radius: 1.2vw; padding: 1.2vh .8vw; text-align: center; display: flex; flex-direction: column; gap: .4vh; transition: filter .3s, opacity .3s; }
.bet-card.wait { opacity: .5; }
.bet-card.bad { filter: saturate(.35) brightness(.7); }
.bet-card.ok { box-shadow: 0 0 0 .35vw #7ce8a8; }
.bc-name { font-size: 1.5em; font-weight: 900; }
.bc-amt { font-size: 3em; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; animation: pop .4s ease-out; }
.bc-amt small { font-size: .38em; font-weight: 700; margin: 0 .2em; opacity: .85; }
.bc-sub { font-size: 1.1em; font-weight: 700; opacity: .95; }
.wh-label { font-size: 1.6em; opacity: .8; letter-spacing: .3em; margin-bottom: -1vh; }