/* ---------- 限時賽（js/blitz.js）----------
   依「限時賽 Redesign.dc.html」Turn 5 實作：街機 × 粉嫩 BBUU 配色。
   設計稿給了深淺兩版（5a 奶油底／5b 星空底），這裡把兩版收成同一組變數，
   跟著站上既有的 body.light 切換——不另外做開關，主題只有一個來源。

   顏色語彙（設計稿定義）：
     粉＝行動、藍＝分數與時間、薰衣草＝COMBO、玫瑰＝失誤。
   語彙固定，深淺版只換明度，所以同一個意義在兩版都是同一支變數。 */
:root {
  /* 5b 深色：星空夜藍底 */
  --bz-bg: radial-gradient(140% 100% at 50% 0%, #2d2856 0%, #211e42 55%, #191635 100%);
  --bz-solid: #211e42;
  --bz-panel: rgba(255, 255, 255, .05);
  --bz-panel-2: rgba(255, 255, 255, .08);
  --bz-line: #57517e;
  --bz-ink: #fff;
  --bz-ink-2: rgba(255, 255, 255, .72);
  --bz-ink-3: rgba(255, 255, 255, .5);
  --bz-accent: #f9a8c9;          /* 粉：行動 */
  --bz-accent-2: #ff8fb0;
  --bz-on-accent: #211e42;
  --bz-info: #a8c8f5;            /* 藍：分數與時間 */
  --bz-combo: #c6b4f5;           /* 薰衣草：COMBO */
  --bz-combo-ink: #c6b4f5;
  --bz-miss: #ff8fb0;            /* 玫瑰：失誤 */
  --bz-cream: #f5d9a8;
  --bz-board: rgba(255, 255, 255, .04);
  --bz-slot: rgba(255, 255, 255, .12);
  --bz-shadow: rgba(168, 200, 245, .45);
}
body.light {
  /* 5a 淺色：奶油底 */
  --bz-bg: #fdf4ee;
  --bz-solid: #fdf4ee;
  --bz-panel: #fff;
  --bz-panel-2: #fff;
  --bz-line: #46405e;
  --bz-ink: #46405e;
  --bz-ink-2: rgba(70, 64, 94, .8);
  --bz-ink-3: rgba(70, 64, 94, .6);
  --bz-accent: #ef7fae;
  --bz-accent-2: #f9a8c9;
  --bz-on-accent: #fff;
  --bz-info: #6d9fe0;
  --bz-combo: #a58ee0;
  --bz-combo-ink: #8a6fd0;
  --bz-miss: #d94f7e;
  --bz-cream: #f5d9a8;
  --bz-board: #f6e9f0;
  --bz-slot: rgba(70, 64, 94, .1);
  --bz-shadow: #a8c8f5;
}

@keyframes bz-eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@keyframes bz-ring { 0% { transform: scale(.8); opacity: .8 } 100% { transform: scale(1.25); opacity: 0 } }
@keyframes bz-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes bz-rise { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes bz-pop {
  from { transform: scale(.55); opacity: .2 }
  60% { transform: scale(1.06); opacity: 1 }
  to { transform: scale(1); opacity: 1 }
}

/* ---------- 首頁入口卡（活動頁右欄第一格）----------
   原本是計分挑戰的版位，計分挑戰下架後改由限時賽接手，配色換成粉／藍語彙。

   ★ 高度是硬限制：右欄 #kv-side 是 grid-auto-rows:1fr、外層 #kv-wrap 固定
   460px，一列只有 223px。grid 項目的 min-height 預設是 auto，內容一長就會
   把「1fr」撐成內容高度，兩列一起變高、整個 hero 壓到下面的歌曲列去。
   所以 min-height:0 + overflow:hidden 是結構上的保險；內容本身仍要自己
   收在 223px 內（榜只放三名就是為了這個）。 */
#kv-side .bz-entry { min-height: 0; overflow: hidden; }
.bz-entry {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 8px; padding: 14px 18px; box-sizing: border-box; cursor: pointer;
  background: var(--bz-bg); border: 3px solid var(--bz-accent); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--bz-shadow); color: var(--bz-ink);
}
.bz-e-head { display: flex; align-items: center; gap: 10px; }
.bz-e-icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--bz-accent); border-radius: 9px; color: var(--bz-on-accent);
  transform: rotate(-4deg);
}
body.light .bz-e-icon { color: #fff; }
.bz-e-icon svg { width: 17px; height: 17px; }
.bz-e-head b { font: 900 17px 'Noto Sans TC', sans-serif; }
.bz-e-tag {
  font: 700 11px 'Space Grotesk', monospace;
  background: var(--bz-info); color: var(--bz-on-accent); padding: 1px 7px; border-radius: 5px;
}
body.light .bz-e-tag { color: #fff; }
.bz-e-mid { display: flex; flex-direction: column; gap: 5px; }
.bz-e-mid:empty { display: none; }
.bz-e-bt { font: 900 11.5px 'Noto Sans TC', sans-serif; color: var(--bz-accent); letter-spacing: .04em; line-height: 1.2; }
.bz-e-empty { margin: 0; font-size: 11.5px; color: var(--bz-ink-3); }
.bz-e-list { display: flex; flex-direction: column; gap: 2px; }
.bz-e-row {
  display: flex; align-items: center; gap: 9px; padding: 2px 8px; border-radius: 7px;
  background: var(--bz-panel-2); line-height: 1.3;
}
.bz-e-row.t1 { background: color-mix(in srgb, var(--bz-accent) 18%, transparent); }
.bz-e-n {
  flex: none; width: 14px; text-align: center;
  font: 700 11px 'Space Grotesk', monospace; color: var(--bz-ink-3);
}
.bz-e-row.t1 .bz-e-n, .bz-e-row.t2 .bz-e-n, .bz-e-row.t3 .bz-e-n { color: var(--bz-accent); }
.bz-e-row b {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--bz-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bz-e-row.t1 b { font-weight: 700; }
.bz-e-s { font: 700 12px 'Space Grotesk', monospace; color: var(--bz-ink-2); }
/* 自己的最佳跟別人的榜單分開：上面一條細線，字用藍的（＝分數語彙） */
.bz-e-best {
  padding-top: 6px; border-top: 1px solid var(--bz-slot); line-height: 1.25;
  font: 900 11.5px 'Noto Sans TC', sans-serif; color: var(--bz-info);
}
.bz-e-btns { display: flex; gap: 8px; }
.bz-e-btn {
  flex: 1; min-width: 0; padding: 9px 4px; border: none; border-radius: 999px;
  background: var(--bz-accent); color: var(--bz-on-accent);
  font: 900 13.5px 'Noto Sans TC', sans-serif; box-shadow: 3px 3px 0 var(--bz-shadow);
  transition: transform .1s, box-shadow .1s;
}
body.light .bz-e-btn { color: #fff; }
/* hover 樣式一律只給真正有游標的裝置。觸控螢幕會把「最後一次觸碰的座標」
   當成游標位置：按「下一題」的手指位置對到新畫面的哪顆選項，那顆就會
   莫名其妙亮著——跟正解無關，純粹是版面座標的巧合。 */
@media (hover: hover) {
  .bz-e-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bz-shadow); }
}
.bz-e-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bz-shadow); }
.bz-e-rank {
  flex: none; padding: 7px 13px; border-radius: 999px;
  background: none; border: 3px solid var(--bz-info); color: var(--bz-info);
  font: 900 12px 'Noto Sans TC', sans-serif;
}
@media (hover: hover) {
  .bz-e-rank:hover { background: var(--bz-info); color: var(--bz-on-accent); }
  body.light .bz-e-rank:hover { color: #fff; }
}

/* ---------- 彈窗外殼 ---------- */
#bz-ov {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
#bz-ov.on { opacity: 1; }
#bz-ov .bz-bg {
  position: absolute; inset: 0; background: rgba(9, 8, 24, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light #bz-ov .bz-bg { background: rgba(70, 64, 94, .55); }
@media (max-width: 900px) {
  /* 手機 GPU 疊模糊很吃效能，直接改成不透明底 */
  #bz-ov .bz-bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9, 8, 24, .94); }
  body.light #bz-ov .bz-bg { background: rgba(70, 64, 94, .82); }
}
#bz-ov .bz-modal {
  position: relative; width: min(375px, 96vw); max-height: 94vh; overflow-y: auto;
  background: var(--bz-bg); border: 3px solid var(--bz-line); border-radius: 24px;
  display: flex; flex-direction: column; color: var(--bz-ink);
  animation: bz-rise .25s ease-out; scrollbar-width: none;
  font-family: 'Noto Sans TC', sans-serif;
}
#bz-ov .bz-modal::-webkit-scrollbar { display: none; }
/* 頂端斜紋條：街機機台的貼紙感，設計稿每個畫面都有 */
.bz-tape {
  height: 8px; flex: none;
  background: repeating-linear-gradient(-45deg, var(--bz-accent-2) 0 12px, transparent 12px 24px);
}
/* 標頭排版對日文特別緊：彈窗寬度固定 375px，而「ブリッツ」比「限時賽」
   寬了一整個字，加上題號「第 4 / 5 問」與 COMBO 標都含空格，一擠就在
   空格處折行、整條標頭變兩層。對策：所有項目一律不准折行（nowrap），
   縮 gap 與 padding 擠回等量的寬度；標題給 min-width:0，真的塞不下時
  （320px 級的窄機）由它出刪節號，膠囊標籤永遠保持完整。 */
.bz-head {
  height: 56px; flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 3px solid var(--bz-accent-2); background: var(--bz-panel);
  position: sticky; top: 0; z-index: 2;
}
.bz-brand { font: 700 12px 'Space Grotesk', monospace; color: var(--bz-info); letter-spacing: .2em; flex: none; }
.bz-head b {
  font: 900 16px 'Noto Sans TC', sans-serif;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.bz-no {
  font: 700 12px 'Space Grotesk', monospace; white-space: nowrap; flex: none;
  background: var(--bz-info); color: var(--bz-on-accent); padding: 1px 8px; border-radius: 999px;
}
body.light .bz-no { color: #fff; }
.bz-no:empty { display: none; }
/* 進行中的 COMBO 標；沒有連擊時整顆不出現 */
.bz-combo-chip {
  margin-left: auto; font: 700 12px 'Space Grotesk', monospace; white-space: nowrap; flex: none;
  color: var(--bz-combo-ink); border: 2px solid var(--bz-combo); border-radius: 999px; padding: 2px 10px;
}
.bz-combo-chip[hidden] { display: none; }
.bz-x {
  margin-left: auto; width: 28px; height: 28px; padding: 0; box-sizing: border-box;
  border: 3px solid var(--bz-accent); border-radius: 10px; background: none;
  display: grid; place-items: center; color: var(--bz-accent);
  font: 700 13px 'Space Grotesk', monospace;
}
/* 連擊標「真的顯示出來」時，✕ 才改成跟它相隔 8px；否則要保留 margin-left:auto
   把自己推到右緣。相鄰選擇器看的是 DOM 順序，hidden 的元素照樣算相鄰——
   少了 :not([hidden]) 的話沒有連擊時 ✕ 會緊貼著標題文字。 */
.bz-combo-chip:not([hidden]) + .bz-x { margin-left: 8px; }
/* 一局進行中點到背景時，讓 ✕ 抖一下指出真正的出口 */
.bz-x.nudge { animation: bz-nudge .4s ease-in-out; }
@keyframes bz-nudge {
  0%, 100% { transform: translateX(0) } 20% { transform: translateX(-4px) }
  50% { transform: translateX(4px) } 80% { transform: translateX(-2px) }
}
.bz-body { position: relative; flex: 1; display: flex; flex-direction: column; }
/* 隱藏的播放器：只要聲音，不要畫面 */
.bz-yt { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bz-hint { margin: 40px 22px; text-align: center; color: var(--bz-ink-2); font-size: 13px; }
.bz-foot {
  padding: 14px 20px; font: 700 10px 'Space Grotesk', monospace;
  color: var(--bz-ink-3); letter-spacing: .25em; text-align: center;
}

/* ---------- S1 開場 ---------- */
.bz-intro { flex: 1; padding: 32px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bz-ready {
  font: 700 11px 'Space Grotesk', monospace; color: var(--bz-info); letter-spacing: .3em;
  animation: bz-blink 1.2s steps(1) infinite;
}
.bz-i-head { margin-top: 14px; font: 900 32px 'Noto Sans TC', sans-serif; line-height: 1.3; }
.bz-i-head em { font-style: normal; color: var(--bz-accent); }
.bz-i-body { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--bz-ink-2); }
.bz-rules {
  margin-top: 24px; width: 100%; box-sizing: border-box; list-style: none; padding: 14px 18px 16px;
  background: var(--bz-panel-2); border: 3px solid var(--bz-line); border-radius: 18px;
  text-align: left; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 4px 4px 0 var(--bz-shadow);
}
.bz-rules-h { font: 700 10px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--bz-ink-3); }
.bz-rules li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--bz-ink); }
.bz-rules li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--bz-accent); }
.bz-rules li:nth-child(3)::before { background: var(--bz-info); }
.bz-rules li:nth-child(4)::before { background: var(--bz-combo); }
.bz-start {
  margin-top: 24px; width: 100%; background: var(--bz-accent); color: var(--bz-on-accent);
  font: 900 17px 'Noto Sans TC', sans-serif; padding: 16px 0; border: none; border-radius: 999px;
  box-shadow: 5px 5px 0 var(--bz-shadow); transition: transform .1s, box-shadow .1s;
}
@media (hover: hover) {
  .bz-start:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--bz-shadow); }
}
.bz-start:disabled { opacity: .55; box-shadow: none; }
.bz-hi { margin-top: 14px; display: flex; gap: 14px; align-items: center; font: 700 12px 'Space Grotesk', monospace; }
.bz-hi span { color: var(--bz-ink-3); }
.bz-hi b { color: var(--bz-info); font-weight: 700; }

/* ---------- S2 倒數 / S3 作答 ---------- */
.bz-play { flex: 1; padding: 26px 22px 0; display: flex; flex-direction: column; }
/* 剩餘時間做成 10 格；整條平滑條在小螢幕看不出走得多快，分格反而讀得出節奏 */
.bz-segs { display: flex; gap: 3px; }
.bz-segs i { flex: 1; height: 14px; border-radius: 4px; background: var(--bz-slot); }
.bz-segs i.on { background: var(--bz-accent); }
.bz-segs i.now { background: var(--bz-info); animation: bz-blink .5s steps(1) infinite; }
/* 舞台區：倒數數字與等化器輪流佔用同一塊。倒數刻意不覆蓋選項——
   壓上去要加遮罩，歌名就會糊掉，等於那三秒白給。固定高度避免切換時跳版。 */
.bz-stage { height: 180px; margin-top: 8px; display: grid; place-items: center; }
.bz-stage > * { grid-area: 1 / 1; }
.bz-count { display: grid; place-items: center; position: relative; }
.bz-count::before {
  content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid var(--bz-accent-2); animation: bz-ring 1s ease-out infinite;
}
.bz-count-n {
  font: 700 110px 'Space Grotesk', monospace; font-style: normal; line-height: 1;
  color: var(--bz-info); text-shadow: 6px 6px 0 var(--bz-accent-2);
}
/* PLAY 鍵：佔原本倒數數字的位置，外圈呼吸圓環共用 .bz-count::before。
   播放授權來自按下它的手勢（iOS），所以它就是每一題的正式起點。 */
.bz-go {
  width: 150px; height: 150px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--bz-accent-2);
  background: var(--bz-accent); color: var(--bz-on-accent);
  font: 900 22px 'Space Grotesk', monospace; letter-spacing: .05em;
  cursor: pointer; position: relative; z-index: 1;
}
.bz-go:disabled { opacity: .45; cursor: default; }
.bz-go:not(:disabled):active { transform: scale(.96); }
body.light .bz-go { color: #fff; }
.bz-eq { display: flex; align-items: center; justify-content: center; gap: 5px; }
.bz-eq i {
  width: 12px; height: 120px; border-radius: 6px; transform-origin: bottom;
  background: var(--bz-accent-2); animation: bz-eq .7s ease-in-out infinite;
}
.bz-eq i:nth-child(2) { background: var(--bz-info); animation-delay: .1s }
.bz-eq i:nth-child(3) { background: var(--bz-cream); animation-delay: .2s }
.bz-eq i:nth-child(4) { animation-delay: .3s }
.bz-eq i:nth-child(5) { background: var(--bz-combo); animation-delay: .4s }
.bz-eq i:nth-child(6) { background: var(--bz-info); animation-delay: .5s }
.bz-eq i:nth-child(7) { animation-delay: .6s }
.bz-eq i:nth-child(8) { background: var(--bz-cream); animation-delay: .15s }
.bz-eq i:nth-child(9) { background: var(--bz-info); animation-delay: .45s }
.bz-play.locked .bz-eq { visibility: hidden; }
.bz-play:not(.locked) .bz-count { display: none; }
.bz-listen {
  margin: 6px 0 18px; text-align: center;
  font: 900 12px 'Noto Sans TC', sans-serif; letter-spacing: .3em; color: var(--bz-ink-2);
}
/* touch-action: manipulation 拿掉行動裝置對「可能是雙擊縮放」的等待判定。
   5 秒內要連續判斷、點擊，快速的第二下若被瀏覽器攔下來等縮放，
   體感就是「按鈕沒反應」。整個覆蓋層與入口卡的按鈕一律適用。 */
#bz-ov button, .bz-entry button { touch-action: manipulation; }
.bz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bz-opt {
  min-height: 108px; box-sizing: border-box; padding: 10px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: var(--bz-panel-2); border: 3px solid var(--bz-slot); border-radius: 16px;
  color: var(--bz-ink); transition: border-color .1s, background .1s, transform .06s;
}
@media (hover: hover) {
  .bz-opt:hover:not(:disabled) { border-color: var(--bz-info); }
}
.bz-opt:active:not(:disabled) { transform: translateY(1px); }
/* 半個格寬，長歌名折兩行；再長切掉，四格要等高 */
.bz-opt b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 17px; font-weight: 700; line-height: 1.3;
}
.bz-opt i {
  display: block; max-width: 100%; height: 15px; margin-top: 3px;
  font: 400 11px 'Noto Sans TC', sans-serif; font-style: normal; color: var(--bz-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 倒數期間：讀得到（不模糊、不壓暗太多），但明顯還不能點 */
.bz-play.locked .bz-opt { border-style: dashed; border-color: var(--bz-ink-3); opacity: .85; cursor: default; }
.bz-opt.picked {
  background: color-mix(in srgb, var(--bz-info) 25%, transparent);
  border-color: var(--bz-info); box-shadow: 4px 4px 0 var(--bz-accent-2);
}
.bz-live {
  margin: 16px 0 18px; text-align: center;
  font: 700 11px 'Space Grotesk', monospace; color: var(--bz-ink-3); letter-spacing: .2em;
}
.bz-play.locked .bz-live { animation: bz-blink 1.2s steps(1) infinite; }

/* ---------- S4 單題結果 ---------- */
.bz-fb { flex: 1; padding: 38px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bz-fb-tag { font: 700 12px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--bz-info); }
.bz-fb.lose .bz-fb-tag, .bz-fb.timeout .bz-fb-tag { color: var(--bz-miss); }
.bz-fb-t { margin-top: 8px; font: 900 34px 'Noto Sans TC', sans-serif; color: var(--bz-accent); }
.bz-fb.lose .bz-fb-t, .bz-fb.timeout .bz-fb-t { color: var(--bz-miss); }
.bz-fb-score {
  margin-top: 22px; font: 700 56px 'Space Grotesk', monospace; line-height: 1;
  color: var(--bz-ink); text-shadow: 4px 4px 0 var(--bz-shadow);
}
.bz-fb.lose .bz-fb-score, .bz-fb.timeout .bz-fb-score {
  color: var(--bz-miss); text-shadow: none; font-size: 64px;
}
.bz-fb-ms { margin-top: 10px; font: 700 13px 'Space Grotesk', monospace; color: var(--bz-ink-2); }
.bz-fb-combo {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  border: 3px solid var(--bz-combo); border-radius: 999px; padding: 8px 20px;
  transform: rotate(-2deg); background: color-mix(in srgb, var(--bz-combo) 18%, transparent);
}
.bz-fb-combo[hidden] { display: none; }
.bz-fb-combo b { font: 700 20px 'Space Grotesk', monospace; color: var(--bz-combo-ink); }
.bz-fb-combo span {
  font: 900 11px 'Noto Sans TC', sans-serif; background: var(--bz-combo); color: var(--bz-on-accent);
  padding: 2px 8px; border-radius: 999px;
}
body.light .bz-fb-combo span { color: #fff; }
.bz-fb-song { margin-top: 22px; font-size: 13px; color: var(--bz-ink-2); }
.bz-dots { margin-top: 24px; display: flex; gap: 5px; align-items: center; }
.bz-dots i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--bz-ink-3); }
.bz-dots i.hit { background: var(--bz-accent); border-color: var(--bz-accent); }
.bz-dots i.miss { background: var(--bz-miss); border-color: var(--bz-miss); }
.bz-dots span { margin-left: 8px; font: 700 10px 'Space Grotesk', monospace; color: var(--bz-ink-3); letter-spacing: .2em; }
.bz-next {
  margin-top: 28px; width: 100%; background: var(--bz-info); color: var(--bz-on-accent);
  font: 900 15px 'Noto Sans TC', sans-serif; padding: 15px 0; border: none; border-radius: 999px;
  box-shadow: 5px 5px 0 var(--bz-accent-2);
}
body.light .bz-next { color: #fff; }
/* 倒數解鎖期間：壓灰、拿掉立體陰影，跟可按狀態一眼可分 */
.bz-next:disabled { opacity: .5; box-shadow: none; }

/* ---------- S5 成績 ---------- */
.bz-res { flex: 1; padding: 20px 22px 0; display: flex; flex-direction: column; text-align: center; }
.bz-r-label { font: 700 11px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--bz-ink-2); }
.bz-r-score {
  margin-top: 6px; font: 700 52px 'Space Grotesk', monospace; line-height: 1;
  color: var(--bz-info); text-shadow: 4px 4px 0 var(--bz-accent-2);
}
.bz-r-chips { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bz-r-pill {
  background: var(--bz-accent); color: var(--bz-on-accent);
  font: 900 11px 'Noto Sans TC', sans-serif; padding: 4px 14px; border-radius: 999px;
}
.bz-r-combo {
  border: 2px solid var(--bz-combo); color: var(--bz-combo-ink);
  font: 900 11px 'Noto Sans TC', sans-serif; padding: 3px 14px; border-radius: 999px;
}
.bz-r-combo[hidden] { display: none; }
.bz-r-rank {
  border: 2px solid var(--bz-info); color: var(--bz-info);
  font: 900 11px 'Noto Sans TC', sans-serif; padding: 3px 14px; border-radius: 999px;
}
.bz-r-rank[hidden] { display: none; }
.bz-r-times {
  margin-top: 12px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  font: 700 13px 'Space Grotesk', monospace; padding: 9px 0;
  border-top: 2px solid var(--bz-slot); border-bottom: 2px solid var(--bz-slot);
}
.bz-ms { color: var(--bz-info); }
.bz-ms.miss { color: var(--bz-miss); }
.bz-sep { color: var(--bz-ink-3); }
.bz-ms-unit { font-size: 11px; color: var(--bz-ink-3); align-self: center; }
/* 分享成績卡的入口（設計稿 5a S5）：縮圖 ＋ 說明 ＋ 產生按鈕 */
.bz-sharecard {
  margin-top: 12px; display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--bz-panel-2); border: 3px solid var(--bz-info); border-radius: 18px;
  padding: 12px 14px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--bz-info) 50%, transparent);
}
.bz-sc-thumb {
  flex: none; width: 64px; height: 84px; border-radius: 12px;
  background: linear-gradient(160deg, var(--bz-accent-2), var(--bz-info));
  display: grid; place-items: center; white-space: pre-line; text-align: center;
  font: 700 9px 'Space Grotesk', monospace; font-style: normal; color: var(--bz-on-accent);
}
body.light .bz-sc-thumb { color: #46405e; }
.bz-sc-txt { flex: 1; min-width: 0; }
.bz-sc-txt b { display: block; font: 900 13px 'Noto Sans TC', sans-serif; }
.bz-sc-txt p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--bz-ink-2); }
.bz-sc-btn {
  margin-top: 8px; background: var(--bz-info); color: var(--bz-on-accent); border: none;
  font: 900 11px 'Noto Sans TC', sans-serif; padding: 6px 16px; border-radius: 999px;
}
body.light .bz-sc-btn { color: #fff; }
.bz-sc-btn:disabled { opacity: .5; }

.bz-r-btns { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* 兩顆成績卡按鈕同一個樣式：它們是並列的動作，沒有主次之分 */
.bz-again, .bz-share {
  background: var(--bz-accent); color: var(--bz-on-accent); border: none;
  font: 900 12px 'Noto Sans TC', sans-serif; padding: 10px 22px; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--bz-shadow); transition: transform .1s, box-shadow .1s;
}
@media (hover: hover) {
  .bz-again:hover:not(:disabled), .bz-share:hover:not(:disabled) {
    transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bz-shadow);
  }
}
.bz-share:disabled { opacity: .55; box-shadow: none; }

/* 排行榜：貼在成績卡底部，出血到彈窗兩側 */
.bz-board {
  margin: 14px -22px 0; padding: 14px 22px 20px; text-align: left;
  background: var(--bz-board); border-top: 3px solid var(--bz-line);
}
.bz-b-head { display: flex; align-items: baseline; gap: 8px; }
.bz-b-head b { font: 900 14px 'Noto Sans TC', sans-serif; color: var(--bz-accent); }
.bz-b-head span { font: 400 11px 'Space Grotesk', monospace; color: var(--bz-ink-3); }
.bz-b-empty { margin: 10px 0 0; font-size: 12px; color: var(--bz-ink-3); }
.bz-b-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bz-b-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--bz-panel-2); border: 2px solid var(--bz-slot); border-radius: 12px;
}
.bz-b-row.t1 { border-color: var(--bz-accent-2); }
.bz-b-n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  font: 700 12px 'Space Grotesk', monospace; color: var(--bz-ink-3);
}
.bz-b-row.t1 .bz-b-n { background: var(--bz-accent-2); color: var(--bz-on-accent); }
body.light .bz-b-row.t1 .bz-b-n { color: #46405e; }
.bz-b-row b {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--bz-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bz-b-s { font: 700 13px 'Space Grotesk', monospace; color: var(--bz-ink-2); }
.bz-b-row.me {
  background: var(--bz-accent); border-color: var(--bz-accent);
  box-shadow: 3px 3px 0 var(--bz-shadow);
}
.bz-b-row.me b, .bz-b-row.me .bz-b-s, .bz-b-row.me .bz-b-n { color: var(--bz-on-accent); }
body.light .bz-b-row.me b, body.light .bz-b-row.me .bz-b-s { color: #fff; }
body.light .bz-b-row.me .bz-b-n { color: rgba(255, 255, 255, .75); }
.bz-dots-v { display: flex; justify-content: center; padding: 1px 0 2px; font: 700 12px 'Space Grotesk', monospace; color: var(--bz-ink-3); }
.bz-mine { display: flex; flex-direction: column; }
.bz-mine.cta { margin: 10px 0 12px; padding: 11px 12px 12px; border: 2px dashed var(--bz-accent); border-radius: 12px; }
.bz-nudge { margin: 0 0 9px; font: 900 12px 'Noto Sans TC', sans-serif; color: var(--bz-accent); }
.bz-claim-row { display: flex; gap: 8px; }
.bz-nick {
  flex: 1; min-width: 0; box-sizing: border-box; background: var(--bz-panel-2);
  border: 2px solid var(--bz-slot); border-radius: 10px;
  /* 不能小於 16px，否則 iOS 聚焦時會放大頁面把彈窗擠爆 */
  padding: 9px 12px; font-size: 16px; color: var(--bz-ink); outline: none; font-family: inherit;
}
.bz-nick:focus { border-color: var(--bz-info); }
.bz-send {
  flex: none; background: var(--bz-info); color: var(--bz-on-accent); border: none;
  font: 900 12px 'Noto Sans TC', sans-serif; padding: 9px 18px; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--bz-accent-2);
}
body.light .bz-send { color: #fff; }
.bz-send:disabled { opacity: .5; box-shadow: none; }
.bz-claim-msg { margin: 8px 0 0; font-size: 12px; color: var(--bz-ink-2); }

/* ---- 手機：整頁模式 ----
   浮層在小螢幕會被鍵盤與瀏覽器列擠爆，跟計分挑戰同樣改成整頁。 */
@media (max-width: 900px) {
  body.bz-page { overflow: visible; padding: 0; }
  /* 分享卡與排行榜覆蓋層也是掛在 body 上的兄弟節點，一定要豁免——
     少列的話它們照樣會開，只是瞬間被藏起來，症狀是「按了沒反應」 */
  body.bz-page > *:not(#bz-ov):not(.hd-toast):not(#bz-share-ov):not(#bz-board-ov) { display: none !important; }
  body.bz-page #bz-ov { position: static; display: block; padding: 0; z-index: auto; }
  body.bz-page #bz-ov .bz-modal {
    width: 100%; max-height: none; overflow: visible; min-height: 100dvh;
    border: none; border-radius: 0; animation: none;
  }
  body.bz-page .bz-board { border-radius: 0; }
}

/* ---------- 分享彈窗 ----------
   外殼與限時賽主彈窗共用（#bz-share-ov 沿用 .bz-bg/.bz-modal/.bz-head）。
   卡片用 <img> 呈現：iOS 長按圖片才有「加入照片」。 */
#bz-share-ov {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
#bz-share-ov.on { opacity: 1; }
#bz-share-ov .bz-bg {
  position: absolute; inset: 0; background: rgba(9, 8, 24, .86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light #bz-share-ov .bz-bg { background: rgba(70, 64, 94, .6); }
#bz-share-ov .bz-modal {
  position: relative; width: min(340px, 94vw); max-height: 94vh; overflow-y: auto;
  background: var(--bz-bg); border: 3px solid var(--bz-line); border-radius: 24px;
  display: flex; flex-direction: column; color: var(--bz-ink);
  animation: bz-rise .25s ease-out; scrollbar-width: none;
}
#bz-share-ov .bz-modal::-webkit-scrollbar { display: none; }
.bz-share-img { padding: 16px 18px 0; }
/* 寬高都留 auto，靠圖片自身的內在比例（540×960）等比縮放；
   給死寬度會讓 max-height 壓成扁的（計分挑戰那邊踩過）。 */
.bz-share-img img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 62vh;
  margin: 0 auto; border-radius: 12px;
}
.bz-share-btns { display: flex; gap: 8px; padding: 14px 18px 18px; flex-wrap: wrap; justify-content: center; }
.bz-share-btns button {
  flex: 1; min-width: 88px; border: none; border-radius: 999px; padding: 11px 6px;
  font: 900 12px 'Noto Sans TC', sans-serif;
}
.bz-sns { background: var(--bz-accent); color: var(--bz-on-accent); box-shadow: 3px 3px 0 var(--bz-shadow); }
.bz-dl { background: var(--bz-info); color: var(--bz-on-accent); box-shadow: 3px 3px 0 var(--bz-accent-2); }
body.light .bz-sns, body.light .bz-dl { color: #fff; }
.bz-cp { background: none; border: 3px solid var(--bz-slot); color: var(--bz-ink-2); }
@media (hover: hover) {
  .bz-cp:hover { border-color: var(--bz-combo); color: var(--bz-combo-ink); }
}
@media (max-width: 900px) {
  #bz-share-ov .bz-bg { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* 整張卡塞進去會比一個螢幕還高，按鈕要捲很久才看得到 */
  .bz-share-img img { max-height: 52dvh; }
}

/* ---------- 排行榜浮層（入口卡的「看排行榜」）---------- */
#bz-board-ov {
  position: fixed; inset: 0; z-index: 94; display: grid; place-items: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
#bz-board-ov.on { opacity: 1; }
#bz-board-ov .bz-bg {
  position: absolute; inset: 0; background: rgba(9, 8, 24, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light #bz-board-ov .bz-bg { background: rgba(70, 64, 94, .55); }
#bz-board-ov .bz-modal {
  position: relative; width: min(360px, 94vw); max-height: 90vh; overflow-y: auto;
  background: var(--bz-bg); border: 3px solid var(--bz-line); border-radius: 24px;
  display: flex; flex-direction: column; color: var(--bz-ink);
  animation: bz-rise .25s ease-out; scrollbar-width: none;
}
#bz-board-ov .bz-modal::-webkit-scrollbar { display: none; }
#bz-board-ov .bz-head b { flex: 1; }
.bz-bv { padding: 16px 18px 20px; }
/* 自己那一列跟前五名之間留一道間距，看得出「這是另一個區塊」 */
.bz-bv-me { margin-top: 10px; }

/* ---------- 手機底部 Tab 的猜歌鈕：改成限時賽的粉色 ----------
   原本是計分挑戰的螢光綠（見 css/mobile.css）。首頁改推限時賽之後，
   這顆是手機上唯一的入口，配色要跟著換才不會像兩個不同的東西。 */
#mtab button.mt-quiz .mt-badge { background: var(--bz-accent); }
#mtab button.mt-quiz .mt-badge svg { color: var(--bz-on-accent); }
body.light #mtab button.mt-quiz .mt-badge svg { color: #fff; }
#mtab button.mt-quiz .mt-dot { background: var(--bz-info); }
#mtab button.mt-quiz .mt-label { color: var(--bz-accent); }