:root{--paper:#f3eee3;--paper2:#ebe4d4;--ink:#17171b;--ink2:#3b3a40;--mute:#7a756b;--yel:#ffd23f;--red:#e8432f;--blue:#2f5bff;--teal:#14b3a2;--pink:#ff9dbb;--org:#ff8a3d;--white:#fffdf8;
--serif:"Noto Serif TC",serif;--sans:"Noto Sans TC",system-ui,sans-serif;--num:"Space Grotesk","Noto Sans TC",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#0e0e10;overflow:hidden;font-family:var(--sans);color:var(--ink)}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform-origin:50% 50%;overflow:hidden;background:var(--paper)}
#grain{position:absolute;inset:0;pointer-events:none;z-index:60;opacity:.55;mix-blend-mode:multiply;background-size:420px 420px}
.layer{position:absolute;inset:0}
/* ---------- header ---------- */
#hdr{position:absolute;left:0;top:0;width:1920px;height:70px;z-index:30;display:flex;align-items:center;padding:0 40px;gap:22px}
#hdr .chap{font:900 30px/1 var(--serif);letter-spacing:.02em;background:var(--ink);color:var(--paper);padding:9px 18px 10px;border-radius:4px;white-space:nowrap}
#hdr .chap b{color:var(--yel);font-family:var(--num);font-weight:700;margin-right:12px}
#hdr .era{font:700 22px/1 var(--mono);color:var(--mute);letter-spacing:.08em}
#hdr .yr{margin-left:auto;font:700 54px/1 var(--num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#hdr .yr small{font:700 18px/1 var(--mono);color:var(--mute);margin-right:12px;letter-spacing:.1em}
#prog{position:absolute;left:0;top:0;height:6px;background:var(--red);z-index:31;width:0}
/* ---------- stage area ---------- */
#scenes{position:absolute;left:0;top:70px;width:1920px;height:570px;z-index:10}
.beat{position:absolute;inset:0;opacity:0;will-change:opacity}
.abs{position:absolute}
.ph{position:absolute;background:var(--white);padding:12px 12px 0;box-shadow:6px 8px 0 rgba(23,23,27,.88);border:3px solid var(--ink)}
.ph .im{position:relative;overflow:hidden;background:#ccc}
.ph .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.ph .cap{font:700 22px/1.35 var(--sans);padding:9px 2px 4px;color:var(--ink)}
.ph .cr{font:500 13px/1.3 var(--mono);color:#6d685f;padding:0 2px 10px;letter-spacing:.01em}
body.nonotes .cr,body.nonotes .src{visibility:hidden}
.tape{position:absolute;width:120px;height:34px;background:rgba(255,210,63,.78);top:-18px;left:calc(50% - 60px);transform:rotate(-3deg);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.kick{font:700 24px/1 var(--mono);letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.big{font:900 92px/1.12 var(--serif);letter-spacing:.01em}
.mid{font:900 58px/1.2 var(--serif)}
.body{font:700 34px/1.45 var(--sans)}
.small{font:500 24px/1.45 var(--sans);color:var(--ink2)}
.src{font:500 15px/1.35 var(--mono);color:#6d685f}
mark,.hl{background:linear-gradient(transparent 52%,var(--yel) 52%,var(--yel) 92%,transparent 92%);color:inherit;padding:0 .08em}
.hl{background-size:0% 100%;background-repeat:no-repeat;background-image:linear-gradient(transparent 52%,var(--yel) 52%,var(--yel) 92%,transparent 92%);background-color:transparent}
.nw{white-space:nowrap}
.panel{position:absolute;background:var(--white);border:3px solid var(--ink);box-shadow:6px 8px 0 var(--ink);border-radius:14px}
.numb{font:700 170px/1 var(--num);letter-spacing:-.04em}
.chip{display:inline-block;font:700 26px/1 var(--sans);padding:10px 18px;border:3px solid var(--ink);border-radius:999px;background:var(--white);white-space:nowrap}
.stamp{position:absolute;font:900 54px/1 var(--serif);color:var(--red);border:6px solid var(--red);padding:10px 22px;border-radius:10px;transform:rotate(-8deg);background:rgba(255,253,248,.85)}
svg text{font-family:var(--sans)}
/* ---------- subtitles ---------- */
#subs{position:absolute;left:210px;right:210px;top:646px;height:92px;z-index:35;display:flex;align-items:center;justify-content:center;pointer-events:none}
#subs .box{background:var(--white);border:3px solid var(--ink);border-radius:12px;padding:8px 26px 10px;font:700 38px/1.3 var(--sans);text-align:center;max-width:1500px;box-shadow:4px 5px 0 var(--ink)}
#subs .box:empty{display:none}
#subs .w{white-space:nowrap}
#subs mark{background:linear-gradient(transparent 55%,var(--yel) 55%,var(--yel) 95%,transparent 95%)}
body.nosubs #subs{display:none}
/* ---------- avatar ---------- */
#pip{position:absolute;left:26px;top:584px;width:168px;height:168px;z-index:36;border-radius:50%;border:4px solid var(--ink);background:var(--yel);overflow:hidden;box-shadow:4px 5px 0 var(--ink);transition:none}
#pip img{position:absolute;left:-6%;top:-2%;width:112%;height:112%;object-fit:contain;display:none}
#pip img.on{display:block}
/* ---------- lanes ---------- */
#lanes{position:absolute;left:0;top:754px;width:1920px;height:326px;z-index:20;background:var(--ink);color:var(--paper)}
#axis{position:absolute;left:206px;right:24px;top:0;height:26px}
#axis i{position:absolute;top:4px;font:700 15px/1 var(--mono);color:#9c968b;transform:translateX(-50%);font-style:normal}
.lane{position:absolute;left:0;width:1920px}
.lane .lab{position:absolute;left:0;top:0;bottom:0;width:198px;display:flex;align-items:center;gap:10px;padding-left:22px;font:900 25px/1 var(--sans);color:var(--paper);border-right:2px solid #3a3a42}
.lane .lab em{font:700 13px/1 var(--mono);color:#9c968b;font-style:normal;letter-spacing:.06em}
.lane .lab .lw{display:flex;flex-direction:column;gap:5px}
.lane .trk{position:absolute;left:206px;right:24px;top:0;bottom:0;overflow:hidden}
.lane.food{background:#2b2a22}
.lane.food .lab{color:var(--yel)}
.lane + .lane{border-top:1px solid #34343b}
.it{position:absolute;top:50%;display:flex;align-items:center;gap:8px;white-space:nowrap;transform:translateY(-50%);will-change:transform,opacity}
.it .d{width:12px;height:12px;border-radius:50%;background:var(--paper);flex:none;border:2px solid var(--ink)}
.it .t{font:700 19px/1 var(--sans);color:var(--paper);background:#2c2c33;border:1.5px solid #55555e;border-radius:6px;padding:5px 9px}
.it .t b{font:700 14px/1 var(--mono);color:#b8b2a6;margin-right:6px}
.lane.food .it .t{background:#4a4224;border-color:#857536;color:#fff3c4}
.lane.mgmt .it .t{background:#21304f;border-color:#3e5c98}
.it.dot .t{display:none}
.it svg{flex:none}
.it.cur .t{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.it.cur .t b{color:#5b4b00}
#ph{position:absolute;top:26px;bottom:0;width:3px;background:var(--red);z-index:5;left:0}
#ph::before{content:"";position:absolute;top:-6px;left:-7px;border:8px solid transparent;border-top:10px solid var(--red)}
.lane svg.ch{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.lane .val{position:absolute;right:30px;top:50%;transform:translateY(-50%);font:700 26px/1 var(--num);color:var(--yel);text-align:right}
.lane .val small{display:block;font:500 12px/1.2 var(--mono);color:#9c968b;margin-top:3px}
/* ---------- overlays ---------- */
#chapcard,#titlecard,#hold,#endcard{position:absolute;inset:0;z-index:50;opacity:0;pointer-events:none}
#chapcard{background:var(--ink);color:var(--paper);display:flex;align-items:center;padding-left:170px;gap:60px}
#chapcard .no{font:700 300px/1 var(--num);color:transparent;-webkit-text-stroke:5px var(--yel);letter-spacing:-.04em}
#chapcard .tt{font:900 104px/1.15 var(--serif)}
#chapcard .er{font:700 30px/1 var(--mono);color:var(--yel);letter-spacing:.2em;margin-bottom:26px}
#titlecard{background:var(--yel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
#titlecard .a{font:900 128px/1.1 var(--serif);text-align:center}
#titlecard .b{font:700 50px/1 var(--sans);background:var(--ink);color:var(--yel);padding:18px 36px;border-radius:8px}
#titlecard .c{font:700 24px/1 var(--mono);letter-spacing:.2em}
#hold{background:rgba(23,23,27,.92);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
#hold .k{font:700 30px/1 var(--mono);color:var(--yel);letter-spacing:.3em}
#hold .q{font:900 76px/1.3 var(--serif);text-align:center;max-width:1500px}
#hold svg{width:150px;height:150px}
/* ---------- UI ---------- */
#ui{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78));z-index:100;font:500 14px/1 var(--sans);color:#fff;opacity:0;transition:opacity .25s}
body:hover #ui,body.paused #ui{opacity:1}
#ui button,#ui select{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:7px 11px;font:600 13px/1 var(--sans);cursor:pointer}
#ui select option{color:#000}
#ui button.off{opacity:.5}
#bar{flex:1;height:8px;background:rgba(255,255,255,.25);border-radius:4px;cursor:pointer;position:relative}
#bar i{position:absolute;left:0;top:0;bottom:0;background:var(--yel);border-radius:4px;width:0}
#time{font:600 13px/1 var(--num);min-width:92px;text-align:right}
body.rec #ui,body.noui #ui,body.rec #start{display:none}
body.rec{cursor:none}
#start{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:rgba(14,14,16,.72);color:#fff;text-align:center;cursor:pointer}
#start .go{font:900 30px/1 var(--sans);background:var(--yel);color:var(--ink);border:0;border-radius:999px;padding:22px 46px;cursor:pointer}
#start .t1{font:900 48px/1.2 var(--serif)}
#start .t2{font:500 18px/1.6 var(--sans);opacity:.85;max-width:720px}
#pauseNote{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:110;background:var(--yel);color:var(--ink);font:700 16px/1 var(--sans);padding:10px 16px;border-radius:999px;display:none}

#bgyear{position:absolute;right:-30px;top:40px;z-index:5;font:700 470px/1 var(--num);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:3px rgba(23,23,27,.07);pointer-events:none;font-variant-numeric:tabular-nums}
/* 小尺寸（手機上嵌在頁面裡）：開始畫面與控制列縮小 */
@media (max-width:720px),(max-height:420px){
#start{gap:10px;padding:8px}
#start .t1{font-size:22px}
#start .t2{font-size:11px;line-height:1.5;max-width:92%}
#start .go{font-size:15px;padding:10px 22px}
#ui{gap:5px;padding:5px 6px}
#ui button,#ui select{padding:5px 7px;font-size:11px}
#time{min-width:0;font-size:11px}
#pauseNote{font-size:12px;padding:6px 10px;top:8px}
}
@media (max-width:520px){#chap,#cls,#nt{display:none}}
@media (max-height:280px){#start .t2{display:none}}
/* 英文、越南語旁白版：字幕用 Noto Sans（含越南語字母），字略小 */
html[lang=en] #subs .box,html[lang=vi] #subs .box{font-family:"Noto Sans",var(--sans);font-size:33px;line-height:1.3;max-width:1520px}
html[lang=en] #start .t2,html[lang=vi] #start .t2{font-family:"Noto Sans",var(--sans)}