/* ---------- 歌詞接龍（js/relay.js）----------
   自己的一組暖色 token（站長定案：這個模式走暖色系，跟限時賽的粉藍
   區隔開來）。顏色語彙沿用 blitz 的骨架——accent＝行動、info＝分數與榜、
   combo＝裝飾、miss＝失誤——深淺兩版跟著 body.light 切換。
   結構類名用 rl- 前綴，跟 bz-/hd- 一樣各遊戲各管各的。 */
:root {
  /* 深色：暖夜可可底 */
  --rl-bg: radial-gradient(140% 100% at 50% 0%, #4a2d31 0%, #3a2327 55%, #2c1b1e 100%);
  --rl-solid: #3a2327;
  --rl-head-bg: #533338;   /* sticky 標頭要實色，理由同 blitz 的 --bz-head-bg */
  --rl-panel: rgba(255, 255, 255, .05);
  --rl-panel-2: rgba(255, 255, 255, .08);
  --rl-line: #7d555c;
  --rl-ink: #fff;
  --rl-ink-2: rgba(255, 255, 255, .72);
  --rl-ink-3: rgba(255, 255, 255, .5);
  --rl-accent: #ffb17a;          /* 蜜桃橙：行動 */
  --rl-accent-2: #ff9d66;
  --rl-on-accent: #2c1b1e;
  --rl-info: #ffd08a;            /* 蜜黃：分數與榜 */
  --rl-combo: #f7a8b8;           /* 玫瑰粉：裝飾 */
  --rl-miss: #ff7d76;            /* 珊瑚紅：失誤 */
  --rl-cream: #ffe8c9;
  --rl-board: rgba(255, 255, 255, .04);
  --rl-slot: rgba(255, 255, 255, .12);
  --rl-shadow: rgba(255, 208, 138, .45);
}
body.light {
  /* 淺色：奶油杏桃底 */
  --rl-bg: #fdf4ea;
  --rl-solid: #fdf4ea;
  --rl-head-bg: #fff;
  --rl-panel: #fff;
  --rl-panel-2: #fff;
  --rl-line: #5c4038;
  --rl-ink: #5c4038;
  --rl-ink-2: rgba(92, 64, 56, .8);
  --rl-ink-3: rgba(92, 64, 56, .6);
  --rl-accent: #f2784b;
  --rl-accent-2: #ff9d66;
  --rl-on-accent: #fff;
  --rl-info: #e0912e;
  --rl-combo: #e5747f;
  --rl-miss: #d9534f;
  --rl-cream: #f5d9a8;
  --rl-board: #f9e9da;
  --rl-slot: rgba(92, 64, 56, .12);
  --rl-shadow: #ffd08a;
}

@keyframes rl-eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@keyframes rl-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes rl-rise { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes rl-nudge {
  0%, 100% { transform: translateX(0) } 20% { transform: translateX(-4px) }
  50% { transform: translateX(4px) } 80% { transform: translateX(-2px) }
}

/* 遊戲開著時凍結背景的漂浮動畫層：它們在覆蓋層後面看不到，
   卻照常逐幀重繪＋被 backdrop blur 重新取樣（hero 影片的暫停在
   relay.js 的 heroCmd，這裡管純 CSS 動畫的部分） */
body.rl-open .bg-layer { animation-play-state: paused; }

/* ---------- 彈窗外殼（同 blitz 的殼，理由也相同） ---------- */
#rl-ov {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
#rl-ov.on { opacity: 1; }
#rl-ov .rl-bg {
  position: absolute; inset: 0; background: rgba(32, 19, 17, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light #rl-ov .rl-bg { background: rgba(92, 64, 56, .55); }
@media (max-width: 900px) {
  /* 手機 GPU 疊模糊很吃效能，直接改成不透明底 */
  #rl-ov .rl-bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(32, 19, 17, .94); }
  body.light #rl-ov .rl-bg { background: rgba(92, 64, 56, .82); }
}
#rl-ov .rl-modal {
  position: relative; width: min(375px, 96vw); max-height: 94vh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--rl-bg); border: 3px solid var(--rl-line); border-radius: 24px;
  display: flex; flex-direction: column; color: var(--rl-ink);
  animation: rl-rise .25s ease-out; scrollbar-width: none;
  font-family: 'Noto Sans TC', sans-serif;
}
#rl-ov .rl-modal::-webkit-scrollbar { display: none; }
.rl-tape {
  height: 8px; flex: none;
  background: repeating-linear-gradient(-45deg, var(--rl-info) 0 12px, transparent 12px 24px);
}
/* 標頭排版規矩同 blitz：全部 nowrap，塞不下時由標題出刪節號 */
.rl-head {
  height: 56px; flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: 3px solid var(--rl-info); background: var(--rl-head-bg);
  position: sticky; top: 0; z-index: 2;
}
.rl-brand { font: 700 12px 'Space Grotesk', monospace; color: var(--rl-info); letter-spacing: .2em; flex: none; }
.rl-head b {
  font: 900 16px 'Noto Sans TC', sans-serif;
  white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.rl-no {
  font: 700 12px 'Space Grotesk', monospace; white-space: nowrap; flex: none;
  background: var(--rl-info); color: var(--rl-on-accent); padding: 1px 8px; border-radius: 999px;
}
body.light .rl-no { color: #fff; }
.rl-no:empty { display: none; }
.rl-x {
  margin-left: auto; width: 28px; height: 28px; padding: 0; box-sizing: border-box;
  border: 3px solid var(--rl-accent); border-radius: 10px; background: none;
  display: grid; place-items: center; color: var(--rl-accent);
  font: 700 13px 'Space Grotesk', monospace;
}
.rl-x.nudge { animation: rl-nudge .4s ease-in-out; }
.rl-body { position: relative; flex: 1; display: flex; flex-direction: column; }
/* 隱藏的播放器：只要聲音，不要畫面 */
.rl-yt { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.rl-hint { margin: 40px 22px; text-align: center; color: var(--rl-ink-2); font-size: 13px; }
.rl-foot {
  padding: 14px 20px; font: 700 10px 'Space Grotesk', monospace;
  color: var(--rl-ink-3); letter-spacing: .25em; text-align: center;
}
/* 快速的連續點擊不能被「可能是雙擊縮放」的等待吃掉（同 blitz） */
#rl-ov button { touch-action: manipulation; }

/* ---------- S1 開場 ---------- */
.rl-intro { flex: 1; padding: 32px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rl-ready {
  font: 700 10px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--rl-info);
  border: 2px solid var(--rl-info); border-radius: 999px; padding: 4px 14px;
}
.rl-i-head { margin-top: 14px; font: 900 32px 'Noto Sans TC', sans-serif; line-height: 1.3; }
.rl-i-head em { font-style: normal; color: var(--rl-info); }
/* 一行帶過玩法與時限：規則區已拿掉（玩法直覺，站長定） */
.rl-i-tag { margin: 12px 0 0; font: 500 12.5px 'Noto Sans TC', sans-serif; color: var(--rl-ink-2); }
.rl-start {
  margin-top: 20px; width: 100%; background: var(--rl-info); color: var(--rl-on-accent);
  font: 900 15px 'Noto Sans TC', sans-serif; padding: 15px 0; border: none; border-radius: 999px;
  box-shadow: 5px 5px 0 var(--rl-accent-2); transition: transform .1s;
}
body.light .rl-start { color: #fff; }
.rl-start:disabled { opacity: .55; box-shadow: none; }
.rl-start:active:not(:disabled) { transform: translate(2px, 2px); }
.rl-hi { margin-top: 14px; font: 700 12px 'Space Grotesk', monospace; color: var(--rl-ink-3); }

/* ---------- S2 出題 ---------- */
.rl-q { flex: 1; padding: 18px 22px 0; display: flex; flex-direction: column; }
/* 10 秒作答倒數條：10 格、一格一秒（同 blitz 的分格取捨——平滑條在
   小螢幕看不出走多快）。音樂還沒出聲（locked）時整條壓暗待命。 */
.rl-segs { display: flex; gap: 3px; margin-bottom: 10px; }
.rl-segs i { flex: 1; height: 12px; border-radius: 4px; background: var(--rl-slot); }
.rl-segs i.on { background: var(--rl-accent); }
.rl-segs i.now { background: var(--rl-info); animation: rl-blink .5s steps(1) infinite; }
.rl-q.locked .rl-segs { opacity: .45; }
/* 歌名公開：這個模式考的是接詞，不是認曲 */
.rl-song { text-align: center; }
.rl-song b { display: block; font: 900 18px 'Noto Sans TC', sans-serif; }
.rl-song i {
  display: block; margin-top: 2px; font: 400 11px 'Noto Sans TC', sans-serif; font-style: normal;
  color: var(--rl-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-song i:empty { display: none; }
/* 舞台三態共用一塊固定高度：wait（PLAY 鍵）／live（等化器）／sung（唱過那句）。
   固定高度 + grid 疊放，切換時版面不跳（同 blitz 的 .bz-stage 思路）。 */
.rl-stage { height: 128px; margin-top: 8px; display: grid; place-items: center; transform: translateZ(0); }
.rl-stage > * { grid-area: 1 / 1; }
.rl-q .rl-wait, .rl-q .rl-eq, .rl-q .rl-sung { visibility: hidden; }
.rl-q.s-wait .rl-wait, .rl-q.s-live .rl-eq, .rl-q.s-sung .rl-sung { visibility: visible; }
.rl-go {
  width: 96px; height: 96px; border-radius: 50%; border: none;
  background: var(--rl-info); color: var(--rl-on-accent);
  font: 900 15px 'Noto Sans TC', sans-serif; box-shadow: 5px 5px 0 var(--rl-accent-2);
}
body.light .rl-go { color: #fff; }
.rl-go:disabled { opacity: .45; cursor: default; }
.rl-go:not(:disabled):active { transform: scale(.96); }
.rl-eq { display: flex; align-items: center; justify-content: center; gap: 5px; }
.rl-eq i {
  width: 7px; height: 54px; border-radius: 4px; background: var(--rl-accent);
  animation: rl-eq .8s ease-in-out infinite; transform-origin: center;
}
.rl-eq i:nth-child(2) { background: var(--rl-info); animation-delay: .1s }
.rl-eq i:nth-child(3) { background: var(--rl-cream); animation-delay: .2s }
.rl-eq i:nth-child(4) { animation-delay: .3s }
.rl-eq i:nth-child(5) { background: var(--rl-combo); animation-delay: .4s }
.rl-eq i:nth-child(6) { background: var(--rl-info); animation-delay: .5s }
.rl-eq i:nth-child(7) { animation-delay: .6s }
.rl-eq i:nth-child(8) { background: var(--rl-cream); animation-delay: .15s }
.rl-eq i:nth-child(9) { background: var(--rl-info); animation-delay: .45s }
/* 唱過的那句：聽不清楚不該是扣分項，聽完直接給看文字 */
.rl-sung { width: 100%; box-sizing: border-box; text-align: center; padding: 0 6px; }
.rl-sung span {
  font: 700 10px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--rl-ink-3);
}
/* 第二行是譯文（用 \n 接在原文後），pre-line 讓它換行、字級由行高吃下來 */
.rl-sung p {
  margin: 6px 0 0; font: 700 14px/1.5 'Noto Sans TC', sans-serif; color: var(--rl-ink);
  white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rl-replay {
  margin-top: 8px; background: none; border: 2px solid var(--rl-slot); border-radius: 999px;
  padding: 5px 16px; font: 900 12px 'Noto Sans TC', sans-serif; color: var(--rl-ink-2);
}
@media (hover: hover) { .rl-replay:hover { border-color: var(--rl-info); color: var(--rl-info); } }
.rl-replay[hidden] { display: none; }
.rl-opts-head {
  margin: 4px 0 10px; text-align: center; min-height: 15px;
  font: 900 12px 'Noto Sans TC', sans-serif; letter-spacing: .2em; color: var(--rl-ink-2);
}
/* 選項是整句歌詞＋譯文，直排單欄才放得下；鎖住時虛線框（讀得到、點不了） */
.rl-opts { display: flex; flex-direction: column; gap: 8px; }
.rl-opt {
  box-sizing: border-box; width: 100%; padding: 9px 14px; text-align: left;
  background: var(--rl-panel-2); border: 3px solid var(--rl-slot); border-radius: 14px;
  color: var(--rl-ink); font: 500 13.5px/1.45 'Noto Sans TC', sans-serif;
  transition: border-color .1s, background .1s, transform .06s;
}
.rl-opt b { display: block; font-weight: 500; }
.rl-opt.hit b { font-weight: 700; }
.rl-opt i {
  display: block; margin-top: 1px; font: 400 11px/1.5 'Noto Sans TC', sans-serif;
  font-style: normal; color: var(--rl-ink-3);
}
.rl-opt.miss i { color: color-mix(in srgb, var(--rl-miss) 70%, transparent); }
@media (hover: hover) { .rl-opt:hover:not(:disabled) { border-color: var(--rl-info); } }
.rl-opt:active:not(:disabled) { transform: translateY(1px); }
.rl-q.locked .rl-opt { border-style: dashed; border-color: var(--rl-ink-3); opacity: .85; cursor: default; }
/* 對錯標示：正解一律亮出來，按錯的那顆標玫瑰色 */
.rl-opt.hit {
  background: color-mix(in srgb, var(--rl-info) 22%, transparent);
  border-color: var(--rl-info); font-weight: 700;
}
.rl-opt.miss { border-color: var(--rl-miss); color: var(--rl-miss); }

/* ---------- 作答回饋 ---------- */
.rl-fb { padding: 14px 0 4px; text-align: center; }
.rl-fb[hidden] { display: none; }
.rl-verdict { margin: 0; font: 900 18px 'Noto Sans TC', sans-serif; color: var(--rl-info); }
.rl-fb.lose .rl-verdict { color: var(--rl-miss); }
.rl-ans { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--rl-ink-2); }
.rl-ans[hidden] { display: none; }
.rl-revealing { margin: 6px 0 0; min-height: 15px; font-size: 11.5px; color: var(--rl-ink-3); }
.rl-next {
  margin-top: 10px; width: 100%; background: var(--rl-info); color: var(--rl-on-accent);
  font: 900 15px 'Noto Sans TC', sans-serif; padding: 14px 0; border: none; border-radius: 999px;
  box-shadow: 5px 5px 0 var(--rl-accent-2);
}
body.light .rl-next { color: #fff; }

/* ---------- S5 成績 ---------- */
.rl-res { flex: 1; padding: 24px 22px 0; display: flex; flex-direction: column; text-align: center; }
.rl-r-label { font: 700 11px 'Space Grotesk', monospace; letter-spacing: .3em; color: var(--rl-ink-2); }
.rl-r-score { margin-top: 6px; }
.rl-r-score b {
  font: 700 56px 'Space Grotesk', monospace; line-height: 1;
  color: var(--rl-info); text-shadow: 4px 4px 0 var(--rl-accent-2);
}
.rl-r-score span { margin-left: 6px; font: 700 18px 'Space Grotesk', monospace; color: var(--rl-ink-3); }
.rl-r-newbest {
  margin: 12px auto 0; width: fit-content; background: var(--rl-accent); color: var(--rl-on-accent);
  font: 900 11px 'Noto Sans TC', sans-serif; padding: 4px 14px; border-radius: 999px; transform: rotate(-2deg);
}
body.light .rl-r-newbest { color: #fff; }
.rl-r-phrase { margin: 12px 0 0; font: 900 14px 'Noto Sans TC', sans-serif; color: var(--rl-ink); }
/* 斷在哪首、哪兩句：成績卡上的小複習區 */
.rl-r-fail {
  margin-top: 14px; padding: 12px 14px; text-align: left;
  background: var(--rl-panel-2); border: 2px solid color-mix(in srgb, var(--rl-miss) 55%, transparent);
  border-radius: 14px;
}
.rl-r-fail[hidden] { display: none; }
.rl-r-fail span {
  display: block; font: 700 10px 'Space Grotesk', monospace; letter-spacing: .25em; color: var(--rl-miss);
}
.rl-r-fail b {
  display: block; margin-top: 4px; font: 900 14px 'Noto Sans TC', sans-serif; color: var(--rl-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-r-fail p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--rl-ink-2); }
.rl-r-best { margin-top: 12px; font: 700 12px 'Space Grotesk', monospace; color: var(--rl-ink-3); }
.rl-r-btns { margin: 14px 0 4px; display: flex; gap: 8px; justify-content: center; }
/* 兩顆按鈕同一個樣式：並列動作、沒有主次之分（同 blitz 的成績卡） */
.rl-again, .rl-share {
  background: var(--rl-accent); color: var(--rl-on-accent); border: none;
  font: 900 12px 'Noto Sans TC', sans-serif; padding: 10px 22px; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--rl-shadow); transition: transform .1s, box-shadow .1s;
}
body.light .rl-again, body.light .rl-share { color: #fff; }
@media (hover: hover) {
  .rl-again:hover:not(:disabled), .rl-share:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rl-shadow); }
}
.rl-again:disabled { opacity: .55; box-shadow: none; }

/* ---------- 留名列與全場排行榜（成績卡下方） ---------- */
.rl-claim { margin: 4px 0 0; text-align: left; }
.rl-claim[hidden] { display: none; }
.rl-claim-row { display: flex; gap: 8px; }
.rl-claim-row[hidden] { display: none; }
.rl-nick {
  flex: 1; min-width: 0; box-sizing: border-box; background: var(--rl-panel-2);
  border: 2px solid var(--rl-slot); border-radius: 10px;
  /* 不能小於 16px，否則 iOS 聚焦時會放大頁面把彈窗擠爆 */
  padding: 9px 12px; font-size: 16px; color: var(--rl-ink); outline: none; font-family: inherit;
}
.rl-nick:focus { border-color: var(--rl-info); }
.rl-send {
  flex: none; background: var(--rl-info); color: var(--rl-on-accent); border: none;
  font: 900 12px 'Noto Sans TC', sans-serif; padding: 9px 18px; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--rl-accent-2);
}
body.light .rl-send { color: #fff; }
.rl-send:disabled { opacity: .5; box-shadow: none; }
.rl-claim-msg { margin: 8px 0 0; min-height: 15px; font-size: 12px; text-align: center; color: var(--rl-ink-2); }
.rl-claim-msg:empty { display: none; }

/* 榜單貼在成績卡底部、出血到彈窗兩側（同 blitz 的 .bz-board 語彙） */
.rl-board {
  margin: 14px -22px 0; padding: 14px 22px 20px; text-align: left;
  background: var(--rl-board); border-top: 3px solid var(--rl-line);
}
.rl-b-head { display: flex; align-items: baseline; gap: 8px; }
.rl-b-head b { font: 900 14px 'Noto Sans TC', sans-serif; color: var(--rl-info); }
.rl-b-head span { font: 400 11px 'Space Grotesk', monospace; color: var(--rl-ink-3); }
.rl-b-empty { margin: 10px 0 0; font-size: 12px; color: var(--rl-ink-3); }
.rl-b-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rl-b-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--rl-panel-2); border: 2px solid var(--rl-slot); border-radius: 12px;
}
.rl-b-row.t1 { border-color: var(--rl-info); }
.rl-b-n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  font: 700 12px 'Space Grotesk', monospace; color: var(--rl-ink-3);
}
.rl-b-row.t1 .rl-b-n { background: var(--rl-info); color: var(--rl-on-accent); }
body.light .rl-b-row.t1 .rl-b-n { color: #fff; }
.rl-b-row b {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--rl-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-b-s { font: 700 13px 'Space Grotesk', monospace; color: var(--rl-ink-2); }
.rl-b-row.me { background: var(--rl-info); border-color: var(--rl-info); }
.rl-b-row.me b, .rl-b-row.me .rl-b-s, .rl-b-row.me .rl-b-n { color: var(--rl-on-accent); }
body.light .rl-b-row.me b, body.light .rl-b-row.me .rl-b-s, body.light .rl-b-row.me .rl-b-n { color: #fff; }
.rl-b-dots { display: flex; justify-content: center; padding: 1px 0 2px; font: 700 12px 'Space Grotesk', monospace; color: var(--rl-ink-3); }
/* 榜單出血到彈窗底，成績卡原本的底部留白交給它 */
.rl-res .rl-board { margin-bottom: 0; }

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

/* ---------- 開場畫面攤開的排行榜 ----------
   不藏在按鈕後面、進來第一眼就看得到（站長定案）。沿用 .rl-board 的
   出血語彙，只是父容器 padding 不同（.rl-intro 是 24px），出血量另配。 */
.rl-intro .rl-board {
  align-self: stretch; margin: 18px -24px 0; text-align: left;
}

/* ---------- 首頁入口卡（活動頁右欄第一格；版位原屬限時賽） ----------
   高度是硬限制：右欄一列鎖死 223px（見 blitz.css 同區註解），
   榜只放兩名、min-height:0 + overflow:hidden 是結構保險。 */
#kv-side .rl-entry { min-height: 0; overflow: hidden; }
.rl-entry {
  height: 100%; box-sizing: border-box; padding: 14px 18px 13px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  background: var(--rl-solid); border: 3px solid var(--rl-accent); border-radius: 14px;
  color: var(--rl-ink); font-family: 'Noto Sans TC', sans-serif;
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--rl-info) 50%, transparent);
}
.rl-e-head { display: flex; align-items: center; gap: 10px; }
.rl-e-icon {
  width: 34px; height: 34px; flex: none; border-radius: 9px; transform: rotate(-4deg);
  background: var(--rl-accent); color: var(--rl-on-accent); display: grid; place-items: center;
  font-size: 17px;
}
body.light .rl-e-icon { color: #fff; }
.rl-e-head b { font: 900 17px 'Noto Sans TC', sans-serif; }
.rl-e-tag {
  margin-left: auto; background: var(--rl-info); color: var(--rl-on-accent);
  font: 900 10.5px 'Noto Sans TC', sans-serif; padding: 2px 8px; border-radius: 999px;
  transform: rotate(2deg); white-space: nowrap;
}
body.light .rl-e-tag { color: #fff; }
.rl-e-mid { display: flex; flex-direction: column; gap: 5px; }
.rl-e-mid:empty { display: none; }
.rl-e-bt { font: 900 11.5px 'Noto Sans TC', sans-serif; color: var(--rl-accent); letter-spacing: .04em; line-height: 1.2; }
.rl-e-empty { margin: 0; font-size: 11.5px; color: var(--rl-ink-3); }
.rl-e-list { display: flex; flex-direction: column; gap: 2px; }
.rl-e-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 8px;
  font-size: 12px;
}
.rl-e-row.t1 { background: color-mix(in srgb, var(--rl-accent) 18%, transparent); }
.rl-e-n {
  flex: none; width: 16px; text-align: center;
  font: 700 11px 'Space Grotesk', monospace; color: var(--rl-ink-3);
}
.rl-e-row.t1 .rl-e-n { color: var(--rl-accent); }
.rl-e-row b {
  flex: 1; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-e-row.t1 b { font-weight: 700; }
.rl-e-s { font: 700 12px 'Space Grotesk', monospace; color: var(--rl-ink-2); }
.rl-e-best {
  padding-top: 5px; border-top: 2px solid var(--rl-slot);
  font: 700 11.5px 'Space Grotesk', monospace; color: var(--rl-info);
}
.rl-e-btns { display: flex; gap: 8px; }
.rl-e-btn {
  flex: 1; background: var(--rl-accent); color: var(--rl-on-accent); border: none;
  font: 900 13px 'Noto Sans TC', sans-serif; padding: 9px 0; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--rl-shadow); transition: transform .1s, box-shadow .1s;
}
body.light .rl-e-btn { color: #fff; }
@media (hover: hover) {
  .rl-e-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rl-shadow); }
}
.rl-e-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rl-shadow); }
.rl-e-rank {
  flex: none; background: none; border: 2px solid var(--rl-slot); color: var(--rl-ink-2);
  font: 900 12px 'Noto Sans TC', sans-serif; padding: 0 14px; border-radius: 999px;
}
@media (hover: hover) {
  .rl-e-rank:hover { border-color: var(--rl-info); color: var(--rl-info); }
}
.rl-entry button { touch-action: manipulation; }

/* ---------- 排行榜浮層（入口卡的「看排行榜」） ---------- */
#rl-board-ov {
  position: fixed; inset: 0; z-index: 94; display: grid; place-items: center;
  padding: 20px; opacity: 0; transition: opacity .2s;
}
#rl-board-ov.on { opacity: 1; }
#rl-board-ov .rl-bg {
  position: absolute; inset: 0; background: rgba(32, 19, 17, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light #rl-board-ov .rl-bg { background: rgba(92, 64, 56, .55); }
#rl-board-ov .rl-modal {
  position: relative; width: min(360px, 94vw); max-height: 90vh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--rl-bg); border: 3px solid var(--rl-line); border-radius: 24px;
  display: flex; flex-direction: column; color: var(--rl-ink);
  animation: rl-rise .25s ease-out; scrollbar-width: none;
  font-family: 'Noto Sans TC', sans-serif;
}
#rl-board-ov .rl-modal::-webkit-scrollbar { display: none; }
#rl-board-ov .rl-head b { flex: 1; }
.rl-bv { padding: 16px 18px 20px; }
.rl-bv .rl-board { margin: 0; padding: 0; background: none; border: none; }
.rl-bv-me { margin-top: 10px; }

/* ---------- 手機底部 Tab 的猜歌鈕：換成接龍的暖色 ----------
   這顆現在開的是接龍（見 mobile.js），配色要跟著換才不會像兩個東西。
   規則寫在 relay.css（載入順序在 blitz.css 之後）覆蓋掉原本的粉色。 */
#mtab .mt-quiz .mt-badge { background: var(--rl-accent); }
#mtab .mt-quiz .mt-badge svg { color: var(--rl-on-accent); }
body.light #mtab .mt-quiz .mt-badge svg { color: #fff; }
#mtab .mt-quiz .mt-dot { background: var(--rl-info); }
#mtab button.mt-quiz .mt-label { color: var(--rl-accent); }

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