/* sra dojo -- 接話遊戲(主筆 10-21). 版型 🪞 rec-rec/talk: 單窗 368x448, 深色毛玻璃, 對方一句在上, 選項(自動青)貼在下緣, 沒有輸入框.
   其他對齊 sra: 底色 sra 橙, 注音(ruby), 中文譯文在原文下一行(sra 黃綠), 字型 / 鈕照 rec-kit base.css */
:root{--k:230,103,32;--bg:#E66720;--ink:#fff;--them:#ffd400;--auto:#00ffea;--zh:#ccf527}
html,body{height:100%}
body{display:grid;place-items:center;padding:8px;background:var(--bg);color:var(--ink)}
#win{width:min(368px,100%);height:min(448px,calc(100vh - 16px));display:flex;flex-direction:column;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#top{flex:none;padding:2px 6px;display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.06)}
#title{margin-right:auto}
#pos{opacity:.7}
#clock{min-width:30px;text-align:right;color:var(--auto)}
#clock.out{color:var(--pick)}
#log{flex:1;min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
#log::-webkit-scrollbar{width:4px}#log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.msg{max-width:92%}
.msg.them{color:var(--them)}
.msg.you{align-self:flex-end;text-align:right}
.msg .who{opacity:.55}
.msg.note{opacity:.85}
.msg.note .best{color:var(--auto)}
.zh{display:block;color:var(--zh)}
rt{font-size:7px;letter-spacing:-.5px;opacity:.75}
/* 選項: talk 的自動青多選項(白 .08 底, hover .18), 前面掛號碼 = 鍵盤 1-4 */
#opts{flex:none;display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:0 6px 4px}
#opts button{width:auto;text-align:left;padding:1px 3px;color:var(--auto);background:rgba(255,255,255,.08);opacity:1}
#opts button:hover,#opts button:focus-visible{background:rgba(255,255,255,.18)}
#opts button:active{background:rgba(255,255,255,.26)}
.home{position:fixed;left:4px;top:4px;line-height:1;opacity:.8;color:#fff}
.home:hover{opacity:1}
.e{padding:0 1px}
@media (max-width:560px){
 body{padding:0;font-size:16px}
 #win{width:100%;height:100dvh}
 #top{padding:8px 44px}
 #opts button{padding:4px 6px}
}

/* 左欄 = 控制面(條 19): 組 = 灰標題, 章 = 一列(右邊 進度/總數). 版面照 sra 的 pack 欄, 貼在窗左邊 */
#wrap{position:relative;margin-left:170px}   /* 左欄掛在窗外, 整組往右讓一格, 窄螢幕不被切掉 */
#sets{position:absolute;right:calc(100% + 2px);top:0;width:168px;max-height:min(448px,calc(100vh - 16px));overflow-y:auto;padding:1px 2px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);scrollbar-width:thin}
.grp{padding:3px 1px 1px;opacity:.55}
.ch{display:flex;gap:4px;padding:1px;cursor:pointer}
.ch .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch .pg{opacity:.6}
.ch:hover{background:rgba(255,255,255,.14)}
.ch:active{background:rgba(255,255,255,.22)}
.ch.on{background:rgba(255,255,255,.22);color:var(--them)}
/* 拉線(rec-kit 拉線模組): 1px 線 + 5px 紅點, 上下各 3px 看不見的命中區. 一直顯示(它是這一章的進度, 不是藏在鈕底下的設定).
   線色用黑底那一階藍 #8585ff(系統藍 #0000ff 在深色窗上看不見) */
#hair{flex:none;padding:5px 6px 4px;cursor:ew-resize;touch-action:none}
#line{position:relative;height:1px;background:#8585ff}
#line::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
#dot{position:absolute;top:-2px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--pick);pointer-events:none}
@media (max-width:560px){
 #wrap{margin-left:0}
 #sets{position:static;width:auto;max-height:none;display:flex;flex-wrap:wrap;gap:3px}
 .grp{width:100%}
}