:root{
 --bg:#f2f5fb;--card:#ffffff;--ink:#0b1b33;--mut:#43536f;--pri:#1746c8;--priink:#ffffff;--line:#bfcbe0;--soft:#e6edf9;
 --ok:#0b6b34;--okbg:#d5f2e0;--mid:#7a4a00;--midbg:#ffe9c4;--gap:#9b1f19;--gapbg:#fddcd8;--draft:#4f35b0;--draftbg:#e8e1ff;
 --O:#1559c4;--Obg:#dce9ff;--Y:#b34a05;--Ybg:#ffe4cf;--hi:#fff3b0;--shadow:0 1px 3px rgba(11,27,51,.18);
}
:root[data-theme=dark]{
 --bg:#0a1220;--card:#131f35;--ink:#f1f5fd;--mut:#b4c2dc;--pri:#6c9bff;--priink:#06122b;--line:#2c3e60;--soft:#1b2a47;
 --ok:#7be0a4;--okbg:#0f3a24;--mid:#ffd27a;--midbg:#3d2c05;--gap:#ffa8a0;--gapbg:#4a1713;--draft:#c4b3ff;--draftbg:#2a2058;
 --O:#8fbaff;--Obg:#14305e;--Y:#ffb98a;--Ybg:#4a2410;--hi:#5b5114;--shadow:0 1px 3px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]){
 --bg:#0a1220;--card:#131f35;--ink:#f1f5fd;--mut:#b4c2dc;--pri:#6c9bff;--priink:#06122b;--line:#2c3e60;--soft:#1b2a47;
 --ok:#7be0a4;--okbg:#0f3a24;--mid:#ffd27a;--midbg:#3d2c05;--gap:#ffa8a0;--gapbg:#4a1713;--draft:#c4b3ff;--draftbg:#2a2058;
 --O:#8fbaff;--Obg:#14305e;--Y:#ffb98a;--Ybg:#4a2410;--hi:#5b5114;--shadow:0 1px 3px rgba(0,0,0,.6);}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);
 font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Noto Sans CJK TC","Heiti TC",system-ui,-apple-system,"Segoe UI",sans-serif}
#app{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.splash{margin:auto;text-align:center;font-size:2rem;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:.6em;padding:.2em .7em;
 min-height:max(48px,2.6em);min-width:max(48px,2.6em);touch-action:manipulation;user-select:none}
button:active{transform:scale(.97)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
button.on,button.pri{background:var(--pri);color:var(--priink);border-color:var(--pri);font-weight:700}
button[disabled]{opacity:.4;cursor:default}
input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:.5em;padding:.3em .5em;min-height:max(44px,2.4em)}
small{color:var(--mut)}
.row{display:flex;align-items:center;gap:.5em}
.grow{flex:1;min-width:0}
.nowrap{white-space:nowrap}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 頂列 ===== */
.top{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.35em .8em;padding:.35em .7em;background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.4em;font-weight:800;font-size:1.25em;white-space:nowrap}
.brand small{font-weight:500;font-size:.55em}
.tabs{display:flex;gap:.3em;flex-wrap:wrap}
.tabs button{padding:.1em .8em}
.tools{display:flex;gap:.3em;margin-left:auto}
.tools button{padding:0 .4em;font-size:1.05em}
.tbadge{font-variant-numeric:tabular-nums;font-weight:700}

/* ===== 首頁 ===== */
.home{flex:1;min-height:0;display:flex;flex-direction:column;gap:.4em;padding:.5em .7em 0}
.chiprow{flex:none;display:flex;align-items:center;gap:.3em;flex-wrap:wrap}
.chiprow>b{font-size:.8em;color:var(--mut);min-width:3em}
.chip{padding:.05em .7em;min-height:max(44px,2.3em);border-radius:2em;font-size:.95em;white-space:nowrap}
.cols{flex:1;min-height:0;display:grid;gap:.6em;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.col{min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--soft);border-radius:.8em;padding:.4em .5em}
.colhead{flex:none;display:flex;align-items:center;gap:.5em;font-weight:700;padding:.1em .2em .3em;min-height:1.6em}
.colhead .ttl{flex:1;min-width:0}
.pgwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.pg-grid{flex:1;min-height:0;display:grid;gap:.4em;overflow:hidden;align-content:start}
.pg-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:.6em;height:max(48px,2.7em);font-size:.9em}
.pg-bar.hid{visibility:hidden}
.card{display:flex;align-items:center;gap:.5em;text-align:left;padding:.3em .6em;min-height:0;height:100%;overflow:hidden;box-shadow:var(--shadow);border-radius:.7em}
.card.sel{outline:3px solid var(--pri);outline-offset:-1px}
.card .em{font-size:1.7em;flex:none}
.card .tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.card .tt b{font-size:1em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .tt small{font-size:.78em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;font-size:.7em;font-weight:700;padding:.1em .5em;border-radius:1em;border:1px solid currentColor;white-space:nowrap}
.b-d{color:var(--ok);background:var(--okbg)}.b-m{color:var(--mid);background:var(--midbg)}.b-g{color:var(--gap);background:var(--gapbg)}
.b-n{color:var(--draft);background:var(--draftbg);border-style:dashed}.b-t{color:var(--mut);background:var(--card)}
.tagcol{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.15em}
.empty{margin:auto;text-align:center;color:var(--mut);padding:1em;line-height:1.6}
.search{flex:1;min-width:6em}
.foot{flex:none;font-size:.68em;color:var(--mut);text-align:center;padding:.15em .5em;line-height:1.3}
@media (max-aspect-ratio:11/10){.cols{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1.1fr)}}

/* ===== 彈窗／抽屜 ===== */
.mask{position:absolute;inset:0;background:rgba(5,10,25,.55);z-index:30;display:flex;align-items:center;justify-content:center;padding:.6em}
.dlgbox{background:var(--card);border-radius:1em;max-width:min(52em,100%);max-height:100%;width:100%;display:flex;flex-direction:column;padding:.7em .9em;gap:.4em;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.dlgbox h2{margin:0;font-size:1.15em;display:flex;gap:.5em;align-items:center}
.dlgbox .bd{flex:1;min-height:0;overflow:hidden;font-size:.9em;line-height:1.5}
.dlgbox .bd p{margin:.2em 0}
.srcit{padding:.25em 0;border-bottom:1px dashed var(--line);font-size:.85em;overflow:hidden}
.srcit a{color:var(--pri);word-break:break-all}
.drawer{position:absolute;top:0;bottom:0;right:0;width:min(100%,25em);z-index:25;background:var(--card);border-left:1px solid var(--line);box-shadow:-4px 0 18px rgba(0,0,0,.35);display:flex;flex-direction:column;padding:.5em .6em;gap:.4em;overflow:hidden}
.dtabs{flex:none;display:flex;gap:.25em}
.dtabs button{flex:1;padding:0}
.dbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:.4em;overflow:hidden}
.bigdig{font-size:3.6em;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;line-height:1.1}
.bigdig.end{color:var(--gap);animation:blink .5s steps(2) 6}
@keyframes blink{50%{opacity:.2}}
.presets{display:flex;gap:.3em;flex-wrap:wrap}
.team{display:flex;align-items:center;gap:.4em;padding:.2em .4em;border-radius:.6em;border:2px solid var(--line);flex:1;min-height:0}
.team .sc{font-size:2em;font-weight:800;min-width:1.6em;text-align:center;font-variant-numeric:tabular-nums}
.setrow{display:flex;align-items:center;gap:.4em;justify-content:space-between;font-size:.92em}
.seg{display:flex;gap:.2em}.seg button{padding:0 .5em}

/* ===== 播放器 ===== */
.player{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.ptop{flex:none;display:flex;align-items:center;gap:.5em;padding:.3em .6em;background:var(--card);border-bottom:1px solid var(--line)}
.ptop .ptitle{flex:1;min-width:0;line-height:1.2}
.ptop .ptitle b{display:block;font-size:1.05em}
.ptop .ptitle small{display:block}
.pbody{flex:1;min-height:0;display:grid;gap:.5em;padding:.5em .7em;grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
@media (max-aspect-ratio:11/10){.pbody{grid-template-columns:1fr;grid-template-rows:minmax(0,28fr) minmax(0,72fr)}}
@media (max-height:480px){.pbody{grid-template-columns:minmax(0,28fr) minmax(0,72fr);grid-template-rows:1fr}}
.stage{container-type:size;position:relative;border-radius:1em;overflow:hidden;min-height:0;min-width:0;background:linear-gradient(160deg,var(--sg1,#cfe3ff),var(--sg2,#fff1d6));border:1px solid var(--line)}
:root[data-theme=dark] .stage{background:linear-gradient(160deg,#1b2f5b,#3a2a14)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .stage{background:linear-gradient(160deg,#1b2f5b,#3a2a14)}}
.prop{position:absolute;left:50%;top:14%;transform:translateX(-50%);font-size:min(24cqmin,9rem);line-height:1;animation:bob 2.4s ease-in-out infinite}
.actor{position:absolute;bottom:4%;display:flex;flex-direction:column;align-items:center;font-size:min(30cqmin,10rem);line-height:1;transition:transform .25s,filter .25s;filter:grayscale(.55) opacity(.7);max-width:44%}
.actor.L{left:5%}.actor.R{right:5%}
.actor small{font-size:min(7.5cqmin,1.1rem);margin-top:.2em;font-weight:700;color:var(--ink);background:var(--card);padding:.05em .6em;border-radius:1em;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.actor.on{filter:none;transform:scale(1.12);animation:pop .35s}
.actor.mv{animation:mvin .6s ease-out}
.actor .wave{position:absolute;top:-.1em;font-size:.32em;opacity:0}
.actor.on .wave{opacity:1;animation:bob .7s ease-in-out infinite}
.actor.L .wave{right:-.2em}.actor.R .wave{left:-.2em}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6%}}
@keyframes pop{0%{transform:scale(.7)}70%{transform:scale(1.22)}100%{transform:scale(1.12)}}
@keyframes mvin{from{translate:-40% 0;opacity:0}to{translate:0 0;opacity:1}}
.actor.R.mv{animation-name:mvin2}@keyframes mvin2{from{translate:40% 0;opacity:0}to{translate:0 0;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.banner{position:absolute;left:50%;top:3%;transform:translateX(-50%);padding:.1em .9em;border-radius:2em;font-weight:800;font-size:min(8cqmin,1.6rem);white-space:nowrap;display:none}
.banner.show{display:block}
.pbar{position:absolute;left:0;bottom:0;height:.45em;background:var(--pri);width:0}
.dlg{position:relative;min-height:0;min-width:0;border-radius:1em;background:var(--card);border:1px solid var(--line);padding:.5em .7em;overflow:hidden;display:flex;flex-direction:column;gap:.35em}
.ln{display:flex;gap:.5em;align-items:flex-start;padding:.15em .4em;border-radius:.6em;border-left:.3em solid transparent;cursor:pointer}
.ln .who{flex:none;width:1.6em;height:1.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8em;font-weight:800;margin-top:.1em}
.ln.O .who{background:var(--Obg);color:var(--O)}.ln.Y .who{background:var(--Ybg);color:var(--Y)}
.ln.O{border-left-color:var(--O)}.ln.Y{border-left-color:var(--Y)}
.ln .tx{flex:1;min-width:0;line-height:1.25}
.ln .en{font-weight:700;display:block}
.ln .zh{display:block;font-size:.72em;color:var(--mut);margin-top:.05em}
.ln.cur{background:var(--hi);outline:2px solid var(--pri)}
.ln.dim{opacity:.55}
.blank{display:inline-block;min-width:2.2em;border-bottom:.12em solid var(--pri);color:transparent;cursor:pointer;background:var(--soft);border-radius:.2em;user-select:none}
.blank.open{color:var(--pri);background:transparent;border-bottom-color:transparent}
.one{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.5em;text-align:center;cursor:pointer}
.one .en{font-weight:800;line-height:1.2}
.one .zh{font-size:.55em;color:var(--mut);line-height:1.3}
.one .who2{font-weight:800}
.pageind{position:absolute;right:.6em;bottom:.3em;font-size:.7em;color:var(--mut)}
.ctrl{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35em;padding:.4em .6em;background:var(--card);border-top:1px solid var(--line)}
.ctrl .big{font-size:1.25em;min-width:max(60px,3em);min-height:max(56px,2.8em)}
.ctrl .sep{width:1px;align-self:stretch;background:var(--line);margin:0 .2em}
.modes{display:flex;gap:.25em;flex-wrap:wrap;justify-content:center}
.modes button{padding:0 .6em;font-size:.92em}
.wb .ctrl button,.wb .top button,.wb .ptop button{min-height:max(64px,3em);min-width:max(64px,3em)}
.notice{position:absolute;left:50%;bottom:4.5em;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.4em 1em;border-radius:2em;font-size:.85em;z-index:20;max-width:92%;text-align:center}
.prog{flex:none;display:flex;gap:.2em;justify-content:center;padding:.1em 0}
.prog i{width:.55em;height:.55em;border-radius:50%;background:var(--line)}.prog i.a{background:var(--pri)}
/* 選擇題 */
.dr{flex:1;min-height:0;display:flex;flex-direction:column;gap:.45em;overflow:hidden}
.dr .sit{padding:.4em .6em;border-radius:.8em;background:var(--soft);line-height:1.35}
.dr .sit b{display:block}.dr .sit small{display:block;font-size:.8em}
.opt{display:flex;align-items:center;gap:.6em;text-align:left;padding:.35em .7em;border-radius:.8em;flex:1;min-height:0;line-height:1.25;border-width:2px}
.opt .k{flex:none;font-weight:800;width:1.6em;height:1.6em;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft)}
.opt .ot{flex:1;min-width:0}.opt .ot small{display:block;font-size:.8em}
.opt.best{border-color:var(--ok);background:var(--okbg)}.opt.ok{border-color:var(--mid);background:var(--midbg)}.opt.bad{border-color:var(--gap);background:var(--gapbg)}
.res{padding:.4em .7em;border-radius:.8em;border:2px solid var(--line);line-height:1.35}
.say{padding:.4em .7em;border-radius:.8em;background:var(--okbg);border:2px dashed var(--ok);line-height:1.3}
.say b{display:block}.tip{font-size:.8em;color:var(--mut);line-height:1.35}
.scorebar{display:flex;gap:.3em;flex-wrap:wrap}
.scorebar button{padding:0 .6em;font-size:.85em}

/* ===== 追加 ===== */
.lines{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.35em}
.ln .tx{overflow-wrap:anywhere}
.one{justify-content:flex-start;overflow:hidden}
.one>*:first-child{margin-top:auto}.one>*:last-child{margin-bottom:auto}
.one .en{overflow-wrap:anywhere}
.sit.big{flex:1;display:flex;flex-direction:column;overflow:hidden}
.sit.big .sc{margin:auto 0}
.sit.big b{font-size:1.1em}
.opt.picked{outline:3px solid var(--pri);outline-offset:1px}
.opt.rev:not(.picked){opacity:.72}
.opt[disabled]{opacity:1}.opt.rev[disabled]:not(.picked){opacity:.72}
.tp{margin:.25em 0;line-height:1.35}.tp.en{font-weight:700}.tp.zh2{font-size:.8em;color:var(--mut)}
.tpbar{flex:none;text-align:center;font-size:.7em;color:var(--mut);min-height:1em}
.ptop .badge{align-self:center}
.dr .ell{display:block}

.bigdig{line-height:1.3}
.ptop .ptitle b,.ptop .ptitle small{line-height:1.3}
.one .who2{font-size:max(.45em,15px)}

.col[hidden]{display:none}
.compact .cols{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.compact .brand small,.compact .foot .dsc,.compact .colhead .lg{display:none}
.compact .brand{font-size:1.1em}
.compact .tabs button{padding:0 .5em}
.compact .tabs{margin-right:auto}
.chiprow.sels select{flex:1;min-width:0}
.bk{padding:0 .6em;font-size:.9em}
small{font-size:max(10.5px,.85em)}
.badge{font-size:max(10px,.7em)}
.card .tt small{font-size:max(10.5px,.78em)}
.foot{font-size:max(10px,.68em)}
.pageind,.pg-bar,.tpbar{font-size:max(10.5px,.8em)}
.actor small{font-size:max(10.5px,min(7.5cqmin,1.1rem))}
.banner{font-size:max(12px,min(8cqmin,1.6rem))}

.brand small{font-size:max(10.5px,.55em)}

.setnav{flex:none;display:flex;align-items:center;justify-content:center;gap:.5em;min-height:max(48px,2.7em)}
.setnav #srs{margin-left:auto}
.dbody .lines{gap:.4em}
.dbody .lines>.setrow{min-height:max(48px,2.6em)}
.tpbar{height:1.6em;min-height:0;line-height:1.6em;overflow:hidden}
.actor .wave{font-size:max(11px,.32em)}
@media (max-height:520px){
 .drawer{width:min(100%,42em)}
 .dbody.tt{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:.3em .6em}
 .bigdig{font-size:min(3.6em,16dvh)}
 .dbody.tt .bigdig{font-size:min(3em,18dvh)}
}

.dbody .lines>.team{flex:none;min-height:max(52px,3em)}

.dr small,.opt .ot small,.say small,.res small{font-size:max(10.5px,.8em)}

@container (max-height:150px){.prop{display:none}}