/* ============================================================================
   game-theme.css — 遊戲顯示風格包：單一主題來源（three display style packs）
   ============================================================================
   加新主題 = 加一個 body[data-style="<id>"] 顏色區塊 + 12 張背景圖照
   bg-<id>-<category>.jpg 命名 + 在 STYLE_PACKS 註冊（Task 2）。

   本檔內容：
   1) 三套主題色票變數（petal-pearl 預設 :root／champagne-theatre／paper-garden），
      變數名沿用視覺 demo（game-display-visual-demo_2026-07-02/game-visual-demo.html
      行 9–73）：--bg,--bg2,--text,--sub,--gold,--gold2,--silver,--silver2,
      --bronze,--bronze2,--opt1..4,--tile-bg,--tile-border,--warm-glow,
      --medal-ink,--delta-up,--delta-down,--delta-flat,--ring-track,--spot-dim,
      --note-bg。供之後逐款遊戲落地頁（Task 2 之後）讀取。
   2) host.html／play.html 既有的舊版 token 系統（--pink,--pink-d,--ink,--bg,
      --card,--line,--sage,--red,--blue,--yellow,--green）之 :root 基準值＋
      三套 body[data-style] 變數覆寫 —— 這是目前主持/賓客頁實際算圖所用的變數，
      兩頁共用同一組數值（已核對逐字相同），故合併成單一份，維持零視覺差異。
      ⚠️ 只搬「變數宣告」本身；耦合在同一個 body[data-style] 選擇器規則裡的
      非變數樣式（如 background-color:var(--bg)）與各自頁面才有的細項選擇器
      覆寫（.screen/.brandbar/.muted/.pill/.qbar/input/.bcell/button.primary 等，
      host.html 與 play.html 對同一 class 名稱有不同、互斥的規則）刻意保留在
      host.html／play.html 各自的內聯 <style> 裡 ——因為兩頁的 .screen、.muted、
      button.primary……等 class 名稱重複但語意不同，搬進共用檔會讓其中一頁的
      規則「外溢」污染到另一頁（例如 play.html 的 .muted 覆寫會意外套用到
      host.html 也有的 .muted），是真正的視覺回歸風險，不可共用。
   3) 共用 @keyframes（pop-in、fall、gold-enter、card-spotlight、fx-pulse、
      slot-win-pop、n-latest-pop、bnum-burst、lotto-drop、bg-cur-glow、
      lotto-float、win-tag-pop），fx 系列吃 var(--pink) 等主題變數自動配色。
   ============================================================================ */

/* ── 1) 視覺 demo 主題變數（新畫面系統；沿用 demo 命名） ───────────────────── */

/* 珍珠花瓣 petal-pearl（預設）——依正式 stylepacks tokens 重新配色：
   珍珠白底＋玫瑰粉（accent #c86f82）＋深可可字（ink #302a2c），不再是仿 Kahoot 的深紫底 */
:root {
  --bg: #fff6f8;
  --bg2: #f6e1e8;
  --gold: #e3b04b;
  --silver: #d5cfc6; /* 暖調珍珠銀（冷藍銀在暖粉底上突兀） */
  --bronze: #d99a6c;
  --text: #302a2c;
  --sub: #9b8585;
  --tile-bg: #ffffff;
  --tile-border: rgba(200,111,130,0.35);
  --warm-glow: 255,226,210;
  --opt1: #bb4d60; --opt2: #5b7fa6; --opt3: #b98a3c; --opt4: #7f9877; /* 玫瑰紅/霧藍/暖金/鼠尾草綠（成功色沿用官方 #7f9877 系） */
  --medal-ink: #4a2f33;
  --gold2: #cf9a33; --silver2: #bab2a5; --bronze2: #bf7f4f; /* 頒獎柱漸層第二色 */
  --spot-dim: 74,48,56; /* 聚光燈黑幕底色（淺色底＝玫瑰暗影；深色底風格各自覆寫近黑） */
  --delta-up: #5f8f5f; --delta-down: #d16a7c; --delta-flat: rgba(48,42,44,0.35); /* 排行榜升降箭頭 */
  --ring-track: #f0dde2; /* 倒數圈剩餘軌道色 */
  --note-bg: rgba(200,111,130,0.08);
}
/* 香檳劇院 champagne-theatre（重新配色：劇院暗夜底＋香檳金＋一點酒紅絨幕點綴） */
body[data-style="champagne-theatre"] {
  --bg: #170f0c;
  --bg2: #2a1a14;
  --gold: #e6b566;
  --silver: #cfc3ac;
  --bronze: #b98a52;
  --text: #f7e9d2;
  --sub: #c9a877;
  --tile-bg: rgba(230,181,102,0.14);
  --tile-border: rgba(230,181,102,0.4);
  --warm-glow: 255,214,140;
  --opt1: #8c3a3a; --opt2: #3a5a63; --opt3: #8a6a35; --opt4: #3d5a3f; /* 沉一點的劇院色調取代原本亮色 */
  --medal-ink: #3a2410;
  --gold2: #d9a63d; --silver2: #a9b0b8; --bronze2: #b96a3d;
  --spot-dim: 4,2,12; /* 深色底＝近黑聚光燈黑幕 */
  --delta-up: #c7b873; --delta-down: #c96a5d; --delta-flat: rgba(247,233,210,0.35);
  --ring-track: rgba(230,181,102,0.18);
  --note-bg: rgba(255,255,255,0.06);
}
/* 紙藝花園 paper-garden（唯一的淺色底風格：米白紙感＋珊瑚橘＋苔綠，正式 tokens 為底延伸）
   設計跟香檳劇院同一套（QR 候場牆／聚光燈頒獎台／手機畫面），只換色票；
   淺色底的聚光燈黑幕改成暖褐「紙影」（--spot-dim），不能用近黑否則像停電。 */
body[data-style="paper-garden"] {
  --bg: #fbf3e4;
  --bg2: #f0dfc4;
  --gold: #e0a63c;
  --silver: #cfc8b8;
  --bronze: #d68a58;
  --gold2: #c88f2a; --silver2: #b3ab97; --bronze2: #bd7241;
  --text: #453d31;
  --sub: #8a7c66;
  --tile-bg: #fffdf5;
  --tile-border: rgba(228,119,106,0.45);
  --warm-glow: 255,222,158;
  --spot-dim: 74,58,40;
  --opt1: #cf6657; --opt2: #5f7d94; --opt3: #c2913a; --opt4: #71935f; /* 紙藝手作色：珊瑚紅/灰藍/芥末金/苔綠 */
  --medal-ink: #4a3014;
  --delta-up: #5d8f4c; --delta-down: #cf5b4c; --delta-flat: rgba(69,61,49,0.35);
  --ring-track: #e9dcc0;
}
body[data-style="paper-garden"] .name-tile { box-shadow: 0 3px 10px rgba(90,70,40,0.14); }
body[data-style="paper-garden"] .name-tile.funny { background: #fff3d2; }
body[data-style="paper-garden"] .qr-card { box-shadow: 0 10px 30px rgba(90,70,40,0.22); border: 1px solid rgba(228,119,106,0.3); }
body[data-style="paper-garden"] .note { background: rgba(228,119,106,0.09); }
body[data-style="paper-garden"] .phone-screen { background: var(--bg); }

/* ── 2) host.html／play.html 現行舊版 token 系統（純變數宣告，從內聯搬移） ─────
   host.html 原本有兩個 :root（行 8–9 與 231 皆定義 --pink/--ink/--bg/--card 等，
   231 的 PETAL-01C 白桃商用版完全覆寫 8–9 的舊值→8–9 是死值，故不搬、直接刪）；
   play.html 同理（65 覆寫 8–9）。這裡搬移的是「實際生效」的 231／65 那組基準值
   （兩頁逐字核對數值相同，合併成一份）。host.html 多帶 --pink-d/--sage
   （play.html 不用，留著也無副作用）。 */

/* --red/--blue/--yellow/--green 為 host.html／play.html 舊版答題選項四色 token
   （.opt.c0..c3／.pbar.c0..c3／拉霸球／拔河隊色沿用至今），Task 8 起改成直接
   map 到本檔 1) 節三主題的 --opt1..4（c0→opt1、c1→opt2、c2→opt3、c3→opt4，
   順序逐一對應），讓答題選項與隊色跟著 --opt1..4 一起隨主題變色，
   不必逐一改寫 host.html／play.html 裡每個 var(--red) 等舊呼叫點。 */
:root { --pink:#c86f82; --pink-d:#a74f64; --ink:#332d2f; --bg:#fffaf8; --card:#fff;
  --red:var(--opt1); --blue:var(--opt2); --yellow:var(--opt3); --green:var(--opt4); --line:#f0dde2; --sage:#7f9877; }

/* 香檳劇院／紙藝花園覆寫的變數部分（host.html 行 321/344、play.html 行 88/99
   兩頁數值逐字相同，合併）。與此變數宣告耦合的 background-color 等非變數樣式，
   以及各頁專屬的細項選擇器覆寫（.screen/.brandbar/.muted/.pill/.qbar/input/
   .bcell/button.primary/.qr/.slot/.ring/.pbar/.po-item/.lb .row/
   .dr-winners/.bg-board/.fb-q 等），仍留在 host.html／play.html 各自內聯
   <style> 裡（見上方「本檔內容 2)」註解說明理由）。
   --red/--blue/--yellow/--green 沿用 :root 的 var(--opt1..4) map，兩套主題各自
   的 --opt1..4（見上方 1) 節）已不同色，這裡不需重複覆寫。 */
body[data-style="champagne-theatre"] { --pink:#d7a650; --pink-d:#b8863a; --ink:#fff6e8; --bg:#221816; --card:#2e211d; --line:#4a3a2e; --sage:#c7b873; }
body[data-style="paper-garden"] { --pink:#e4776a; --pink-d:#c75f54; --ink:#33302a; --bg:#fffefa; --card:#fffdf5; --line:#e7e0cf; --sage:#7fa979; }

/* ── 3) 共用 @keyframes（demo 行 153–579 摘出；fx-* 吃 var(--pink) 等主題變數自動配色） ── */

@keyframes pop-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  28%  { transform: translate(3em, 26vh) rotate(110deg); }
  52%  { transform: translate(-3em, 52vh) rotate(220deg); }
  76%  { transform: translate(2.5em, 78vh) rotate(330deg); }
  92%  { opacity: 1; }
  100% { transform: translate(-2em, 108vh) rotate(430deg); opacity: 0; }
}
@keyframes gold-enter {
  0%   { opacity: 0; transform: translateY(70px) scale(0.9) rotate(0deg); }
  12%  { opacity: 1; transform: translateY(0) scale(1.04) rotate(-11deg); }
  28%  { transform: translateY(0) scale(1.04) rotate(10deg); }
  44%  { transform: translateY(0) scale(1.03) rotate(-8deg); }
  60%  { transform: translateY(0) scale(1.02) rotate(6deg); }
  76%  { transform: translateY(0) scale(1.01) rotate(-3deg); }
  90%  { transform: translateY(0) scale(1.0) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes fx-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes card-spotlight {    /* 進場：暗→暖光打亮爆一下→柔和定住 */
  0%   { opacity: 0; transform: scale(0.82); box-shadow: 0 0 0 0 rgba(var(--warm-glow),0); }
  45%  { opacity: 1; transform: scale(1.08); box-shadow: 0 0 48px 8px rgba(var(--warm-glow),0.9); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 8px 20px rgba(90,50,60,0.16), 0 0 22px 2px rgba(var(--warm-glow),0.42); }
}
@keyframes win-tag-pop { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08); } }
@keyframes slot-win-pop { 0% { transform: scale(.96); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes bg-cur-glow {
  0%,100% { box-shadow: inset -13px -15px 18px rgba(0,0,0,.16), inset 12px 12px 20px rgba(255,255,255,.34), 0 18px 34px rgba(var(--warm-glow),.5); }
  50%     { box-shadow: inset -13px -15px 18px rgba(0,0,0,.16), inset 12px 12px 20px rgba(255,255,255,.34), 0 18px 34px rgba(var(--warm-glow),.5), 0 0 42px 9px rgba(var(--warm-glow),.75); }
}
@keyframes n-latest-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1.08); } }
@keyframes bnum-burst { 0% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.16); opacity: 1; } 78% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes lotto-float {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  35% { transform: translate3d(14px,-12px,0) rotate(16deg); }
  70% { transform: translate3d(-10px,10px,0) rotate(-12deg); }
}
@keyframes lotto-drop {
  0% { opacity: 0; transform: translate(-50%,-94px) scale(.78) rotate(-18deg); }
  58% { opacity: 1; transform: translate(-50%,10px) scale(1.06) rotate(8deg); }
  78% { transform: translate(-50%,-8px) scale(.98) rotate(-3deg); }
  100% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0deg); }
}
@keyframes pbar-win-glow {
  0%,100% { box-shadow: 0 4px 12px rgba(90,50,60,.10), 0 0 0 0 rgba(var(--warm-glow),0); }
  50%     { box-shadow: 0 4px 12px rgba(90,50,60,.10), 0 0 28px 4px rgba(var(--warm-glow),.65); }
}
@keyframes row-in { to { opacity: 1; transform: translateY(0); } }

/* ── 3b) 現場大表態（poll，Task 3）：撒花圖層（demo `fall` 動畫沿用上方 ⑶）＋
   最高票金框「win-tag」徽章。base .pbar/.fill 沿用 host.html 既有舊版 token（--red/--blue/
   --yellow/--green，見 host.html 內聯 <style>），這裡只加「投票結束定格才出現」的
   得獎裝飾（outline 發光＋懸浮金牌徽章），全部走主題變數（--gold/--gold2/--medal-ink/
   --warm-glow）三套自動變色。 ── */
.confetti-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.confetti { position: absolute; top: -24px; animation: fall ease-in forwards; }
.pbar.win { outline: 3px solid var(--gold); outline-offset: 2px; animation: pbar-win-glow 1.6s ease-in-out infinite; }
.pbar-wrap { position: relative; }
.pbar-wrap .win-tag {
  position: absolute; left: 50%; top: -17px; z-index: 2; color: var(--medal-ink);
  background: linear-gradient(180deg, #fff2c4, var(--gold) 55%, var(--gold2));
  border: 2px solid #fff; border-radius: 999px; padding: 6px 22px;
  font-size: clamp(14px,1.6vw,22px); font-weight: 900; letter-spacing: 2px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(90,50,60,.3), 0 0 20px rgba(var(--warm-glow),.6);
  transform-origin: center; animation: win-tag-pop 1.4s ease-in-out infinite;
}

/* ── 4) 主題背景圖（Task 2；AI 生成，存 public/assets/） ────────────────────
   命名慣例：bg-<style-pack-id>-<category>.jpg，category ∈ lobby|content|podium|phone
   （<style-pack-id> 對齊 src/stylepacks.ts 的 STYLE_PACKS[].id，例如 petal-pearl）。
   畫面容器只要標上分類 class（bg-lobby／bg-content／bg-podium／手機頁用 .phone-screen）
   就會依目前 body[data-style] 自動吃對應主題的圖，新增畫面不用逐一列 id。
   濃度＝紗覆蓋 rgba 第四值：頒獎淺色底 0.52／香檳（深色底）頒獎 0.2／手機 0.4。
   ⚠️ 正式版一律有背景（不像 demo 有 body.bg-on 開關）；用 !important 蓋過各畫面
   #id 的底色漸層（id 選擇器優先權較高，否則吃不到圖）。
   ⚠️ 選擇器結構不對稱、加新主題時要注意：.bg-lobby／.bg-content／.bg-podium
   是貼在「畫面內層容器」上的 class，故用『後代』選擇器（body[data-style="x"] .bg-lobby，
   中間有空格）；.phone-screen 則是直接貼在 play.html 的 <body> 元素本身，
   要用『複合』選擇器（body[data-style="x"].phone-screen，中間沒有空格）才吃得到——
   打錯成後代選擇器會找不到任何符合的元素（body 底下沒有子層 .phone-screen），
   導致 background-image 恆為 none、手機頁面永遠沒有主題背景。
   加新主題 = 放 4 張 bg-<id>-<category>.jpg 進 public/assets/ + 在下面複製一個
   [data-style="<id>"] 背景區塊（.bg-* 三行維持後代選擇器、.phone-screen 一行維持
   複合選擇器，整段照抄不要拆開改）+ 在 src/stylepacks.ts 的 STYLE_PACKS 加一筆。 ── */
.bg-lobby, .bg-content, .bg-podium, .phone-screen {
  background-size: cover !important;
  background-position: center !important;
}
/* 珍珠花瓣 petal-pearl（預設；未設 data-style，或明確設成 "petal-pearl" 都算——
   WedStyle.apply() 一律會明確設 data-style="petal-pearl"，故兩種選擇器都要列 ） */
body:not([data-style]) .bg-lobby, body[data-style="petal-pearl"] .bg-lobby   { background-image: url('/assets/bg-petal-pearl-lobby.jpg') !important; }
body:not([data-style]) .bg-content, body[data-style="petal-pearl"] .bg-content { background-image: url('/assets/bg-petal-pearl-content.jpg') !important; }
body:not([data-style]) .bg-podium, body[data-style="petal-pearl"] .bg-podium  { background-image: linear-gradient(rgba(255,246,248,0.52), rgba(255,246,248,0.52)), url('/assets/bg-petal-pearl-podium.jpg') !important; }
body:not([data-style]).phone-screen, body[data-style="petal-pearl"].phone-screen { background-image: linear-gradient(rgba(255,246,248,0.4), rgba(255,246,248,0.4)), url('/assets/bg-petal-pearl-phone.jpg') !important; }
/* 香檳劇院 champagne-theatre（淺字深底：頒獎紗用深咖啡 20%，米白紗會把底洗亮、淺字沒對比） */
body[data-style="champagne-theatre"] .bg-lobby   { background-image: url('/assets/bg-champagne-theatre-lobby.jpg') !important; }
body[data-style="champagne-theatre"] .bg-content { background-image: url('/assets/bg-champagne-theatre-content.jpg') !important; }
body[data-style="champagne-theatre"] .bg-podium  { background-image: linear-gradient(rgba(23,15,12,0.2), rgba(23,15,12,0.2)), url('/assets/bg-champagne-theatre-podium.jpg') !important; }
body[data-style="champagne-theatre"].phone-screen { background-image: linear-gradient(rgba(23,15,12,0.4), rgba(23,15,12,0.4)), url('/assets/bg-champagne-theatre-phone.jpg') !important; }
/* 香檳候場標題落在燈海密集區，加深色光暈托字 */
body[data-style="champagne-theatre"] .lobby-logo { text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.6); }
/* 紙藝花園 paper-garden */
body[data-style="paper-garden"] .bg-lobby   { background-image: url('/assets/bg-paper-garden-lobby.jpg') !important; }
body[data-style="paper-garden"] .bg-content { background-image: url('/assets/bg-paper-garden-content.jpg') !important; }
body[data-style="paper-garden"] .bg-podium  { background-image: linear-gradient(rgba(251,243,228,0.52), rgba(251,243,228,0.52)), url('/assets/bg-paper-garden-podium.jpg') !important; }
body[data-style="paper-garden"].phone-screen { background-image: linear-gradient(rgba(251,243,228,0.4), rgba(251,243,228,0.4)), url('/assets/bg-paper-garden-phone.jpg') !important; }

/* ── 5) 頒獎台：聚光燈三柱（Task 5）────────────────────────────────────────
   取代舊的 renderPetalPodium（.award-stage 吉祥物版）／renderClassicPodium（.classic-podium
   卡片版）——合併成單一 renderPodium()，三套主題共用同一套聚光燈三柱視覺、無吉祥物。
   逐字對齊 demo #podium（game-visual-demo.html 行 815–840 markup／158–232 CSS／
   1365–1389 playPodium／1327–1358 paintSpotlight·moveSpotlightTo）。
   ⚠️ demo 的 #podium 本身就是最外層 .screen（用 #podium.active 防止 .screen{display:none}
   被 id 選擇器優先權蓋過、非啟用時仍以 flex 佔位）；production 的 #podium 是巢狀在
   #s-over（真正的 .screen）裡的內層 <div>，可見性完全交給外層 #s-over.active 控制，
   #podium 本身不需要、也沒有另一層 .active 開關——故此處直接 display:flex 常駐即可，
   不能照抄 demo 那條 #podium.active 選擇器（會匹配不到任何東西、整個頒獎台變成
   預設 block 垂直堆疊而非三柱並排）。 */
#podium {
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--bg) 0%, var(--bg2) 75%);
  gap: clamp(20px, 3.5vw, 56px); min-height: calc(100vh - 56px); padding-bottom: clamp(30px, 6vh, 80px);
  position: relative;
}
.pod-col {
  display: flex; flex-direction: column; align-items: center;
  width: clamp(200px, 25vw, 380px);
  opacity: 0; transform: translateY(70px) scale(0.9);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1.4,.36,1);
}
.pod-col.show { opacity: 1; transform: translateY(0) scale(1); }
/* 冠軍進場：先左右搖擺幾下，再慢慢定住，時間拉長營造壓軸感（gold-enter 已在上方 3) 共用 keyframes） */
.pod-col.gold { transition: none; }
.pod-col.gold.show { animation: gold-enter 2000ms cubic-bezier(.3,.7,.4,1) forwards; }
.pod-col .medal {
  width: clamp(90px, 11vw, 150px); height: clamp(90px, 11vw, 150px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(34px, 4vw, 56px); font-weight: 800; color: var(--medal-ink);
  margin-bottom: clamp(10px, 1.6vh, 18px); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pod-col.gold .medal { background: var(--gold); }
.pod-col.silver .medal { background: var(--silver); }
.pod-col.bronze .medal { background: var(--bronze); }
.pod-name { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; margin-bottom: 4px; }
.pod-score { font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; }
.pod-sub { font-size: clamp(13px, 1.4vw, 18px); color: var(--sub); margin-bottom: clamp(8px, 1.4vh, 14px); }
.pod-bar {
  width: 100%; border-radius: 14px 14px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: rgba(0,0,0,0.25);
  box-shadow: 0 10px 26px rgba(90,50,60,0.18);
}
.pod-col.gold .pod-bar { background: linear-gradient(180deg, var(--gold), var(--gold2)); height: clamp(220px, 32vh, 420px); }
.pod-col.silver .pod-bar { background: linear-gradient(180deg, var(--silver), var(--silver2)); height: clamp(160px, 24vh, 320px); }
.pod-col.bronze .pod-bar { background: linear-gradient(180deg, var(--bronze), var(--bronze2)); height: clamp(120px, 18vh, 240px); }
.flash {
  position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(var(--warm-glow),0.55), transparent 60%);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 6;
}
.flash.on { opacity: 1; }
/* 聚光燈：用 radial-gradient 直接畫漸層黑幕（JS 動態改中心點+柔化半徑），邊緣才會是真的漸層而不是硬切 */
.spotlight-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 1; transition: opacity 0.9s ease;
  background: radial-gradient(circle at 50% 50%, rgba(var(--spot-dim),0.75) 0, rgba(var(--spot-dim),0.75) 100%);
}
.spotlight-overlay.off { opacity: 0; }

/* ── 拔河收尾：前 X 名頒獎名次列＋收尾按鈕列（三主題共用既有 token，無 --muted/--chip 用行內 fallback） ── */
.sa-list { list-style:none; padding:0; margin:16px auto; max-width:560px; width:90%; display:flex; flex-direction:column; gap:10px; }
.sa-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.sa-item[data-rank="1"] { border-color:var(--pink); box-shadow:0 6px 22px rgba(0,0,0,.14); }
.sa-rk { font-weight:800; color:var(--pink); min-width:64px; }
.sa-rn { font-weight:700; flex:1; text-align:left; }
.sa-rc { color:var(--muted, #999); font-size:.9em; }
.sa-rp { font-weight:700; color:var(--ink); background:var(--chip, rgba(0,0,0,.06)); padding:2px 10px; border-radius:999px; }
.sh-endbtns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0; }