/* 漫畫 AI 翻譯(2026-11-01,方案 /root/漫畫AI翻譯方案-20261101.md)
   工具條「翻譯」按鈕的功能面板(沿用 reader-bar.css 的 .rb-pop 外框)+ 疊在每頁圖上的譯文層。
   譯文層不吃滑鼠/觸控(pointer-events:none),翻頁點擊區、直排捲動都不受影響。 */
#rb-mtrpop { width: min(360px, calc(100vw - 32px)); }
.mtr-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; color: var(--capsule-text); font-size: 13px; }
.mtr-st { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.mtr-st .mtr-msg { flex: 1; line-height: 1.4; }
.mtr-st .mtr-msg small { display: block; opacity: .65; font-size: 11px; }
.mtr-go { flex: none; height: 32px; padding: 0 14px; border-radius: 16px; border: 0; background: var(--rb-accent, #93c5fd); color: #0b1220; font-weight: 700; cursor: pointer; font-size: 13px; }
.mtr-go[disabled] { opacity: .45; cursor: default; }
.mtr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mtr-row > b { width: 40px; flex: none; font-weight: 600; opacity: .7; font-size: 12px; }
.mtr-opt { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--border-glass); background: transparent; color: var(--capsule-text); cursor: pointer; font-size: 12px; }
.mtr-opt.on { background: var(--rb-accent, #93c5fd); border-color: transparent; color: #0b1220; font-weight: 700; }
.mtr-opt[disabled] { opacity: .4; cursor: default; }
.mtr-note { font-size: 11px; opacity: .6; line-height: 1.5; }
.rb-btn.mtr-on { color: var(--rb-accent, #93c5fd); background: rgba(147,197,253,.16); }
.rb-btn .mtr-dot { position: absolute; top: 6px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.rb-btn .mtr-hint { position: absolute; top: 6px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; }   /* 預設關閉時:這本有譯文 */
.rb-btn { position: relative; }

/* ---- 譯文層 ---- */
.mtr-ov { position: absolute; pointer-events: none; z-index: 20; }   /* 翻頁模式的圖是 absolute + z-index:5(reader.m.css .img-placeholder img),要壓在它上面 */
.mtr-bx { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #111; border-radius: 8px; line-height: 1.15; font-weight: 600; overflow: hidden; padding: 2px; font-family: var(--mtr-font); }
/* 白底畫在 ::before(z-index:-1):.mtr-ov 自成圖層 → 所有框的白底都在最底下、所有字都在上面,框重疊時白底不會蓋到另一段譯文 */
.mtr-bx::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: inherit; }
.mtr-bx .t { white-space: nowrap; }   /* 斷欄由 mtr.js 依斷點算好(<br>),瀏覽器不要自己折 */
.mtr-bx.v { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.04em; text-align: start; }   /* 直排:欄頂對齊,整塊置中 */
/* 明體、圓體字面比系統字飽滿,系統那組緊湊行距/字距會擠在一起 → 放寬 */
.mtr-f-serif .mtr-bx, .mtr-f-round .mtr-bx { line-height: 1.4; }
.mtr-f-serif .mtr-bx.v, .mtr-f-round .mtr-bx.v { letter-spacing: .06em; }
/* 豎排的波浪號、破折號:先固定成橫排字形再轉 90 度(不同字型豎排時有的自動換直式字形、有的不會,這樣才一致) */
.mtr-bx.v .rot { display: inline-block; writing-mode: horizontal-tb; width: 1em; height: 1em; line-height: 1em; text-align: center; transform: rotate(90deg); }   /* 固定 1em 見方:不然直排時會佔一整個行高(1.15~1.4 字),含「……」的欄比估算長 */
.mtr-bg-half .mtr-bx::before { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* 半透明再加高斯模糊:底下原文糊掉、仍透出圖的顏色(11/03 試過 10px,用戶覺得不如 6px,改回) */
/* 半透明模式的文字描邊(11/03 改版):原本 text-shadow 1px 描邊太細 → 改用第二份同樣的字(.sk,mtr.js 產生)疊在正文底下,
   -webkit-text-stroke 畫粗白邊(邊線一半在字內被白字蓋住 → 外擴 = 寬度一半 ≈ .14em)+ 往外的高斯光暈;全用 em,跟著字號縮放 */
.mtr-bx .sk { display: none; }
.mtr-bg-half .mtr-bx .t:not(.sk) { position: relative; z-index: 1; }
.mtr-bg-half .mtr-bx .sk { display: block; position: absolute; z-index: 0; color: #fff; -webkit-text-stroke: .28em #fff;
  text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .6em rgba(255,255,255,.95), 0 0 .8em rgba(255,255,255,.85); }