/* 像素 RPG 版（v3）：舞台與遊戲視窗。沿用第二輪試閱確認的亮色背景與視窗樣式。 */
:root { --win1: #2e5294; --win2: #213e75; --frame: #efe6d2; }
.pstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #121c2a; container-type: size; overflow: hidden; }
.phud { width: min(100%, calc((100cqh - 110px) * 16 / 9)); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted-dark); min-width: 0; }
.phud .hud-t { color: var(--on-dark); font-weight: 700; }
.phud .slate { position: static; margin-left: auto; max-width: 52%; }
.screen { position: relative; width: min(100%, calc((100cqh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; flex: none; background: #dfe7ef; border: 3px solid #3a4b62; border-radius: 6px; overflow: hidden; container-type: inline-size; font-size: clamp(8px, 1.62cqw, 15px); line-height: 1.4; color: #f4f1ea; }
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.ov { position: absolute; pointer-events: none; }
.ov.live { pointer-events: auto; }
.hidden { display: none !important; }
.win { background: linear-gradient(180deg, var(--win1), var(--win2)); border: 2px solid var(--frame); box-shadow: 0 0 0 2px #070c16, inset 0 0 0 1px #5d7390, 0 3px 0 2px rgba(0,0,0,.3); border-radius: 3px; padding: .35em .6em; color: #f4f1ea; text-shadow: 1px 1px 0 #070c16; }
.win h4 { margin: 0; font-size: .95em; color: #ffd2a6; }
.win h4.foeh { color: #f1c6fb; }
.win small { color: #dbe3ee; font-size: .8em; }
.win p { margin: .2em 0 0; font-size: .88em; }
#msg { left: 2%; right: 2%; top: 2.5%; min-height: 3.2em; }
#msg .who { color: #ffcf8a; font-weight: 800; margin-right: .5em; }
#msg .txt { font-weight: 600; }
.caret { display: inline-block; width: .5em; height: .5em; background: var(--accent); margin-left: .3em; animation: pblink .8s steps(2) infinite; }
@keyframes pblink { 50% { opacity: 0; } }
.pbar { position: relative; display: block; height: .55em; background: #070c16; border: 1px solid #8ea3bd; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--c1) 0 6px, var(--c2) 6px 7px); }
.pbar.hp { --c1: #62c497; --c2: #3f8f6c; } .pbar.mp { --c1: #6fb0ea; --c2: #3f78b0; } .pbar.foe { --c1: #c26bd6; --c2: #8a3f9e; } .pbar.low { --c1: #e8b04a; --c2: #b07d24; }
.row { display: grid; grid-template-columns: 4.6em 1fr 2.4em; gap: .45em; align-items: center; font-size: .86em; }
.row .lab { font-size: .8em; color: #c9d4e2; } .row .num, .prow .num, .frow .num { font-family: var(--mono); font-size: .9em; text-align: right; color: #eef3f8; }
.prow { display: grid; grid-template-columns: 9.4em 1fr 2em 1fr 2em; gap: .4em; align-items: center; font-size: .86em; padding: .12em 0; border-bottom: 1px dashed rgba(173,190,212,.35); }
.prow:last-child { border-bottom: 0; }
.prow.head { font-size: .68em; color: #c9d4e2; padding: 0; border: 0; } .prow.head span { text-align: center; }
.prow b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow.active b { color: #ffcf8a; } .prow.active b::before { content: "▶"; color: var(--accent); margin-right: .15em; }
.st { display: inline-block; font-size: .7em; padding: 0 .35em; margin-left: .3em; border-radius: 2px; background: #6d4b1b; color: #ffe0b0; vertical-align: middle; }
.st.ok { background: #1f5a43; color: #c9f5de; }
.frow { display: grid; grid-template-columns: 5.6em 1fr 3.4em; gap: .4em; align-items: center; font-size: .86em; padding: .1em 0; }
.frow.gone { opacity: .5; } .frow.gone b { text-decoration: line-through; }
.frow b { color: #f1c6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow small { grid-column: 1 / -1; margin-top: -.2em; font-size: .72em; line-height: 1.3; }
#party { left: 1.5%; bottom: 2.5%; width: 56%; padding: .25em .6em; }
#foe { right: 1.5%; bottom: 2.5%; width: 38.5%; padding: .25em .6em; }
#cmd { left: 37%; top: 24%; width: 24%; }
#cmd ul, #mapCmd ul { list-style: none; margin: .1em 0 0; padding: 0; font-size: .9em; }
#cmd li, #mapCmd li { padding: .04em .2em .04em 1.1em; position: relative; }
#cmd li.sel, #mapCmd li.sel { color: #ffcf8a; }
#cmd li.sel::before, #mapCmd li.sel::before { content: "▶"; position: absolute; left: 0; color: var(--accent); animation: pblink .6s steps(2) infinite; }
#cmd .sub { border-top: 1px dashed rgba(173,190,212,.45); margin-top: .2em; padding-top: .2em; }
#mapCmd { width: 15%; } #mapCmd.live { width: 19%; }
.mb { all: unset; cursor: pointer; position: relative; display: block; width: 100%; }
.mb:hover, .mb:focus-visible, .mb.sel { color: #ffcf8a; }
.mb:focus-visible { outline: 1px dashed #ffcf8a; outline-offset: 1px; }
.mb:hover::before, .mb:focus-visible::before, .mb.sel::before { content: "▶"; position: absolute; left: -1.1em; color: var(--accent); }
.live .ask { display: block; font-size: .72em; color: #ffe0b0; margin-top: .15em; }
.win.live { box-shadow: 0 0 0 2px #070c16, 0 0 0 4px var(--accent), inset 0 0 0 1px #5d7390; }
.pop { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.05em; color: #fff; text-shadow: 2px 2px 0 #070c16, -1px -1px 0 #070c16, 1px -1px 0 #070c16, -1px 1px 0 #070c16; white-space: nowrap; pointer-events: none; }
.pop.ok { color: #9ff0c8; } .pop.warn { color: #ffcf8a; } .pop.mp { color: #9fd0ff; } .pop.bad { color: #f0a0c0; }
#banner { left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 2em; font-weight: 900; letter-spacing: .12em; color: #fff; text-shadow: 3px 3px 0 #070c16; padding: .15em 1em; white-space: nowrap; background: linear-gradient(90deg, transparent, rgba(232,137,58,.9) 18%, rgba(232,137,58,.9) 82%, transparent); }
#mapTitle { left: 2%; top: 21%; }
#mapTitle .t1 { font-weight: 900; font-size: 1.02em; }
#unitWin { left: 2%; bottom: 3%; width: 32%; }
#terrWin { right: 2%; bottom: 3%; width: 25%; }
#mini { right: 2%; top: 21%; width: 13%; } #mini svg { width: 100%; height: auto; display: block; }
#result { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72%; }
#result ul { margin: .3em 0 .2em; padding-left: 1.1em; font-size: .88em; }
#result li { margin: .1em 0; }
#result .note { font-size: .76em; color: #ffcf8a; }
#result.chres { top: 64%; width: 60%; }
.tagm { position: absolute; transform: translate(-50%, -100%); font-size: .6em; padding: .02em .35em; background: rgba(33,62,117,.9); border: 1px solid #8ea3bd; color: #eef3f8; border-radius: 2px; white-space: nowrap; }
.tagm.node { border-color: var(--accent); color: #ffe0b0; font-weight: 700; }
.tagm.done { background: rgba(31,90,67,.92); border-color: #62c497; }
.badge { position: absolute; right: 1.2%; top: 17%; font-size: .56em; color: #3a4b62; background: rgba(255,255,255,.7); border: 1px solid #b9c3d8; border-radius: 3px; padding: .05em .45em; pointer-events: none; }
.app[data-scene="對戰"] .badge, .app[data-scene="結果"] .badge { top: auto; bottom: 30%; right: 1.5%; }
.startbox { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 86%; text-align: center; display: flex; flex-direction: column; gap: .5em; align-items: center; padding: .8em 1em; background: rgba(33,62,117,.94); border: 2px solid var(--frame); box-shadow: 0 0 0 2px #070c16; border-radius: 4px; z-index: 3; }
.startbox p { margin: 0; font-weight: 800; font-size: 1.05em; }
.startbox div { display: flex; gap: .8em; flex-wrap: wrap; justify-content: center; }
.startbox button { font-size: 1.1em; font-weight: 900; background: var(--accent); color: #1a1208; border: 3px solid #070c16; box-shadow: 0 0 0 2px var(--frame); padding: .4em 1em; border-radius: 4px; }
.startbox #startClick { background: #f4f1ea; }
.startbox small { color: #dbe3ee; font-size: .78em; }
.nextpage { position: absolute; right: 2%; bottom: 3%; z-index: 3; font-size: 1em; font-weight: 800; background: var(--accent); color: #1a1208; border: 3px solid #070c16; box-shadow: 0 0 0 2px var(--frame); padding: .35em .9em; border-radius: 4px; animation: pnudge 1.4s ease-in-out infinite; }
@keyframes pnudge { 50% { transform: translateX(3px); } }
.app[data-scene="結果"] .nextpage { bottom: auto; top: 21%; }
/* 控制列 */
.pctrl { width: min(100%, calc((100cqh - 110px) * 16 / 9)); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pctrl .cbtn { padding: 5px 9px; }
.scrub { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.scrub input { width: 100%; accent-color: var(--accent); margin: 0; }
.segs { display: flex; font-size: 10.5px; color: var(--muted-dark); }
.segs span { border-top: 3px solid #3a4b62; padding-top: 1px; text-align: center; white-space: nowrap; overflow: visible; min-width: 0; }
.segs span.on { border-color: var(--accent); color: #ffd2a6; }
#btnMode { color: var(--on-dark); } #btnMode[aria-pressed="true"] { border-color: var(--accent); color: #ffd2a6; background: var(--accent-soft); }
.pstage .caption { display: none; position: static; width: min(100%, calc((100cqh - 110px) * 16 / 9)); max-height: 22%; overflow: auto; padding: 8px 12px; box-shadow: none; }
.app[data-theater="1"] .pstage .caption { display: block; }
.app[data-theater="1"] .pstage .screen, .app[data-theater="1"] .pstage .pctrl, .app[data-theater="1"] .pstage .phud { width: min(100%, calc((100cqh - 230px) * 16 / 9)); }
.map-big canvas { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #3a4b62; border-radius: 4px; background: #dfe7ef; }
.map-cast .ava { width: 24px; height: 30px; image-rendering: pixelated; flex: none; }
.map-cast li { display: flex; gap: 8px; align-items: center; }
.p-shot ol { margin: 4px 0 0; padding-left: 1.3em; font-size: 13px; }
.p-shot ol li { margin: 3px 0; }
@media (max-width: 900px) {
  .pstage { container-type: inline-size; padding: 8px 8px 10px; aspect-ratio: auto; max-height: none; min-height: 0; }
  .phud, .screen, .pctrl, .pstage .caption { width: 100%; }
  .app[data-theater="1"] .pstage .screen, .app[data-theater="1"] .pstage .pctrl, .app[data-theater="1"] .pstage .phud { width: 100%; }
  .phud .slate { display: none; }
  .screen { font-size: clamp(7px, 1.95cqw, 14px); }
  .pctrl .cbtn span { display: none; }
  .pctrl #btnPlay span, .pctrl #btnMode span { display: inline; }
  .scrub { order: 10; flex-basis: 100%; }
  #cmd { width: 30%; left: 34%; }
  .prow { grid-template-columns: 7.6em 1fr 1.8em 1fr 1.8em; }
  #mapCmd.live { width: 24%; }
}
@media (prefers-reduced-motion: reduce) { .caret, #cmd li.sel::before, #mapCmd li.sel::before, .nextpage { animation: none; } }
/* 錄影模式（?video=1）：只留遊戲畫面與實況資訊列 */
.app.video .top, .app.video .bar, .app.video .panel, .app.video .phud, .app.video .pctrl, .app.video .pstage .caption, .app.video .startbox, .app.video .nextpage { display: none !important; }
.app.video .pstage { position: fixed; inset: 0; padding: 0; display: block; background: #0d1622; }
.app.video .screen { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; border-radius: 0; font-size: 20.7px; }
#vstrip { display: none; }
.app.video #vstrip { display: flex; position: fixed; left: 0; right: 0; top: 720px; height: 80px; align-items: center; gap: 18px; padding: 0 26px; background: linear-gradient(180deg, #16233a, #0d1622); border-top: 3px solid #e8893a; color: #eef3f8; font-family: var(--font); }
#vstrip .live { background: #d0342c; color: #fff; font-weight: 900; padding: 4px 12px; border-radius: 4px; letter-spacing: .08em; font-size: 20px; }
#vstrip .ttl { flex: 1; min-width: 0; }
#vstrip .ttl b { display: block; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vstrip .ttl small { color: #aebcd0; font-size: 16px; }
#vstrip .hosts { font-size: 18px; color: #ffd2a6; font-weight: 800; white-space: nowrap; }
#vstrip .hosts span { color: #9fd0ff; }

/* ── v4：前導篇／接續篇全文、課後閱讀標記、矩陣圖 */
.p-use { display: inline-block; margin: 2px 0 10px; padding: 3px 10px; font-size: 13px; color: #5a3d12; background: #f6e3bf; border: 1px solid #e2c48d; border-radius: 6px; }
.p-body { margin: 4px 0 14px; padding: 10px 14px 6px; background: #fffaf1; border: 1px solid var(--paper-line); border-radius: 8px; font-size: 14.5px; line-height: 1.75; }
.p-body h5 { margin: 4px 0 6px; font-size: 14px; }
.p-body p { margin: 0 0 10px; }
.p-body ul, .p-body ol { margin: 0 0 10px; padding-left: 1.4em; }
.p-body li { margin: 2px 0; }
.p-body blockquote { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 6px 6px 0; }
.p-body .tbl-wrap { overflow-x: auto; margin: 0 0 10px; }
.p-body table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.55; }
.p-body th, .p-body td { border: 1px solid var(--paper-line); padding: 5px 7px; text-align: left; vertical-align: top; }
.p-body th { background: var(--paper-2); }
.tick.after span { opacity: .45; }
.toc-m { white-space: nowrap; }
.mx { margin: 4px 0 12px; }
.mx figcaption { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.mx-y { font-size: 11.5px; color: var(--ink-2); margin-bottom: 4px; }
.mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mx-q { border: 1px solid var(--paper-line); border-radius: 7px; padding: 7px 9px; background: #fff; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.5; }
.mx-q b { font-size: 13px; }
.mx-q small { color: var(--ink-2); }
.mx-q.hot { border: 2px solid var(--accent); background: #fff1e3; }
.mx-x { margin-top: 4px; font-size: 11.5px; color: var(--ink-2); text-align: right; }
@media (max-width: 520px) { .mx-grid { grid-template-columns: 1fr; } }
.jump input { width: 6.2em; }
.toc-n { white-space: nowrap; min-width: 4.4em; }

a.tbtn{text-decoration:none}
.tbtn.board{border-color:var(--accent);margin:0 2px}
.tbtn.board:hover{background:var(--accent-soft)}
@media (max-width:1180px){.tbtn.board span{display:inline}}
@media (max-width:560px){.tbtn.board span{display:none}}
.data-note{font-size:12.5px;margin:8px 0 0;color:var(--muted-dark)}
.data-note .lnk{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}
.data-fields{margin:8px 0 0;font-size:13px}
.data-fields summary{cursor:pointer;font-weight:700}
.data-fields .doc{max-height:40vh;overflow:auto;margin-top:6px}
#dlgFiles > .files-tabs, #dlgFiles > .doc-note, dialog > .dlg-head { flex: none; }